❤️ Lesson 4.3: HUD — Health Bars & Live Data

Anatomy of a HUD

A HUD sits on an Overlay canvas (Lesson 4.1) with each element anchored to a corner so it stays put at any resolution. Here's the layout we're building — a health bar top-left, score top-right, ammo bottom-right:

The score and ammo are just TextMeshPro elements whose .text we update. The interesting part is the health bar, so let's build that properly.

The Filled Image

A health bar is not a special component — it's an ordinary Image with its Image Type set to Filled. In Filled mode, a single float called fillAmount (0 to 1) controls how much of the sprite is shown. Set it to 0.75 and the image draws three-quarters of itself. That's your bar.

Here's the Image component set up as a horizontal health bar in the Inspector:

Set it up in the Inspector: drop a bar sprite into Source Image, tint the Color red, set Image Type ▸ Filled, Fill Method ▸ Horizontal, Fill Origin ▸ Left. Now dragging the Fill Amount slider empties and fills the bar — and that same value is what you'll set from code as image.fillAmount.

Driving the Bar from a Health Event

Here's the temptation to resist: checking the player's health every frame in the HUD's Update. It works, but it couples your UI tightly to the player and does pointless work on frames where nothing changed. In Module 2 you learned a better pattern — events. The health component announces when it changes; the HUD listens.

Recall the event-based health component from Module 2. It fires a C# event whenever health changes, passing the current and max values:

using System;
using UnityEngine;

public class Health : MonoBehaviour
{
    [SerializeField] int maxHealth = 100;
    int current;

    // Fired whenever health changes: (current, max)
    public event Action<int, int> OnHealthChanged;

    void Awake()
    {
        current = maxHealth;
    }

    public void TakeDamage(int amount)
    {
        current = Mathf.Max(current - amount, 0);
        OnHealthChanged?.Invoke(current, maxHealth);   // announce the change
    }

    public void Heal(int amount)
    {
        current = Mathf.Min(current + amount, maxHealth);
        OnHealthChanged?.Invoke(current, maxHealth);
    }
}

The HUD subscribes to that event and updates the bar only when it fires. No per-frame polling:

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class HealthBar : MonoBehaviour
{
    [SerializeField] Health health;      // the player's Health component
    [SerializeField] Image fillImage;    // the Filled Image
    [SerializeField] TMP_Text label;     // optional "75 / 100" text

    void OnEnable()
    {
        health.OnHealthChanged += UpdateBar;
    }

    void OnDisable()
    {
        health.OnHealthChanged -= UpdateBar;   // always unsubscribe!
    }

    void UpdateBar(int current, int max)
    {
        fillImage.fillAmount = (float)current / max;   // 0..1
        if (label != null)
            label.text = $"{current} / {max}";
    }
}

Notice the cast: (float)current / max. Integer division would give you 0 for anything below full health — a classic bug. Cast to float first so 75 / 100 becomes 0.75, not 0.

💡 Why events beat polling. A polling HUD asks "did health change?" 60 times a second forever. An event-driven HUD does nothing until health actually changes, then updates once. It's less work, and — crucially — the Health component doesn't even know the UI exists. You could add a screen-shake or a sound to the same event later without touching Health at all.

Score & Ammo Text

Score and ammo follow the exact same pattern — fire an event when the value changes, update a TMP_Text in the handler. A minimal score display:

using UnityEngine;
using TMPro;

public class ScoreDisplay : MonoBehaviour
{
    [SerializeField] TMP_Text scoreText;
    int score;

    public void AddScore(int amount)
    {
        score += amount;
        scoreText.text = $"SCORE  {score:N0}";   // N0 → 12,450 with a comma
    }
}

The {score:N0} format string inserts thousands separators, so 12450 reads as 12,450. For ammo, a simple $"{clip} / {reserve}" gives you the classic 24 / 120 readout in Figure 1.

Smoothing the Bar with Lerp

Set fillAmount directly and the bar snaps to the new value the instant you take damage. Polished games make the bar glide to its new level over a fraction of a second. The tool is Mathf.Lerp — linear interpolation between two values.

The pattern: the event sets a target fill; Update eases the displayed fill toward that target every frame. This is the one place a small amount of per-frame work is worth it — but only to animate, not to read the source value.

using UnityEngine;
using UnityEngine.UI;

public class SmoothHealthBar : MonoBehaviour
{
    [SerializeField] Health health;
    [SerializeField] Image fillImage;
    [SerializeField] float speed = 4f;     // higher = snappier

    float targetFill = 1f;

    void OnEnable()  => health.OnHealthChanged += SetTarget;
    void OnDisable() => health.OnHealthChanged -= SetTarget;

    void SetTarget(int current, int max)
    {
        targetFill = (float)current / max;   // event just records the goal
    }

    void Update()
    {
        // ease the visible fill toward the target each frame
        fillImage.fillAmount = Mathf.Lerp(
            fillImage.fillAmount, targetFill, speed * Time.deltaTime);
    }
}

Because the third argument is speed * Time.deltaTime, the bar moves a fraction of the remaining distance each frame — fast at first, easing in as it arrives. That gives the smooth, weighty drain players expect from a health bar. Bump speed up for a snappier feel, down for a slower, more dramatic drain.

The full data flow of an event-driven, smoothed HUD:

Figure 3: Damage flows through an event to a target value; only the visual smoothing runs per-frame.

Hands-on Challenge

Summary

🚀 What's Next?

Your HUD is glued to the screen. But some information belongs out in the world — a name floating above an enemy, damage numbers popping off a hit. In Lesson 4.4: World-Space UI — Nameplates & Damage Numbers, the module's mini-project, you'll build world-space canvases that billboard to face the camera and pooled damage numbers that spawn, rise, and fade.