How to display Health on the UI in Unity

Create a UI in Unity — using images

Health Display on the UI

Today is an extension of the article of yesterday. We will create an UI image instead of text and use that to display our health.

How to create a UI in Unity

Create an UI Image

Hierarchy > R-Click > UI > Image
Check the Preserve Aspect box to keep the ratio correct if needed.

Make sure to anchor and set the position correctly. Verify by scaling your game screen as always.

Health Display System with Images

We will be using 4 images to display the health from 0 to 3.
1. Create a reference array so we can add our sprites through the inspector:

[SerializeField] Sprite[] _healthSprites;

2. Drag and drop the sprites in order:

3. Create reference to the UI Image object and assign through the Inspector

4. Create a public method in UIManager that assigns the sprite based on health

public void UpdateUIHealth(int currentHealth)
    {
        //assign sprite to image component
        _healthImage.sprite = _healthSprites[currentHealth];
    }