← ALL DOCUMENTS

Ω 19 — HUD (Heads-Up Display)

DOCUMENTS

19 — HUD (Heads-Up Display)

Purpose

This document specifies the complete in-game HUD for Tao Baryon. It defines every element visible during active gameplay — layout, position, visual behavior, animation states, and design rationale. The HUD is the player's instrument panel: it must communicate everything essential without occupying space the player needs for the playfield.

Design Principles

Silence is the default

The HUD is at its best when the player forgets it exists. Every element defaults to its minimal visual state. Elements grow louder only when they carry urgent information. A player in a 10× combo should feel the HUD responding to their play — not cluttered by constant noise.

The playfield is sacred

The central 60% of the screen is enemy territory, bullet space, and player movement space. No HUD element may intrude into this zone permanently. Transient notifications (combo number, pickup flash) may appear here but must resolve in under 2 seconds.

Readability over aesthetics

In dense bullet patterns at depth 200+, the player will be making split-second decisions. HP bar, heat bar, and special charge must be readable with peripheral vision. These three elements are non-negotiable — they are never animated in ways that interfere with reading, never collapsed, never hidden.

Portrait mobile first

Primary target: portrait orientation on a phone screen (360–430px logical width, 780–932px logical height). All layout decisions are made for this viewport first. Tablet and landscape are secondary — the HUD must still function but may rearrange.

Playfield Layout Zones

┌──────────────────────────────────────┐
│  TOP BAR (score, depth, sector)      │  ← ~10% screen height
│                                      │
│                                      │
│         ACTIVE PLAYFIELD             │  ← ~65% screen height
│    (enemies, bullets, player ship)   │
│                                      │
│                                      │
│  CONTROL ZONE                        │  ← ~25% screen height
│  [joystick left]   [heat][spec][fire]│
└──────────────────────────────────────┘

HUD elements occupy the top bar and the edges of the control zone. The active playfield is clear of permanent HUD.

Element Specifications

1. Score Display

Position: Top-left of top bar Size: 20px numeral, DM Mono font Color: --color-text-primary at 90% opacity (slightly dimmed from full white/black) Format: Score displayed with comma separators: 1,247,830

Behavior:

  • Static display — updates in real-time as kills register
  • No animation on score tick (animations would be distracting mid-battle)
  • At 10× multiplier: score numerals shift to lime #c8f542 until multiplier drops

Score pop: When a kill registers, a floating "+[value]" in small text (12px) rises from the kill position in the playfield and fades out over 1.2s. Pop color matches multiplier tier:

  • 1–3×: white
  • 4–6×: amber
  • 7–9×: orange
  • 10×: lime #c8f542

2. Combo Multiplier

Position: Top-center of top bar Size: 26px for the numeral, 14px for the "×" symbol Font: DM Mono, bold weight Color: Matches score pop tier colors above

Behavior:

  • Displays 1.0× at base
  • Increments by 0.1 per kill: 1.1×, 1.2× ... 10.0×
  • At 10.0×: numeral pulses (scale 1.0 → 1.08 → 1.0, 0.5s, once per new kill that sustains it)
  • On reset: brief flash to red, then snaps back to 1.0× white
  • Decay timer: a thin arc below the multiplier numeral depletes over the 3s idle window. Visible only when no kill has landed in the last 1s. Resets on each kill.

Decay arc: 16px radius, drawn as a partial circle clockwise. Full arc = 3 seconds. Depletes smoothly. Color matches current tier. Disappears instantly on kill.

3. Sector / Stage Indicator

Position: Top-right of top bar Size: 11px, DM Sans regular Color: --color-text-secondary (muted) Format: S4 · Stage 22 or Endless · Depth 147

Behavior:

  • Static. No animation.
  • In endless mode: depth counter updates live

4. HP Bar

Position: Bottom-left of control zone, horizontal bar above joystick Size: Width = joystick zone width (~140px), Height = 8px Border radius: 4px Colors:

  • Fill: #4CAF50 (green) above 60% HP
  • Fill: #FF9800 (amber) at 30–60% HP
  • Fill: #F44336 (red) below 30% HP
  • Track (empty): --color-border-tertiary
  • Border: 0.5px --color-border-secondary

Behavior:

  • Smooth fill transition on HP change (200ms ease-out)
  • On damage: bar flashes white for 1 frame, then transitions to new value
  • Below 25% HP: bar pulses (opacity 1.0 → 0.7 → 1.0, 1.5s cycle) to draw attention
  • Above bar in small text (10px): current HP value [75 / 100] — only visible below 50% HP

