UI: HUD HEARTS, ICONS & PORTRAITS

On-screen display assets for score, lives, keys, and player info

Lesson 13 UI — HUD Elements Unity 2D — Year 9 Kenney Assets
← Asset Guide Hub ← L12 Tilemap Next: L15 Menus →
1
Lives Display — Heart Sprites
Full, half & empty hearts for player lives
▶

Heart Sprite Files

FileLocationUsage
hud_heartFull.pngBase pack/HUD/Full heart — player has this life
hud_heartHalf.pngBase pack/HUD/Half heart — half damage taken
hud_heartEmpty.pngBase pack/HUD/Empty heart — life lost

Set Up Hearts in UI — Step by Step

  1. Import all 3 heart PNGs into Assets/Sprites/HUD/
  2. Right-click Canvas → UI → Image → rename "Heart1"
  3. Inspector → Image component → Source Image → drag hud_heartFull.png
  4. Check "Preserve Aspect Ratio"
  5. Set Width: 40, Height: 40
  6. Duplicate (Ctrl+D) for Heart2, Heart3
  7. Add a parent Panel with Horizontal Layout Group to auto-space the hearts

HUD Layout Preview

┌──────────────────────────────────────────┐ │ [coin] Score: 42 [H] [H] [H] │ │ │ │ (gameplay) │ └──────────────────────────────────────────┘

Lives Display Logic

Lives LeftHeart 1Heart 2Heart 3Result
3 livesheartFullheartFullheartFullFull health
2 livesheartFullheartFullheartEmptyOne hit taken
1 lifeheartFullheartEmptyheartEmptyDanger!
0 livesheartEmptyheartEmptyheartEmptyGAME OVER
💡 How it works in code: Your script changes the Source Image on each Heart's Image component. When the player takes damage, swap hud_heartFull to hud_heartEmpty from right to left.
2
Score Display — Coin Icon
Coin sprite for the score counter
▶

Coin HUD Sprite

FileLocationUsage
hud_coins.pngBase pack/HUD/Coin icon for score counter

Setup

  1. Create a UI → Image on the Canvas and assign hud_coins.png as the Source Image
  2. Place it next to a TextMeshPro text element (your ScoreText)
  3. Anchor both to the top-left of the screen
  4. Set the coin image Width: 32, Height: 32
  5. Use a Horizontal Layout Group parent to keep the icon and text aligned
💡 Anchoring matters! Set the anchor to top-left so the score stays in the corner on any screen size. Select the Image → click the Anchor Presets box (square icon in Rect Transform) → choose top-left.
3
Gem Counter Icons
Multiple gem types for collectible tracking
▶

Gem HUD Sprites

FileLocationUsage
hud_gem_blue.pngBase pack/HUD/Blue gem counter
hud_gem_green.pngBase pack/HUD/Green gem counter
hud_gem_red.pngBase pack/HUD/Red gem counter
hud_gem_yellow.pngBase pack/HUD/Yellow gem counter
💡 Multiple collectible types: If your game has different gem types (e.g. collect 3 blue gems to unlock a door), use these icons next to separate counters. Each gem type can have its own TextMeshPro counter: [blue gem] x2 [red gem] x1
⚠️ Keep it simple! Most Year 9 games only need 1 collectible type. Only add multiple gem counters if your game design requires it — don’t add complexity for the sake of it.
4
Key Inventory Display
Coloured & greyed-out key icons for inventory
▶

Key HUD Sprites

FileLocationState
hud_keyBlue.pngBase pack/HUD/Blue key — collected
hud_keyBlue_disabled.pngBase pack/HUD/Blue key — not collected (greyed out)
hud_keyGreen.pngBase pack/HUD/Green key — collected
hud_keyGreen_disabled.pngBase pack/HUD/Green key — not collected (greyed out)
hud_keyRed.pngBase pack/HUD/Red key — collected
hud_keyRed_disabled.pngBase pack/HUD/Red key — not collected (greyed out)
hud_keyYellow.pngBase pack/HUD/Yellow key — collected
hud_keyYellow_disabled.pngBase pack/HUD/Yellow key — not collected (greyed out)
⚠️ Filename typo alert! The actual Kenney file is named hud_keyGreen_disabled.png but in some versions of the pack it may appear as hud_keyGreem_disabled.png (note the typo: "Greem" instead of "Green"). Check your files and rename if needed!
💡 How key inventory works: Show the disabled (greyed-out) key icons by default. When the player collects a key, swap the Image source to the coloured version! This gives instant visual feedback that the player has picked up the key.

