UX/UI Game Development: From HUD to Inventory

Designing UX/UI for games that meet strict performance and usability requirements is its own engineering discipline. Take a shooter HUD: information must be readable with peripheral vision without distracting from combat. Inventory in RPGs opens for seconds but is remembered for long. Different tasks, one solution: interfaces that work anywhere, from mobile devices to consoles. Our approach reduces draw calls by 20–30% compared to typical implementation, saving up to 15% frame time.

Why Game UI Is a Separate Discipline

Unlike web design, game interfaces work in real time. Every extra draw call can cause FPS drops. We account for this from the design stage: minimize Canvas count, use batching, and correct font atlases. 10+ years of experience in gamedev let us anticipate bottlenecks. For example, a typical mistake is using one Canvas for the entire UI, causing redraws of hundreds of elements when a timer updates. The solution is splitting Canvas.

How We Ensure Interface Performance

Canvas with Overlay on Mobile

A classic problem: Unity redraws the entire Canvas when any child element changes. Solution — separate Canvas into static and dynamic parts, place Canvas component on frequently updated elements separately. This reduces Canvas rebuild count by 3–4 times.

Scaling for Different Aspect Ratios

Canvas Scaler in Scale With Screen Size mode with Reference Resolution 1920×1080 and Match = 0.5 is standard but not a cure-all. On iPad (4:3) or foldable devices, UI breaks. We set anchors in RectTransform consciously for each element. For unusual resolutions, we add extra rules via Layout Group.

TextMeshPro and Dynamic Font Atlas

If a game has multiple languages with Cyrillic, Greek, Arabic — one atlas isn't enough. When characters are added at runtime, Unity repacks the atlas, causing a freeze of 2–5 ms. For critical screens, we use static atlases with an explicit character set. This completely eliminates atlas-related freezes.

Animation Performance

UI animations often become a bottleneck. DOTween and LeanTween work with transforms directly, bypassing Animator Controller, reducing CPU load. Comparison: scale animation of a button via Animator takes ~1.2 ms, via DOTween — 0.4 ms. On 20 simultaneously animated elements, the difference becomes critical. Order interface development with these optimizations in mind.

How to Measure UI Performance

We use Unity Profiler: look at CPU Usage → Canvas.BuildBatch and Canvas.SendWillRenderCanvases. Target for mobile devices is no more than 2 ms for UI rendering. Target metrics table:

Exceeding the UI budget leads to stutter.

How We Design Game UI

HUD: Information Without Distraction

A good HUD makes information available without requiring focus. We work on the ambient information principle: HP bar changes color when decreasing, pulses at critical level. For each element, we define update frequency: HP — every hit, minimap — 0.5 sec, timer — every second. Update with accumulator instead of direct per-frame update reduces Canvas rebuild load.

Menu Screens and Navigation

Navigation via NavigationGraph in Unity UI — for gamepad and keyboard support. We set explicit navigation for each button, not relying on automatic. Transition animations — via DOTween or LeanTween, not Animator for simple cases. For complex sequence animations, we use Animator with AnimationEvent.

Inventory and Drag-and-Drop

Drag-and-drop is implemented via interfaces IBeginDragHandler, IDragHandler, IEndDragHandler. The main issue is behavior when leaving ScrollRect. We manage events through EventSystem.current and separate scrolling and dragging by a threshold. Virtualization of long lists — via Pooling + ScrollRect, using ObjectPool<T> (built-in since Unity 2021 LTS). For console version, we add gamepad support via EventSystem.

What's Included in the Work

• UX audit of existing UI or design from scratch
• Component library in Figma with state variants
• Assembly in Unity with animations and gameplay integration
• Adaptation for all target platforms (iOS, Android, PC, consoles)
• QA on devices: safe zone notch, different densities, aspect ratios
• Implementation documentation and maintenance recommendations

Timeline and Cost

Cost is calculated individually after analyzing the scope and platform requirements. A simple HUD — from a week, a full UI kit — from a month. Contact us to get a consultation and preliminary estimate for your project. We guarantee a transparent process and fixed deadlines.

For more details on technical aspects, read the official Unity Canvas documentation and TextMeshPro documentation.