Build Game UI UX

Architect and implement resolution-independent game HUDs, menu stacks, and interactive overlays that support ultrawide and mobile aspect ratios, safe-area cutouts, and seamless gamepad/keyboard focus navigation.

Core Rules

• Event-Driven UI Decoupling: Never poll gameplay entities inside UI Update() loops. Bind HUD widgets (health bars, ammo counters, cooldown radials, quest trackers) to explicit gameplay events or observable view-models so UI only redraws when state changes.
• Resolution & Safe-Area Conformance: Configure reference canvas scaling (e.g. $1920\times 1080$ or $2560\times 1440$ with expand/match width-or-height modes), 9-slice border sprites, and dynamic safe-area insets (Screen.safeArea, title-safe margins) across $16:9$, $21:9$, $32:9$, and notched mobile viewports.
• Unbroken Focus Navigation Loops: Every interactive screen must assign an explicit default focused element on open, maintain deterministic 4-way directional navigation (Up, Down, Left, Right), and restore focus to the invoking control when modal popups close.
• Contract Adherence: Emit contracts/schemas/implementation-result.json upon completing game UI/UX implementations.

Suggested Process

1. Canvas Hierarchy, Anchors & Safe-Area Layout

Structure UI into layered sorting canvases (WorldSpaceIndicators, GameplayHUD, ModalMenus, SystemNotifications, TransitionOverlay). Pin HUD corners to a Safe-Area container node and use 9-slice sprite borders so panels scale cleanly without distorting corners.

2. Focus Graph & Multi-Device Navigation

Configure explicit focus neighbors for buttons, sliders, and scrollable inventory grids. Ensure opening any menu immediately calls GrabFocus() / Select() on the primary action button and blocks pointer-hover theft when operating in gamepad mode.