Shield overlay: If the ship has an active shield charge, a thin bright rim appears outside the HP bar border. Color: white-blue. Disappears when shield is consumed.

5. Heat Bar

Position: Bottom-right of control zone, horizontal bar directly above the FIRE button Size: Width = right control zone width (~130px), Height = 8px Border radius: 4px Label: "HEAT" in 9px DM Mono above-left of bar

Colors by heat level:

  • 0–50%: #42A5F5 (cool blue) — safe zone
  • 50–75%: #FFA726 (amber) — caution
  • 75–90%: #FF7043 (deep orange) — warning
  • 90–100%: #F44336 (red) — critical
  • Locked (100%): bar flashes red-white alternating at 3Hz until heat decays to 80%

Behavior:

  • Fill transitions smoothly (no jump — continuous animation matching actual heat value)
  • At 90%+: bar gains a subtle pulse to signal danger
  • On lock: FIRE button visual dims and gains a padlock icon overlay (small, 12px)
  • On unlock (decay to 80%): brief green flash on bar + padlock disappears

6. Special Charge Meter

Position: Bottom-right, between heat bar and fire button — or as a circular arc around the SPECIAL button Implementation: Circular arc meter (270° sweep) centered on the SPECIAL button icon

Size: SPECIAL button = 48px diameter. Arc radius = 30px from center. Colors:

  • Empty: --color-border-tertiary (invisible/structural)
  • Filling: lime #c8f542 arc sweeping clockwise from top
  • Full: arc completes + SPECIAL button brightens + subtle pulse (scale 1.0 → 1.05 → 1.0, 0.8s, once)

Behavior:

  • Fills continuously as damage is dealt
  • At full charge: SPECIAL button label changes color to lime and a small icon animation plays
  • On use: arc resets to 0 with a brief burst flash
  • Partially charged: arc shows exact progress without animation — static fill, no pulse

7. Fire Button

Position: Bottom-right corner, thumb-reachable zone Size: 64px diameter Label: Flame icon (Tabler ti-flame, 24px) centered Border: 1.5px --color-border-secondary

States:

  • Default: semi-transparent background (--color-background-secondary at 70% opacity)
  • Pressed (hold): background lightens, icon brightens
  • Overheated: background dims, padlock overlay as described in heat bar

8. Special Button

Position: Bottom-right, above and slightly left of FIRE button Size: 52px diameter Label: Lightning icon (Tabler ti-bolt, 20px) Arc: As described in Special Charge Meter above

States:

  • Charging (0–99%): dimmed, icon gray
  • Ready (100%): icon lime #c8f542, button brightens, subtle pulse
  • Just used: flash white, then resets to charging state

9. Virtual Joystick

Position: Bottom-left, thumb-reachable zone Size: Base = 90px diameter circle; stick nub = 36px diameter Visual: Semi-transparent base ring (border only, no fill), solid nub

Colors:

  • Base ring: --color-border-secondary at 50% opacity
  • Stick nub: white at 80% opacity
  • Active (moving): nub brightens to 100%, base ring brightens

Behavior:

  • Dynamic joystick (base repositions on touch-down location)
  • Nub returns to center smoothly on release (200ms ease-out)
  • No dead-zone indicator shown — dead-zone is ±4% and transparent to the player

10. Boss HP Bar

Position: Top of screen, full width, below top bar — appears only during boss encounters Size: Full width, 10px height Colors:

  • Fill: magenta-gold gradient (Telos identity colors)
  • Track: --color-border-tertiary
  • Phase markers: vertical white tick marks at 70% and 40% (boss phase thresholds)

Behavior:

  • Slides down from the top bar on boss encounter entry (300ms ease-in-out)
  • Phase markers remain even as HP depletes past them — visual history
  • On phase transition: bar briefly flashes white, phase marker for the passed threshold turns red
  • On boss death: bar drains to zero with a 1.5s sweep animation, then slides back up

Boss name label: Above the bar, centered, 12px DM Sans, --color-text-secondary. Example: Architect-Saint Halen. Fades in with the bar.

11. Pickup Indicators

When a pickup spawns or is collected:

Spawn: Pickup floats in playfield, subtle pulsing glow matching pickup type color Magnet pull: Line of light particles from pickup to ship when within magnet radius Collect: Brief burst flash at ship position, small floating text ("+HP", "+SHIELD", "+SPECIAL") rises and fades over 1.0s

Pickup types and colors:

  • HP restore: green #66BB6A
  • Shield charge: blue-white #90CAF9
  • Special charge boost: lime #c8f542
  • Credit drop: amber #FFB300

