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.

Prototyping and UX/UI for Games: Architecture, Performance, Localization

You open someone else's Unity project — and see: one Canvas for the whole game, hundreds of nested panels, Layout Groups inside Layout Groups, the profiler showing 4 ms just for UI recalc every frame. This is not uncommon. With over 10 years of experience, we've analyzed hundreds of UI systems — almost all suffered from a lack of architecture from the start. As a result, by mid-development, UI becomes a bottleneck: each new screen introduces bugs, performance drops, and fixes take hours. We design and implement game UI: from wireframes to ready engine components, with a focus on performance and maintainability. Our game interface prototyping approach identifies 80% of UX issues before writing code. Contact us for a consultation — we'll evaluate your project.

Prototyping and Design

Any UI begins with understanding information flows: what the player should see at each moment, what actions are available, how to navigate between screens. Without this, development turns into a series of "made — wrong — redo" iterations. Our prototyping tool is Figma. The choice is not about trends but specific capabilities:

• Component system with variants — test button states (Normal/Hover/Pressed/Disabled)
• Auto Layout — honest simulation of UI behavior under different text sizes (critical for multilingual games)
• Prototypes with transitions — test navigation flow before the first line of code

At the prototype stage, most UX problems are uncovered: non-obvious transitions, overloaded screens, incorrect information hierarchy. Fixing them in Figma takes 15 minutes. Fixing them in a finished project takes half a day. We ensure that each prototype is accompanied by a technical specification for developers — this eliminates ambiguity when transferring to the engine.

uGUI vs UI Toolkit: What to Choose for a New Project

Unity currently has two UI frameworks, and the choice between them is not obvious. uGUI (Canvas-based) is a mature system, present since early versions of Unity. It works with RectTransform and has a rich asset ecosystem. Virtually all existing game UI is built on uGUI.

UI Toolkit is a system based on XML (UXML) and CSS-like styles (USS). Originally created for editor tools, it has been officially supported for runtime UI since Unity 2021. Architecturally, it's closer to web development.

UI Toolkit is suitable for the following scenarios:

• New project, team ready to learn
• Need a complex theme and skin system
• Actively developing custom editor tools

uGUI remains preferable if:

• Supporting an existing project
• Need maximum compatibility with Asset Store assets
• Team already knows uGUI, tight deadlines

How to Achieve Performant UI in Unity?

This is where game UI differs drastically from UI in regular applications. In games, UI updates every frame, and an inefficient implementation can eat 3–5 ms from the frame budget — directly impacting FPS.

How Batching Works in Canvas

Unity combines elements of the same Canvas into a single draw call if they use the same material and texture atlas. Breaking the batch means an additional draw call, which hurts performance.

Batching is broken by:

• Different textures on adjacent elements (solution: sprite atlas via Sprite Atlas)
• Mask component creates a stencil and breaks the batch (alternative: RectMask2D — cheaper)
• Canvases with different Render Modes — batching works only within one Canvas
• Any Graphic Raycaster adds overhead — place it only on interactive Canvases

Splitting Canvas by Content Type

The main recommendation: separate static and dynamic content. When any element in a Canvas changes, Unity rebuilds the geometry of the entire Canvas. If a static HUD frame and an animated health bar live on the same Canvas, the Canvas rebuilds fully every second. This can reduce FPS by 15–20%.

Correct structure:

Canvas (Screen Space - Overlay)
├── Canvas_Static     — backgrounds, frames, icons without animation
├── Canvas_Dynamic    — HP bars, timers, resource counters
└── Canvas_Popup      — modal windows, notifications

Each child Canvas isolates rebuild from the parent. Changes in Canvas_Dynamic do not affect Canvas_Static.

Step-by-step setup for separate Canvases:

1. Create a root Canvas with Render Mode = Screen Space Overlay
2. Inside, create empty GameObjects, each with a Canvas component
3. Name them Static, Dynamic, Popup
4. Move existing UI elements into the appropriate groups
5. Ensure the Canvas Scaler component is set only on the root Canvas (children inherit settings)

Result: up to 60% reduction in UI repaint time in scenes with dynamic HUDs.

TextMeshPro and Text Batching

TextMeshPro is the standard for text in Unity. Unlike the old Text, it uses SDF rendering — text remains crisp at any scale. However, TMP has a nuance: each unique font atlas is a separate material, i.e., a separate draw call. If the game uses three font variants (main, heading, numbers) plus versions for each language, text batching breaks. Solution: TMP Font Asset Creator with glyph merging for needed languages into one atlas. For Cyrillic + Latin + digits, one 2048×2048 atlas usually suffices — reducing text draw calls to 1-2.

How to Adapt UI for Different Screens?

Mobile platforms add a challenge absent on PC: UI must work correctly on 16:9, 18:9, 19.5:9, 4:3, and iPad ratios simultaneously. Adaptation errors are a common cause of rework, consuming up to 30% of the budget.

Tools:

• Canvas Scaler with Scale With Screen Size mode — basic setup. Reference Resolution 1080×1920 for mobile, Match parameter 0.5 (balance between width and height)
• Anchor Presets — each element must be anchored to the correct edge or center
• Safe Area — on devices with notches and rounded corners, buttons must not fall into the inaccessible zone. Solution: Screen.safeArea in code, adjusts the RectTransform of the root element

Testing should be done not only in the Game View — physical testing on devices or using the Device Simulator (built into Unity) is necessary. Order a UI audit — we'll identify bottlenecks in 2-3 days.

UI Localization

This is not a separate task but a requirement from day one. A typical problem: UI designed for Russian text occupying N characters. The German translation is one and a half times longer. Buttons break, text overflows. At the design stage, we perform:

• All text fields with Auto Size in TMP or explicitly set min/max sizes
• Buttons with Horizontal Layout Group + Content Size Fitter instead of fixed width
• Icons and decorative elements are not concatenated into text strings

For implementation, we use the Unity Localization Package (official) or I2 Localization (asset, more flexible for complex cases). Time savings on rework with this approach — up to 40%.

What's Included

• Navigation structure and screen flow design
• Game interface prototyping in Figma with handoff to development
• Implementation of UI components in Unity (uGUI or UI Toolkit)
• Performance audit of existing UI: draw calls, Canvas rebatch, excess Raycasters
• Localization system setup and testing with long translations
• Adaptation for mobile aspect ratios and Safe Area

Timeline: from 5 working days for an audit to 4 weeks for a full cycle. Pricing is calculated individually — contact us for a commercial proposal. Over 10 years in game development, more than 200 projects delivered guarantee results.