makepad/skills/makepad-game-ui-designer/references/hud-patterns.md

HUD patterns

Layouts by genre

Racing — speed and gear bottom-right (large, diegetic if there is a dashboard), lap/position top-left, lap-time delta top-centre only while it is changing, minimap or track outline bottom-left, checkpoint countdown centre when under 5 s.

Arena / survival — health bottom-left near the character's screen position, ammo bottom-right, wave and enemies-remaining top-centre, damage direction as arcs around the crosshair, pickup prompts in world space at the object.

Traversal / platformer — minimal. Lives and collectibles top-left, everything else in the world. A platformer with a busy HUD is a platformer whose level design is not carrying the information.

Strategy / sandbox — resources top bar, selection panel bottom, minimap a corner. This is the one genre where a dense HUD is correct.

Flight — attitude indicator and horizon centre, altitude and speed flanking it, target markers in world space.

Placement

Screen centre is for the crosshair and for things the player must not miss. Corners are for ambient state. The rule: the more urgent the information, the closer to where the eye already is.

In an action game the eye is on the player or the crosshair — not on the top-left corner. A health bar that only exists in the corner will be discovered empty. Mirror critical state near the action: a vignette, a crosshair colour shift, a screen-edge pulse.

Anti-patterns

• The stat card. Nine labelled numbers in a rounded panel. This is a debug overlay, and it is the clearest single tell of unfinished UI.
• Permanent tutorial text. Show a prompt when the action becomes available; hide it once used twice.
• Numbers where a shape works. Health: 73/100 is slower to read than a bar.
• Decorative animation. Peripheral motion reads as a threat. Spend it on real events only.
• Thin light text over the world. Invisible against a bright sky exactly when the player is in trouble. Outline, shadow, or a scrim.
• Precise-value obsession. 1247.83 m — nobody reads the decimals at 200 km/h.
• Hover-only information. Does not exist on touch.

Animation timings

Change	Timing
Health/resource drain	~0.2 s ease-out, plus a ghost bar lagging ~0.5 s to show the size of the hit
Score increment	count up over ~0.3 s; never jump
Damage flash	1–2 frames at full, then decay over ~0.15 s
Prompt appear	~0.12 s fade + small rise
Panel transition	~0.2 s; anything slower interrupts play
Critical pulse	~1 Hz, subtle amplitude, only below threshold

Nothing blocking. If the player cannot act during an animation, it is too long.

In-world HUD

draw_billboard_labels and draw_hud_overlay in makepad-game-render::hud; sim-side state in makepad-game-sim::hud; thermometer for gauge-style readouts. Script verbs: text, bar, crosshair, label, label_text.

Billboard labels need distance handling or they become an unreadable pile: fade beyond a range, scale with distance but clamp the minimum, cull occluded ones, and cap how many can show at once. Nameplates that overlap are worse than no nameplates.

Interaction prompts belong at the object (interactable, interact_prompt, InteractSet, InteractAction), not in a corner. The player is looking at the thing.

Damage and feedback

A hit must be unmissable across several channels on the same frame — sight, sound, and motion. One channel alone gets missed during action:

1. HUD bar drop with ghost
2. Screen-edge vignette in the damage direction
3. Camera shake (trauma-based, never in XR)
4. Impact sound
5. Particle burst at the impact point

That combination is what makes a hit feel like a hit; any one of them alone reads as a number changing.

Minimaps

Only if the space is large enough to get lost in. Rotate with the player for first/third-person, keep north-up for strategy. Show only actionable things: objectives, threats, the player. A minimap showing every prop is decoration.