Creating a Lives Counter UI Element in Unity
Health Bars, Health Points, or Lives are all synonyms to one of the most vital elements in video games. This component is what decides how much damage or hit points a character or entity can absorb before dying or getting a KO status. As denoted in the book Level Up!: The Guide to Great Video Game Design, by Scott Rogers:
“health should deplete in an obvious manner, because with every hit, a player is closer to losing their life”
While some games opt for subtle ways to represent damage, designers still prioritize making it obvious in some form another. Traditionally, video games have Health Bars, Health Points, or an image representation of lives.
In the previous article, we created a UI Score System, time to complete the set!
In this article, you will learn how to make a lives counter using sprite images to represent the lives. The images will be swapped through code to signify the number of lives currently available to the player.
The Setup
- Add an image through the same drop-down menu for the UI. It’s best practice to name your images with “_img” at the end to differentiate them from other UI elements.
2. Drag-and-drop your desired sprite image into the Image Source in the Inspector. This image should represent the lives counter when it is full.
3. Anchor the image into the desired position. Mine will be at the top left corner.
4. As you can see here, my image seems to be stretched out. To avoid image warping, make sure to tweak the Preserve Aspect option in the Inspector.
5. In your UI Manager Script, add an array with a SerializeField to store the sprite images. This will allow you to manually add the entire list of sprite images for each number of lives in your Inspector.
Swapping the images
- Create a handle to reference the Image Component in the UI Manager Script, that’s where the image actually is, and we need that to make the swap.
2. Drag the Image from the hierarchy to the newly created image reference.
3. Create a method to handle the current lives counter in the UI Manager Script. This is making use of the array of sprites and the image object.
4. This method needs to be called in the script where the player lives are subtracted. In my case, this is in the player script. Since I already have a reference to my script(as noted in the Score System), I can simply call it when lives are subtracted.
Now, you should have a fully functional lives counter UI!
In my next article, we’ll take a look at how to make a retro Game Over Screen!