Key Display Setup

  1. Create 3 UI → Image objects on Canvas: KeySlot_Blue, KeySlot_Red, KeySlot_Yellow
  2. Set each Source Image to the disabled (greyed) version by default
  3. Group them in a Panel with Horizontal Layout Group
  4. Anchor to top-right below the hearts
  5. In your pickup script, change keySlotImage.sprite = hud_keyBlue; when the player collects the blue key
5
Player Portraits
Character face icons for player identification
▶

Portrait Sprites

FileLocationUsage
hud_p1.pngBase pack/HUD/Player 1 portrait
hud_p1Alt.pngBase pack/HUD/Player 1 alternative portrait
hud_p2.pngBase pack/HUD/Player 2 portrait
hud_p2Alt.pngBase pack/HUD/Player 2 alternative portrait
hud_p3.pngBase pack/HUD/Player 3 portrait
hud_p3Alt.pngBase pack/HUD/Player 3 alternative portrait

Portrait Setup

  1. Create a UI → Image on Canvas, rename "PlayerPortrait"
  2. Assign hud_p1.png as Source Image
  3. Set Width: 48, Height: 48, check Preserve Aspect Ratio
  4. Anchor to top-left corner
  5. Position it to the left of the coin/score display
💡 Alt portraits: Use the alternative versions (p1Alt, p2Alt, p3Alt) to show damage state, power-up state, or let the player choose their character at a selection screen.
✅ Multiplayer idea: If building a 2-player game, use hud_p1 and hud_p2 to identify which player’s HUD is which — place Player 1’s info on the left and Player 2’s on the right.
6
Number Sprites (Optional)
Arcade-style digit images — alternative to TextMeshPro
▶

Digit & Symbol Sprites

FileLocationUsage
hud_0.pngBase pack/HUD/Digit 0
hud_1.pngBase pack/HUD/Digit 1
hud_2.pngBase pack/HUD/Digit 2
hud_3.pngBase pack/HUD/Digit 3
hud_4.pngBase pack/HUD/Digit 4
hud_5.pngBase pack/HUD/Digit 5
hud_6.pngBase pack/HUD/Digit 6
hud_7.pngBase pack/HUD/Digit 7
hud_8.pngBase pack/HUD/Digit 8
hud_9.pngBase pack/HUD/Digit 9
hud_x.pngBase pack/HUD/Multiply symbol (×)
⚠️ For most students: use TextMeshPro text instead. It is much simpler to update a text string like scoreText.text = "42"; than to swap individual digit images. Number sprites are an optional arcade-style visual upgrade for advanced students.
💡 When to use number sprites: They give a retro arcade look (think classic Mario coin counters). To display "42", you would show hud_4.png next to hud_2.png. The hud_x.png (×) is useful for displays like "×3" for lives remaining.
7
Complete HUD Layout
Putting it all together — full screen overlay
▶

Full HUD Layout Diagram

┌────────────────────────────────────────────────┐ │ [portrait] [coin] Score: 42 [H] [H] [H] │ │ [key][key][key] │ │ │ │ (gameplay) │ │ │ │ Timer: 01:23 │ │ ═══════════════ Health Bar ═══════════════════ │ └────────────────────────────────────────────────┘

Canvas Setup Rules

  1. All HUD sprites are UI Images placed on the Canvas
  2. Canvas Render Mode must be Screen Space — Overlay
  3. Overlay means the HUD floats on top of all gameplay — it never moves with the camera
  4. Use Anchor Presets to pin elements to corners (top-left for score, top-right for hearts)
  5. Group related elements (e.g. hearts, keys) inside Panels with Layout Groups
  6. Set the Canvas Scaler to "Scale With Screen Size" so your HUD looks correct on all monitors
✅ Key concept: Everything in this lesson goes on the Canvas, not in the game world. Canvas UI elements use screen coordinates (pixels), not world coordinates. They stay fixed on screen while the gameplay scrolls behind them.
⛔ Common mistake: Dragging HUD sprites directly into the Scene instead of onto the Canvas. If your hearts/coins appear in the game world and move with the camera, you placed them wrong — they must be children of the Canvas object.
⚠️ Hierarchy structure: Canvas → Panel_TopLeft (portrait + score) → Panel_TopRight (hearts + keys). Keep your Canvas hierarchy organised with named panels so you can find things later!
← Asset Guide Hub ← L12 Tilemap Next: L15 Menus →
Kenney Asset Guide — Year 9 Game On — 2026