12. Enemy Proximity Warning

When a Kamikaze-class enemy is on a direct collision course and within 80px of the player:

  • Brief directional arrow indicator at the edge of the playfield pointing toward the threat
  • Arrow: red, 20px, Tabler ti-arrow-up rotated to source direction
  • Duration: displayed as long as the threat is on the collision course
  • Not displayed for bullets (too many) — only for Kamikaze-class units

13. Achievement Toast

Position: Bottom edge of playfield, centered (above the control zone) Size: Width = 80% of screen, Height = 40px Border-radius: --border-radius-md Background: --color-background-secondary at 95% opacity

Layout: Left accent strip (4px, tier color) | Tier icon (12px) | Achievement name (13px DM Sans medium) | Category (11px muted)

Animation:

  • Entry: slide up from bottom edge over 300ms ease-out
  • Exit: slide back down after 4 seconds (Platinum: 6 seconds)
  • Never blocks control zone (positioned above it)

14. Stage Intel Briefing (Pre-Stage)

Before each stage, a 5-second overlay:

Layout: Dark overlay (80% opacity) over the previous hub screen, centered card Card contents:

  • Sira-Vel callsign + small portrait icon (Tabler ti-user-circle)
  • Stage identifier: "Stage 22 — Ergosphere" in 15px DM Sans medium
  • Brief 1–2 line flavor text from Sira-Vel (authored per stage, pulled from stage data)
  • "Recommended Rank: 28" in 11px muted
  • TAP TO BEGIN prompt (12px, --color-text-secondary, slow pulse)

Behavior:

  • Auto-dismisses after 5 seconds
  • Tap anywhere to dismiss immediately
  • Cannot be dismissed in the first 1.5 seconds (prevents accidental instant-start)

15. Stage Clear Screen

Appears after the last enemy is destroyed. Transition: playfield fades to dark over 0.8s, clear screen fades in.

Layout (top to bottom):

  1. Stage name centered, 18px DM Sans medium
  2. "Stage Cleared" in lime #c8f542, 22px, DM Mono
  3. Score tally: animated count-up from 0 to final score over 1.5s
  4. Reward row: credits earned (animated), XP earned (animated), blueprint shards (if any)
  5. Bonus row: no-damage bonus (if earned) — "Perfect" badge in gold
  6. "RETURN TO STATION" button (primary) | "REPLAY" button (secondary)

Transition to hub: Button tap → brief white flash → hub screen fades in

Animation Budget

For 60fps performance on target hardware:

Element Max simultaneous instances Priority
Score pop floaters 6 Low
Combo decay arc 1 High
HP bar pulse 1 High
Heat bar pulse 1 High
Special charge arc 1 High
Pickup magnet particles 8 Medium
Achievement toast 1 Medium
Boss HP bar 1 High

Rule: If the frame budget is tight (detected via frame time monitoring), score pops are culled first. HP, heat, and special charge animations are never culled — they are safety-critical to the player.

Dark / Light Mode

The HUD uses CSS variables throughout — it automatically adapts to the device's dark/light mode preference. Both modes must be validated in QA. Specific notes:

  • In light mode: playfield background is lighter, so HUD element opacity must be sufficient to remain readable against a light background. Test specifically on light mode, which is harder on contrast.
  • Lime #c8f542 is used as-is in both modes — it reads on both dark and light backgrounds.

Summary — Locked Decisions

  1. 3-zone layout: Top bar (score/combo/sector), active playfield (clear), control zone (HP/heat/special/joystick/buttons)
  2. Score + combo in top bar — DM Mono, lime at 10×, decay arc on combo idle
  3. HP bar left, heat bar right — both 8px, color-coded by value, never hidden
  4. Special charge as arc around the SPECIAL button — lime #c8f542 fill
  5. Boss HP bar full-width, slides down from top, phase markers at 70%/40%
  6. Dynamic joystick — repositions on touch-down, semi-transparent, no fill
  7. Score pops — floating "+value" from kill position, tier-colored, 1.2s fade
  8. Achievement toasts above control zone, 4s/6s duration, never mid-playfield
  9. Stage intel briefing 5-second pre-stage overlay, tap-to-dismiss after 1.5s
  10. Stage clear screen with animated count-up tallies, bonus badge, two action buttons
  11. Animation budget enforced — score pops cull first; HP/heat/special never culled

Document version: 1.0 (locked) Part of: Tao Baryon GDD — Tier 4 UX & Meta

PREVIOUS ← 18 — Codex System NEXT 20 — Menus, Hub, Hangar & Shop →