Unity UI (uGUI) Interface Layout Optimization for Games

Unity UI (uGUI) Interface Layout for Games

You open inventory on a mobile device, and FPS drops by 15%. Frame Debugger shows 214 draw calls for one screen. Sound familiar? We encounter this regularly and fix it within a week. Unity UI (uGUI) is powerful, but its performance is determined during Canvas architecture, not by the number of elements. In 5 years, we optimized UI in over 50 projects — from indie to AAA. We'll share how to avoid common mistakes.

Unity UI Optimization Guide explains basics: Canvas batches UI elements if they share material and texture from a Sprite Atlas.

Why uGUI Can Lag?

Canvas batches UI elements into a group with one draw call. Batching requires same material, same texture (Sprite Atlas), and no overlaps with foreign elements. Three things break batching:

1. Texture mixing. Icon from Atlas A, button from Atlas B, text via TextMeshPro — each texture switch creates a new draw call. Solution: all visual elements of one screen in one Sprite Atlas. TextMeshPro texts — separate batch but at least one.
2. Nested Mask. Each Mask adds 2 stencil passes and breaks the batch inside and outside. For static elements with clipped corners, it's easier to draw a texture with the desired shape rather than use a Mask.
3. Incorrect Sibling Index order. If Image A and B overlap and come from the same atlas, the batch can still break due to z-order. Unity batches only work if there are no overlaps between elements from different atlases.

Diagnostics: Frame Debugger → Enable → look for the UI section. A good number for HUD is 5-15 draw calls. Over 50 — reason for optimization.

How We Reduce Draw Calls: a Case from Our Practice

A project came with a complaint of 15% FPS drop when opening inventory. Frame Debugger showed 214 draw calls for 48 slots. Each slot was a separate Prefab with an icon from PNG (not atlas), TextMeshPro quantity, background frame from another PNG, and an Outline component (generates additional mesh).

Solution: packed all icons into two Sprite Atlases (items and UI chrome separately), replaced TextMeshPro Outline with SDF Outline in TMP material, added Virtual Scroll List (pool-based) for the item grid. Result: 22 draw calls on the same screen. FPS returned to normal. Benefit: up to 40% reduction in render time. We guarantee a similar approach for your UI.

What Our UI Layout Work Includes

• Current UI audit: Frame Debugger, Profiler, Canvas architecture analysis.
• Atlas optimization: slicing, merging, Fallback Fonts configuration.
• RectTransform layout with anchor binding for resolution adaptation.
• Canvas Scaler configuration for target platforms.
• Virtual scroll implementation for dynamic lists (ScrollView with pool).
• Animation integration (DoTween, Animator) without performance loss.
• UI architecture and code style documentation.
• Team training on batching and profiling.

RectTransform: Rules That Save Pain

Anchors and Pivot are not the same. Anchor defines the attachment point to the parent, Pivot defines rotation and scaling center. Typical error: anchors set to top-left, but the element should be centered. On resolution change, the element drifts. Fix: anchor → center/middle, anchored position = (0, 0).

For adaptation, we use Canvas Scaler with Scale With Screen Size. Reference Resolution 1920×1080 and Match = 0.5 is a working base. For mobile, Match = 0.8–1.0 (prefer Height) prevents UI from stretching on narrow screens.

ContentSizeFitter + VerticalLayoutGroup is convenient for dynamic lists, but each change triggers a Layout Rebuild. For ScrollView with hundreds of elements, use Virtual Scroll List: keep only visible in memory — up to 10-15 active objects instead of hundreds.

How to Configure Canvas Scaler for Mobile Devices?

For mobile with different aspect ratios, set Match to 0.8–1.0 in favor of Height. Otherwise, on iPhone with 19.5:9, UI stretches horizontally. We also set Reference Resolution to target resolution — typically 750×1334 (iPhone 6/7/8) with Scale With Screen Size mode. Details in the official Canvas Scaler documentation.

TextMeshPro: Fonts and Performance

TextMeshPro is the standard for text. It uses SDF rendering, ensuring sharpness at any scale. For Cyrillic or CJK localization, configure Fallback Font Asset: main font for Latin with a Fallback to the required language. TextMeshPro automatically loads missing glyphs, keeping text in 1-2 draw calls.

Atlas Population Mode: Dynamic adds glyphs on encounter — good for dev, bad for release (micro-stutters on first render). For production, use Static with pre-filled atlas via Font Asset Creator.

Layout Process

We start by receiving Figma layouts with sizes, margins, and adaptation rules. Determine Canvas and atlas structure. Layout basic RectTransform, connect fonts and textures. Configure EventSystem and navigation for gamepad/keyboard. Test on multiple resolutions via Game View. Profile with Frame Debugger.

Cost is calculated individually after analyzing Figma layouts and technical requirements. Contact us for a preliminary assessment. Get a consultation on your UI optimization.

Experience shows: proper Canvas and atlas architecture pays off during optimization. We guarantee results — reduce draw calls to 5-15 per HUD without visual quality loss.