Displaying Player Lives

More UI Elements

Previously we added the player’s score on the screen. Now lets add how many lives the player has at any given moment.

We will be using some sprites for this. In Sprites, UI, Lives, we have 4 life options, no_lives, One, Two and Three.

In order to get the sprites to appear on the screen, we need to create a UI Image object.

Select the Canvas and right-click. Select UI, Image.

Creating a new UI Image object

Select the Image object and in the Inspector under Image, it is asking for a Source Image. Lets drag the Three sprite into this section.

Adding Source Image to Image UI object

The sprite now appears on our canvas. It looks distorted.

To remedy this, activate the Preserve Aspect in the Image object. Lets rename the image object to Lives_Display_Image.

Activating Preserve Aspect on image

Now lets place our image where we want it to go.

Drag the image to the top left corner and lock it. We can set it to specific X and Y positions.

Positioning and locking image on screen

Swapping out the Lives sprites.

Now that the visuals are set in place, lets start working on the scripting. Lets open the UIManager script.

We have 4 sprites that we need to swap out accordingly. In order to do this, we can use a Sprite array. Lets declare a new variable of type Sprite array.

The [] brackets determine the array.

Back in Unity, select the Canvas object and in the UI Manager script there is a Lives Sprites option. this is where we set up our array.

We need an array for 4 different sprites, so set the size to 4.

Setting up the sprite array

We now have Elements 0 to 3. This is where we can drag each of our sprites.

Assigning Sprite Array elements

In order to gain access to the elements in the array, we must first declare a variable of type Image.

Back in Unity, under Canvas in the UIManager script area, we now have a Lives Image slot with None (Image). Drag the Lives_Display_Image from the Hierarchy into this slot.

In the UIManager script we must now create a method that will swap out the images when called upon.

This method is passed an integer value which represents the player’s lives. In an array, we select an item using indexing, which starts at 0. For example, the Three sprite can be called upon _livesSprites[3], which is the fourth position in the array.

It makes sense to call this method each time the player loses a life, so lets go into the Player script.

It is in the Damage method where lives are deducted from the player each time they arehit by an enemy. So, lets call the UpdateLives method after the player has been hit.

Calling UpdateLives method

The player starts out with 3 lives which is the default sprite on our screen. When a life is taken from the player ie lives = 2, this is passed to the UpdateLives method and calls _livesSprites[2] and will display the Two sprite on the screen.

Eventually the no_lives is displayed when the player is dead.

We now have a more functional game which displays our score and our lives on the screen.



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