game-ui-hud

name	game-ui-hud
description	Implements game UI and HUD systems including health bars, minimaps, menus, inventory screens, and responsive layouts. Use when building HUD elements, menu systems, screen-space or world-space UI, UI animation, input focus navigation, accessibility features, or optimizing canvas/widget performance in Unity, Unreal, or Godot.
license	Apache-2.0
compatibility	{"clients":["openai-codex","gemini-cli","opencode","github-copilot"]}
metadata	{"owner":"codex","domain":"game-ui-hud","maturity":"draft","risk":"low","tags":["game","ui","hud","menu","widget","ugui","umg","accessibility"]}

Purpose

Build and optimize game UI and HUD systems: in-game overlays (health, ammo, minimap), menu screens (main, pause, settings, inventory), responsive layouts, world-space UI, animation/juice, multi-input support, accessibility, and rendering performance.

When to use this skill

• Building HUD elements: health bars, ammo counters, minimaps, crosshairs, status icons
• Creating menu systems: main menu, pause, settings, inventory, shop screens
• Implementing UI in Unity (UI Toolkit or UGUI), UE5 (UMG/Widget Blueprints), or Godot (Control nodes)
• Making UI responsive across resolutions, aspect ratios, and safe areas
• Adding world-space UI: damage numbers, nameplates, interaction prompts
• Implementing UI animation, tweening, and micro-interactions
• Supporting multiple input methods (mouse, gamepad, touch) with focus navigation
• Adding accessibility: colorblind modes, text scaling, screen reader hooks

Do not use this skill when

• The task is about game mechanics or balance math — use game-design-systems
• The task is about web/app UI with no game engine — use standard frontend skills
• The task is about 3D rendering or shaders — use shader-vfx
• The task is about asset import/compression for UI sprites — use asset-pipeline

Operating procedure

1. Choose the UI framework:
   • Unity UI Toolkit: USS (styling) + UXML (structure), data binding, VisualElement hierarchy. Preferred for new Unity projects.
   • Unity UGUI: Canvas + RectTransform, Image, Text/TextMeshPro, Button. Mature, wide community support.
   • UE5 UMG: Widget Blueprints, UUserWidget, UHorizontalBox/UVerticalBox/UOverlay, bind to UMG Animation.
   • Godot: Control node tree, VBoxContainer/HBoxContainer, Theme resources, Label, TextureRect.
2. Design the HUD layer:
   • Health bar: use a filled Image (Unity) or ProgressBar (UE5) bound to currentHP / maxHP. Tween color from green → yellow → red.
   • Minimap: render a top-down camera to RenderTexture (Unity) or SceneCaptureComponent2D (UE5), display as circular masked UI element.
   • Ammo counter: bind text to weapon data, flash on low ammo (<20%), pulse on reload.
   • Crosshair: screen-center overlay, scale with movement accuracy, hide during ADS.
3. Build menu systems:
   • Use a UI Manager singleton to control screen stack: Push(screen), Pop(), PopToRoot(). Only the top screen receives input.
   • Main menu: Play, Settings, Credits, Quit. Animate transitions with slide or fade (200–400ms).
   • Pause menu: freeze Time.timeScale = 0 (Unity) or SetGamePaused(true) (UE5). Ensure UI animations use unscaled time.
   • Settings: resolution dropdown, fullscreen toggle, volume sliders, key rebinding. Save to PlayerPrefs (Unity) or GameUserSettings (UE5).
4. Make UI responsive:
   • Set canvas to Scale With Screen Size (Unity) at reference 1920×1080, match 0.5 width/height.

Decision rules

• Prefer UI Toolkit over UGUI for new Unity projects (better performance, CSS-like styling).
• Always use TextMeshPro (Unity) or UMG RichText (UE5) — never legacy Text component.
• Split HUD into separate canvases/widgets by update frequency (health = event-driven, timer = per-second, FPS = per-frame).
• World-space UI must be pooled if >20 instances are possible (damage numbers, nameplates).
• All UI text must go through localization system from day one — never hardcode strings.
• Every interactive element must be reachable by both mouse/touch and gamepad.

Output requirements

1. Screen List — all UI screens with hierarchy (HUD, MainMenu, Pause, Settings, Inventory)
2. Layout Spec — anchoring, reference resolution, safe area handling
3. Widget/Element List — each element with data binding source and update frequency
4. Animation Spec — tween targets, durations, easing curves for transitions
5. Input Map — how each screen handles mouse, gamepad, and touch
6. Accessibility Checklist — colorblind support, text scaling, focus order
7. Performance Budget — target draw calls for UI, max canvas rebuilds per frame

References

• Unity: UI Toolkit (USS/UXML), Canvas, TextMeshPro, EventSystem, DOTween
• UE5: UUserWidget, UWidgetComponent, UMG Animation, CommonUI plugin
• Godot 4: Control, Theme, Container nodes, SceneTreeTween
• Xbox Accessibility Guidelines (XAG), Google Material Design touch targets (48dp min)

Related skills

• game-design-systems — UI displays progression, economy, and loot data
• asset-pipeline — UI sprite atlases and texture optimization
• blueprint-patterns — UE5 widget Blueprints and event binding
• input-mapping-controller — input device detection feeds UI icon swapping

Failure handling

• If UI feels sluggish, profile canvas rebuild frequency (Unity) or widget tick cost (UE5) and split/pool accordingly.
• If layout breaks at extreme aspect ratios, add anchored fallback positions and test 21:9 and 32:9.
• If gamepad navigation skips elements, verify focus order and set explicit navigation targets.
• If draw calls from UI exceed budget, consolidate sprites into atlases and reduce unique materials.