T1-L13 — UI: Score & Health Tutorial

1

Unity UI System (Canvas)

~10 min

+10 XP

▶

Key Vocabulary

Canvas: The container for all UI elements. UI exists on the Canvas, not in the game world.
TextMeshPro (TMP): Unity's advanced text system — better fonts, styling, and performance than legacy Text.
Rect Transform: The UI version of Transform. Uses anchors to position relative to the screen.
Anchor: Where a UI element is "pinned" on screen (top-left, centre, etc.).
Screen Space - Overlay: UI renders on top of everything. Stays fixed on screen regardless of camera.

1.1

What is UI? UI (User Interface) is everything the player sees that's NOT part of the game world — score, health bars, menus, buttons. In Unity, UI lives on a special object called a Canvas.

1.2

Create a Canvas:

Right-click Hierarchy → UI → Canvas
Unity creates a Canvas with an EventSystem (handles clicks)
The Canvas looks HUGE in Scene view — that's normal! It maps to your screen.
In the Canvas Inspector, set Render Mode to Screen Space - Overlay

Screen Space - Overlay means the UI always renders on top and stays fixed on screen, even when the camera moves. Perfect for score and health!

1.3

Install TextMeshPro (TMP): When you first add a TMP element, Unity will ask to Import TMP Essentials. Click it! This gives you much better text than the basic UI Text.

If the popup doesn't appear: Window → TextMeshPro → Import TMP Essential Resources

💡 Scene View Tip: The Canvas is huge in Scene view. Press 2 to switch to 2D view. Double-click the Canvas to zoom to it. Use the Rect Tool (T) to move/resize UI elements.

✓ Checkpoint: I have a Canvas in my scene with Screen Space - Overlay mode.

2

Score Display

~15 min

+10 XP

▶

2.1

Add Score Text:

Right-click the Canvas → UI → Text - TextMeshPro
Rename it "ScoreText"
In the Inspector, set the text to "Score: 0"
Font Size: 36
Color: white or yellow
Alignment: left

2.2

Position with Anchors:

Select ScoreText → click the Anchor Presets square (top-left of Rect Transform)
Hold Alt and click top-left anchor
This pins the score to the top-left corner of the screen
Adjust Pos X/Y to add some padding (e.g. X=20, Y=-20)

Why anchors matter: If someone plays your game on a bigger screen, anchored UI stays in the correct corner. Without anchors, UI drifts to wrong positions on different screens.

2.3

Create a UIManager script: Create a new script called "UIManager". Attach it to the Canvas.

using UnityEngine;
using TMPro;

public class UIManager : MonoBehaviour
{
    public TextMeshProUGUI scoreText;
    public TextMeshProUGUI livesText;

    public void UpdateScore(int score)
    {
        scoreText.text = "Score: " + score;
    }

    public void UpdateLives(int lives)
    {
        livesText.text = "Lives: " + lives;
    }
}

TextMeshProUGUI is the type for UI text. Note the using TMPro; at the top — this is required!

2.4

Connect the Text: Select the Canvas. In the UIManager component, drag your ScoreText into the "Score Text" field.

2.5

Update score from PlayerController: In your PlayerController, update the UI when collecting coins:

// At the top, add a reference
public UIManager uiManager;

// In OnTriggerEnter2D, after score++
uiManager.UpdateScore(score);

Select the Player in Hierarchy. Drag the Canvas (which has UIManager) into the "UI Manager" slot on the PlayerController.

⚠ "TMPro" not found? Make sure you imported TMP Essentials (Window → TextMeshPro → Import). Also check: using TMPro; is at the very top of your script. Use TextMeshProUGUI not Text.

✓ Checkpoint: Score displays on screen and updates when I collect coins!

3

Lives Display

~10 min

+10 XP

▶

3.1

Add Lives Text:

Right-click Canvas → UI → Text - TextMeshPro
Rename to "LivesText"
Text: "Lives: 3"
Font Size: 36, Color: red
Anchor: top-right (hold Alt, click top-right preset)
Pos X: -20, Pos Y: -20

3.2

Connect and update:

Drag LivesText into the UIManager's "Lives Text" field
In your PlayerController, after lives--, add: uiManager.UpdateLives(lives);

3.3

Heart Icons (optional but cool): Instead of "Lives: 3" text, display heart images:

Right-click Canvas → UI → Image
Set Source Image to a heart sprite (import one or use Unity's built-in)
Duplicate 3 times (Ctrl+D) for 3 hearts
Create a Horizontal Layout Group parent to space them evenly
When lives decrease, disable a heart: hearts[i].SetActive(false);

✓ Checkpoint: Lives display on screen and decrease when hitting enemies.

4

Health Bar & Timer

~25 min

+10 XP

▶

4.1

Create a Health Bar: A visual bar that shrinks as health decreases.

Right-click Canvas → UI → Slider
Rename to "HealthBar"
Delete the "Handle Slide Area" child (we don't need it)
Uncheck "Interactable" (player shouldn't click it)
Set Max Value = 100, Value = 100

4.2

Style the Health Bar:

Select Background child → set colour to dark grey
Select Fill Area → Fill → set colour to green
Anchor to top-centre
Resize: Width = 300, Height = 30

4.3

Add to UIManager:

using UnityEngine.UI;  // Add this at the top!

// Add variable
public Slider healthBar;

// Add method
public void UpdateHealth(float health)
{
    healthBar.value = health;
    // Change colour based on health
    Image fill = healthBar.fillRect.GetComponent<Image>();
    if (health > 60) fill.color = Color.green;
    else if (health > 30) fill.color = Color.yellow;
    else fill.color = Color.red;
}

4.4

Add a Timer:

Add a new TMP Text, name it "TimerText", anchor top-centre
Add to UIManager: public TextMeshProUGUI timerText;

// In UIManager
private float timer = 0f;

void Update()
{
    timer += Time.deltaTime;
    int minutes = (int)(timer / 60);
    int seconds = (int)(timer % 60);
    timerText.text = string.Format("{0:00}:{1:00}", minutes, seconds);
}

Time.deltaTime is the time since the last frame. Adding it each frame gives us a real-time clock. Format gives us "00:00" display.

4.5

Connect everything: Select the Canvas. Drag the HealthBar slider and TimerText into the UIManager fields. Test: the timer should count up, and the health bar should respond when you call UpdateHealth.

✓ Checkpoint: My game has Score (top-left), Lives (top-right), Health Bar (top-centre), and Timer.

5

Extension Challenges

~15 min

+10 XP

▶

🏆 Challenge 1: Score Popup — When collecting a coin, instantiate a floating "+1" text that rises and fades. Create a UI Text prefab, animate it with DOTween or coroutines.

🏆 Challenge 2: Health Bar Shake — When taking damage, make the health bar shake briefly. Use transform.DOShakePosition(0.3f, 5f) or manually offset it in a coroutine.

🏆 Challenge 3: Countdown Timer — Instead of counting up, count DOWN from 60. When it hits 0, trigger Game Over. Add urgency by turning the timer red below 10 seconds!

🏆 Challenge 4: High Score — Use PlayerPrefs.SetInt("HighScore", score) to save the high score between game sessions. Display it on screen. This persists even after closing Unity!

🚀 Boss Challenge: Create a complete HUD: Score, Lives (heart icons), Health Bar (colour changing), Timer, High Score, Level Name, and a minimap showing the player's position in the level!

UI: SCORE & HEALTH

Key Vocabulary

Quick Reference

Progress Tracker