79 added, 40 removed. Audit A to A.
---
name: game-ui
group: Craft
description: >-
Design HUDs, menus and diegetic interfaces with controller navigation and readability at TV
distance. Use when designing HUDs, inventory menus, or controller-first interfaces.
---
- # Game UI
- Design HUDs, menus and diegetic interfaces with controller navigation and readability at TV distance..
+ # game-ui
- ## Process
+ ## Core Philosophy
+ User Interface (UI) design for video games is fundamentally different from web or SaaS design. Game UI exists in service of immersion, situational awareness, and gameplay flow. A cluttered, opaque web-style dashboard pasted over a 3D game world shatters immersion. Game UI requires strict classification across diegetic and non-diegetic layers, controller-first spatial navigation (the 10-foot television rule), rapid glanceability during high-stress combat, and responsive resolution scaling.
- 1. **Intake & Scope Definition**
- - Identify specific objectives, inputs, constraints, and operational context.
- - Inspect existing project documentation, configurations, or relevant repository assets.
+ ---
- 2. **Analysis & Strategic Formulation**
- - Evaluate options against best practices, security posture, and domain requirements.
- - Deconstruct complex components into discrete, actionable phases.
+ ## 4-Step Game UI & HUD Architecture
- 3. **Execution & Synthesis**
- - Produce structured, production-grade deliverables matching the required format.
- - Ground all recommendations in concrete project evidence rather than abstract generalities.
+ ### Step 1: The 4 Interface Immersion Layers
+ 1. **UI Layer Classification**:
+ - *Diegetic UI*: Exists inside the physical 3D game world and is experienced by the character (e.g. Dead Space holographic health spine, Pip-Boy wrist computer, physical map held in character hands).
+ - *Non-Diegetic UI*: Traditional 2D screen overlay completely invisible to the character (e.g. Health bar at top-left, floating minimap, pause menu).
+ - *Spatial UI*: UI elements positioned in the 3D world but invisible to the character (e.g. floating waypoint markers over mission objectives, player name tags).
+ - *Meta UI*: Visual effects representing character state on screen (e.g. blood splatters on screen when injured, water droplets on camera lens).
- 4. **Review & Refinement**
- - Validate against the verification checklist and domain edge cases.
- - Highlight open questions, explicit trade-offs, and next milestones.
+ ### Step 2: The 10-Foot Television Rule & TV Safe Zones
+ 1. **Console & TV Legibility (The 10-Foot Rule)**:
+ - A player sitting 10 feet away from a 55-inch television cannot read 12pt web fonts.
+ - *Minimum Font Sizing*: Body text must be **at least 24pt to 28pt** on a 1080p canvas (scaled up proportionally for 4K).
+ 2. **Action Safe & Title Safe Margins**:
+ - Television bezels crop screen edges (overscan). Keep all critical HUD elements (health, ammo, minimap) within the **Title Safe Zone** (minimum **10% margin** from screen edges).
- ## Deliverable & Output Format
+ ### Step 3: Controller-First Spatial Navigation
+ 1. **Deterministic D-Pad / Thumbstick Focus**:
+ - Gamepad navigation does not have a mouse cursor. Moving the analog stick must jump focus deterministically to the next spatial neighbor.
+ 2. **Visual Focus Feedback**:
+ - The currently focused menu item must be unmistakably obvious: high-contrast outline border, subtle scale-up (1.05x), and distinct audio navigation clicks.
+ 3. **Dedicated Gamepad Button Legends**:
+ - Always display controller button prompts on screen matching the active hardware (e.g. `(A) Select`, `(B) Back`, `(X) Reload`). Automatically swap prompt icons between Xbox, PlayStation, and Keyboard when input devices switch.
- ### 📋 Executive Summary
- - **Objective:** Key goal addressed
- - **Status:** Complete / Action Required
- - **Primary Recommendation:** Core actionable conclusion
+ ### Step 4: Combat Glanceability & HUD Hierarchy
+ 1. **The F-Pattern Combat Glance**:
+ - In high-speed combat, players have $< 100text{ms}$ to check vital signs.
+ - Anchor vital telemetry (Health, Shield, Primary Ammo) close to the screen periphery or clustered near the center reticle.
+ - Use high-contrast color coding: Green/Blue (Shields), Red (Low Health), Flashing Amber (Low Ammo).
- ### 🛠️ Detailed Implementation / Analysis
- - Concrete technical, operational, or strategic specifications.
- - Clear code, configuration, or documentation blocks where applicable.
+ ---
- ### 📌 Decisions & Next Steps
- - [ ] Immediate action items with designated owners.
- - [ ] Required dependencies or prerequisite milestones.
+ ## Deliverable Format: Game UI / HUD Specification (`GAME-UI-SPEC.md`)
- ## Instructions & Operating Rules
+ ```markdown
+ # Game Interface & HUD Specification: [Game Title]
- - Lead directly with actionable findings and structured results.
- - Never introduce speculative abstractions or unrequested complexity.
- - Maintain consistency with existing architecture and naming conventions.
- - Provide explicit rationales for non-obvious trade-offs.
+ ## 1. UI Layer Taxonomy & Immersion Strategy
+ - **Combat HUD**: Non-Diegetic minimalist HUD (Fades out when out of combat)
+ - **Inventory System**: Spatial Diegetic backpack inspection
+ - **World Waypoints**: Spatial floating 3D markers with distance meters
- ## Verification & Quality Checklist
+ ## 2. Television Safe Zones & Resolution Scaling
+ - **Reference Canvas**: 1920x1080 (Scales dynamically via UI Canvas Scaler to 4K)
+ - **Title Safe Margin**: 10% inset (96px horizontal, 54px vertical)
+ - **Minimum Body Typography**: 26pt bold font
+ - **Color Contrast**: All HUD text uses 2px dark drop shadow (`rgba(0,0,0,0.85)`) to ensure legibility against bright skyboxes.
- - [ ] Deliverable directly satisfies all stated user requirements and criteria.
- - [ ] Edge cases, boundary conditions, and error states are addressed.
- - [ ] Output contains zero placeholder tokens, broken references, or unverified claims.
- - [ ] All cross-references and formatting comply with repository conventions.
+ ## 3. Controller Navigation Map (Main Menu / Inventory)
+ | Input Button | Action Triggered | Visual Feedback | Audio Cue |
+ |---|---|---|---|
+ | D-Pad Up / Down | Jump focus to neighbor | 1.05x scale + 2px gold border | `ui_focus_move.wav` |
+ | Face Button South (A / Cross) | Select / Confirm | Button depress + white flash | `ui_select_confirm.wav` |
+ | Face Button East (B / Circle) | Back / Close Menu | Instant screen pop | `ui_cancel_back.wav` |
+ | Left Trigger / Right Trigger | Switch inventory tabs | Sliding tab indicator | `ui_tab_switch.wav` |
- ## Anti-Patterns & Constraints
+ ## 4. Combat HUD Glancing Layout
+ - **Top-Left**: Player Level & Team Health Bars
+ - **Bottom-Right**: Active Weapon Silhouette, Magazine Counter (Huge 48pt text), Grenade icons
+ - **Bottom-Center**: Ultimate Ability readiness ring (Glows when 100% charged)
+ ```
- - **NEVER** output generic boilerplate without grounding in specific project inputs.
- - **NEVER** silently omit unresolved contradictions or unverified assumptions.
- - **NEVER** make unrequested modifications outside the stated deliverable boundary.
+ ---
+
+ ## Worked Example: Fixing Tiny Text in a Console Port
+
+ - **Problem**: PC game was ported to Steam Deck and Xbox; playtesters complained they could not read weapon stats or inventory descriptions.
+ - **Remediation**: Implemented a responsive UI scaling mode for handheld/TV screens. Increased minimum body text from 14pt to 26pt; added a high-contrast dark backing card behind weapon comparison tooltips.
+ - **Outcome**: Steam Deck verified status achieved; zero negative reviews regarding text legibility.
+
+ ---
+
+ ## Verification Checklist
+
+ - [ ] All critical HUD telemetry placed within the 10% Title Safe boundary.
+ - [ ] Typography adheres to the 10-foot rule (minimum 24pt+ on 1080p).
+ - [ ] Gamepad navigation supports deterministic D-pad focus hopping with clear visual selection state.
+ - [ ] Button prompts dynamically update when switching between Xbox, PlayStation, and Keyboard.
+ - [ ] HUD text includes drop shadows or backings to remain readable against bright 3D backgrounds.
+
+ ---
+
+ ## Anti-Patterns
+
+ - **Microscopic PC Text on TV**: Forcing console players to squint at 11pt inventory text.
+ - **Mouse-Only Menu Design**: Requiring console players to drag an artificial virtual mouse cursor with an analog stick.
+ - **HUD Clutter**: Covering 60% of the game screen with static meters, blocking the player's view of the game world.