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.

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];
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tristan Engel

Tristan Engel

18 Followers

Aspiring developer that’s self-learning Unity & C# to transition to a career with Unity. I got a passion for creating interactive experiences.