2D Galaxy Shooter — Lives System

Hello all!

Today, I will go over how to add a lives system to the UI I made in my last article!

Lives display at the top left

Adding an Image to the UI

1. Find a good set of .PNG images that look similar to the .GIF above. You will need one for 3, 2, 1, and 0 lives. Add them to your assets folder under a folder named “Lives”.
2. Much like adding Score.text: under UI, add an Image, make it a child of the Canvas, and rename it “Lives_Display_img”.
3. Select the Lives_Display_img and look at the inspector.
4. Under the Image component, drag the “3 lives” image you found to where it says “Source Image”, then check the “Preserve Aspect” button. This will always keep the ratio of the original image.
5. Find a good place at the top-left for your lives.
6. Anchor it to the top-left.

Lives Behavior in the UIManager Script

Here, we will call the 4 images you have when lives decrease.

1. Open the UIManager script.
2. Add variables —
   [SerializeField] private Sprite[] _livesSprites;
   [SerializeField] private Image _livesImg;
3. Head back to Unity, select Canvas, and look at the script component.
4. There, you’ll see new fields: “Lives Sprites” and “Live Img”
5. Click the drop down arrow on Lives Sprites and make the size, 4.
6. Make Element 3 the 3 lives sprite, then 2 the 2 lives sprite, and so on.
7. Drag “Lives_Display_img” to where it says “Lives Img”.
8. Head back to the UIManager script and add a new method:

9. Open the Player script, and head to the Damage() method.

10. Right under where we subtract the lives, add this:

This means that when Damage() is called, it will take a life away, then tell the UIManager how many lives we have left. Say we have 1 life remaining, then _lives would = 1 which makes UpdateLives(1), so that will call Element 1 in our array which will display 1 life!

That was how to make a working Lives System in our UI! Next, I will add a Game Over mechanic that flickers on death!

Thank you for your time!