Laying Out Graphic UI Elements in Game Engines
Getting beautiful Figma mockup from designer—half the work. Converting it to working UI in engine so it looks correct on 1280×720, 1920×1080, 2560×1440, and 375×812 (iPhone SE and iPhone 14 Pro)—engineering task, not art. This is where most interface development time is lost.
UI Layout Systems: uGUI vs UI Toolkit
Unity has two current approaches to styling. uGUI (Canvas + RectTransform)—battle-tested system, thousands of projects, rich asset ecosystem and known gotchas. UI Toolkit (UXML + USS)—newer system inspired by web standards, with flexbox-like layout engine.
UI Toolkit fundamentally differs from uGUI in render architecture: uses single Mesh Builder generating all UI geometry in one pass, no Canvas batch concept. In theory faster on complex screens. In practice—UI Toolkit doesn't yet support several uGUI features (like World Space Canvas for 3D UIs) and has limited animation support (no built-in Animator analog for UI transitions).
System choice—architectural decision at project start. Switching from uGUI to UI Toolkit mid-development essentially means restyling entire interface.
Adapting to Different Resolutions in uGUI
RectTransform anchor system solves most adaptation tasks with correct use. Element with anchors min(0, 0) max(1, 1) fills parent container space regardless of resolution. Element with anchors min(0.5, 0) max(0.5, 0) always horizontally centered at bottom edge.
Anchors as stretched rectangle (anchors min != max) replace width/height concept with offsets: Left, Right, Top, Bottom define padding from anchor points. Powerful mechanism but requires understanding: on stretched anchor, Width field in Inspector shows padding, not size—guaranteed confusion for first-timers.
Canvas Scaler in Scale With Screen Size mode scales whole Canvas as single unit. Good for fixed screens (main menu, shop), problematic for HUD with edge elements—on wide formats (21:9, 32:9) edge elements go off Safe Area. For such cases use Safe Area adaptation via Screen.safeArea: create intermediate Panel with RectTransform fitted to Safe Area on start and on orientation change.
Flexbox in UI Toolkit: What Changes
USS (Unity Style Sheets) supports flex-direction, flex-wrap, align-items, justify-content—same properties as CSS Flexbox. For horizontal and vertical lists significantly more convenient than VerticalLayoutGroup + ContentSizeFitter in uGUI. Layout auto-adapts to content without LayoutRebuilder.ForceRebuildLayoutImmediate() calls.
For UI Toolkit styling use UI Builder (Window → UI Toolkit → UI Builder)—WYSIWYG editor generating UXML and USS files. Important: UXML describes structure, USS—styles. Split analog to HTML/CSS, but in game context means theming (visual style change without structure change) implementable via USS file switching.
Styling for Multiple Aspect Ratios
Mobile market—zoo of aspect ratios. iPhone SE: 4:3 at 320×568. Modern Android flagships: 20:9 or 21:9. Foldable phones 4:3 folded. Game must look correct on all this.
Safe Area—mandatory wrapper for all edge HUD elements. On iPhone with Dynamic Island and old Android with physical buttons, interface shouldn't enter system areas. Implemented via intermediate Panel container, fits RectTransform offsets to Screen.safeArea rectangle on start. All HUD elements placed inside this container—not outside.
Letterbox vs Crop—two approaches to aspect ratio mismatch. Letterbox (Canvas Scaler Match = 0.5) shows side bars on wide screens, nothing cuts off. Crop (Match = 1.0 with Expand) fills screen but part of UI goes off-edge. For games with horizontal scrolling or important side elements—Letterbox safer. For atmospheric games with full-screen background—Crop usually looks better.
Test styling on real devices or Device Simulator (Window → General → Device Simulator) with several presets. Aspect Ratio in normal Game View doesn't reproduce Safe Area correctly—common reason for UI bugs appearing in production, not editor.
Pixel Perfect: When Pixels Matter
For pixel-art games and sharp graphics projects, Canvas Pixel Perfect mode is critical. Aligns UI elements to physical screen pixels, eliminating subpixel blur. Problem: with it, scaling Canvas (like 2× on resolution) causes small elements to collapse (0 pixels) or jump 1 pixel on animation.
For pixel-art UI in uGUI, correct approach—Reference Resolution exactly matches native game resolution (like 320×180 for pixel-perfect 1080p via 6× integer scale), all elements aligned to whole pixels in Figma.
Case Study: Styling Shop With Dynamic Content
Task: shop screen with unpredictable category count (3 to 12) and tabs with varying item count. Designer gave mockup for 5 categories, 8 items. Need to style for any number.
Solution: horizontal ScrollView for category tabs with HorizontalLayoutGroup and ContentSizeFitter—tabs auto-expand to category count. Item grid via GridLayoutGroup in vertical ScrollView. Item Prefab with flexible size via ContentSizeFitter (description text can vary length). All managed via single ShopController instantiating needed Prefabs from pool on screen open.
Styling took 4 days vs estimated 2—half time spent aligning ContentSizeFitter with nested Layout Groups (known issue: nested ContentSizeFitter requires manual LayoutRebuilder calls in correct order).
| Task Type | Timeline |
|---|---|
| 1 static screen (menu, settings) | 1–2 days |
| 1 complex dynamic screen (inventory, shop) | 3–7 days |
| Full UI kit (10–20 screens) | 3–8 weeks |
| Safe Area adaptation + multiplatform | +3–7 days to any volume |
Cost calculated individually after Figma mockup analysis and platform requirements.