Creating a Lives Counter Display in Unity3D

Pete Thomasberger
4 min readMay 30, 2021

Objective: Create a UI display for the current lives count of the Player.

Step 1: Right-click on the Canvas GameObject in the Hierarchy window and select Image within the UI menu. Rename the Image GameObject to Lives_Display_img.

Step 2: Drag and drop the Three Sprite from the Sprites/UI/Lives folder into the Source Image slot in the Image component in the Lives_Display_img Inspector window and check the Preserve Aspect option. In the Scene view, with the Lives_Display_img GameObject selected, drag the image to the desired location within the Canvas boundaries.

Step 3: In the UIManager script, create a private Image type variable called _livesImage, and use [SerializeField].

Save the script, go back to Unity, select the Canvas GameObject in the Hierarchy window, and drag and drop the Lives_Display_img GameObject from the Hierarchy window into the Lives Image slot in the UI Manager (Script) component in the Canvas GameObject’s Inspector window.

Step 4: In the UIManager script, using [SerializeField], create a private array [] variable of type Sprite and call it _livesSprites.

Save the script, go back into Unity, select the Canvas GameObject in the Hierarchy window, and create four array elements in the Lives Sprites section of the UI Manager (Script) component in the Canvas GameObject’s Inspector window. Drag and drop the Three Sprite into the Element 3 slot, the Two Sprite into the Element 2 slot, the One Sprite into the Element 1 slot, and the no_lives Sprite into the Element 0 slot.

Step 5: In the UIManager script, create a public method called UpdateLives() and pass in int currentLives as the argument. Within the UpdateLives() method, write _livesImage.sprite equals the array _livesSprites[], and add the currentLives variable as the value within the array brackets.

This states that when the UpdateLives() method is called, the Sprite image referenced in the _livesImage variable will update to the Sprite in the _LivesSprites array element slot that corresponds to the current number of lives. For example, if the player has two lives, the Sprite in the Element 2 slot will display on the screen, or if the player has one life left, the Sprite in the Element 1 slot will display on the screen.

Step 6: In the Player script, create a private variable of type UIManager called _uiManager. In the Start() method, access the UIManager script component in the Canvas GameObject using GameObject.Find(“Canvas”) and assign it to the _uiManager variable. This will cache the GetComponent statement to preserve resources. Then, null check the UIManager script component.

Within the Damage() method, under the _lives- -; statement, call the UpdateLives() method from the UIManager script, and pass in the _lives variable as the argument.

This will communicate that the currentLives variable in the UpdateLives() method in the UIManager script will equal the _lives variable from the Player script. So, as the value of the _Lives variable is reduced when the Player GameObject collides with the Enemy GameObject, the value of the currentLives variable will reduce and assign the corresponding element in the _livesSprites array.

Save the scripts, go back into Unity, play the scene, and as the Player GameObject takes damage, the Lives display updates accordingly.

--

--