HEX
Server: Apache/2.4.46 (Win64) OpenSSL/1.1.1j PHP/8.4.25
System: Windows NT DESKTOP-4TAV2RJ 10.0 build 19045 (Windows 10) AMD64
User: fred (0)
PHP: 8.4.25
Disabled: NONE
Upload Files
File: C:/Users/fred/.codex/.tmp/plugins/plugins/game-studio/references/three-hud-layout-patterns.md
# 3D HUD Layout Patterns

Use these defaults for initial 3D browser-game scaffolds. The first screen should be playable before it is informational.

## Layout Budget

- Keep the center of the screen clear during normal play.
- On desktop, prefer one primary persistent cluster and one small secondary cluster.
- On mobile, prefer one compact persistent cluster and transient prompts.
- Secondary information belongs in drawers, toggles, pause menus, or contextual popovers.

## Good Default Patterns

### Objective chip

- One short objective in a compact top-corner chip.
- One optional sublabel for location or mode.
- No giant hero banner over the live scene.

### Contextual interaction prompt

- Bottom-center or lower-corner pill.
- Appears only near interactables or during onboarding.
- Dismisses after first use or fades once the player is moving confidently.

### Small status strip

- Health, energy, party count, or beacon progress in a narrow edge-aligned strip.
- Use icons, short labels, and compact meters instead of stacked cards.

### Collapsible journal or quest log

- Closed by default.
- Opened by a hotkey, button, or pause state.
- Holds longer prose, lore, map notes, and multi-step objective details.

### Pause and settings modal

- Explicit modal state.
- Suspends pointer-lock, drag-look, or camera input while active.

## Anti-Patterns

- four to six glass cards permanently framing the viewport
- large lore or field-notes panels open during normal movement
- controls lists permanently pinned to the screen
- symmetric dashboard composition that competes with the scene
- oversized title panels staying visible after the first second of play

## Example UI Budget

- top-left: objective chip
- top-right: compact status strip
- bottom-center: transient interaction or controls hint
- pause menu or drawer: map, notes, inventory, settings

## Prompt Add-On

```text
Default to a low-chrome playable HUD. Keep the central playfield clear. Use one compact objective chip, one small status surface, and transient prompts. Put lore, field notes, full controls, and long checklists behind a drawer or pause menu. Avoid equal-weight boxed panels in every corner.
```