Make invisible systems visible. If the player can't see it, it doesn't feel real.
Every game shows you information — health, score, ammo, maps. But how do designers decide what to show and where to put it? Watch how the best HUDs communicate without cluttering the screen:
Secrets of Game Feel and Juice — GMTK (9 min)
Mark Brown breaks down how great games communicate information to players through visual feedback. Pay attention to how games show state changes — health, danger, progress — without pausing the action.
Discussion after watching: Think about your favorite game. What information does the screen show you at all times? What would happen if you removed the health bar? Would you still know when you were in danger? That's the question your HUD needs to answer.
Until now, game state has been invisible (console only). Today we add a HUD — a heads-up display that shows the player what's happening. No new mechanics. Just visibility.
You need: A blank piece of paper, a pencil, and 4–6 sticky notes (or small scraps of paper).
Instructions:
- Draw a large rectangle on the paper — this is your game screen.
- On each sticky note, write ONE piece of information your player needs to see: HP bar? XP counter? Risk meter? Tier? Debt? Active job?
- Place the sticky notes on your "screen" where you think they should go.
- Now play-act: pretend you're a player. Where do your eyes go first? Is anything blocking the action area in the center?
- Rearrange until it feels right. Take a photo — this is your UI mockup.
This is real UI design. Professional designers do exactly this before writing any code. Your paper mockup saves you hours of trial and error. The best HUDs put the most important information where your eyes naturally land — top-left or bottom-center for most players.
Display these values on screen at all times:
- Unbanked XP — what you'll lose if you die
- Banked XP — your safe progress
- Risk Level — how dangerous the current area is
- Current Tier — your progression stage
Color feedback: As risk increases, tint the screen slightly red. When in Camp, apply a slight green tint. The player should feel the difference without reading numbers.
Display these values on screen at all times:
- Karma — your total reputation
- Debt — what you owe
- Current Tier — your development stage
- Active Job — what you're currently building
Color feedback: Negative karma applies a red tint. When a tier increase happens, show a brief gold flash. The player should feel progress and danger visually.
Add a simple HTML overlay for the HUD:
Update the HUD every frame inside your animation loop:
Basic CSS positioning — pin the HUD to the top-left corner:
State changes are immediately visible. The HUD makes the game feel real.
No fancy UI framework. Plain HTML + CSS only. No health bars or complex UI widgets.
HUD blocking the game view — keep it small and positioned in a corner. The game is the focus, not the HUD.
Updating HUD too frequently (performance) — update once per frame in the animation loop, not on every state change.
Not matching HUD values to actual state — if the HUD says one thing and the game does another, trust is broken.
Overdesigning the HUD — plain text is fine. Clarity beats beauty at this stage.
Ask: "Which number feels most important?" Their answer reveals what they think the core of their game is. If they say "XP" instead of "risk level," that's a design conversation worth having.
The paper mockup matters. Don't let them skip the sticky-note activity. Moving physical objects around is faster than moving code around, and it builds spatial awareness about screen layout. If they resist, remind them: every professional game studio does paper prototyping before coding UI.
Watch for scope creep. Kids often want to add health bars, mini-maps, and inventory screens all at once. Redirect: "What's the ONE number the player needs most?" Start there. The HUD can grow later.
Tomorrow: We make wins feel GREAT and losses feel real — visual feedback for events. The HUD shows state; tomorrow we add feeling to state changes.