Nerd For Tech
Published in

Nerd For Tech

Visualizing the player health

How many hits can I take before it’s over?

We now have our fully working Score system. The first part of the UI is done! Great! Now let’s take on the second part of the UI, the player lives!

Creating the UI element
We start with the same procedure from the score text box, we create the UI element!

  • Right-click the Canvas in the Hierarchy > UI > Image

Doing so will present you this white square:
Don’t worry! This is normal as we haven’t provided Unity any information about the image yet. The square is simply a placeholder.

The just created Image component!

Move it around to a place you think is fitting! I will place it in the top left corner.

Assigning a target image
In order to show an actual sprite instead of the white box, we simply need to provide an Source Image for Unity to show and display. Simply drag a file from the Project view into the “Source Image” area in the Inspector. Which image you choose does not matter.

Assign a source image file

Fixing the weird look of the image
You might have noticed that the image does look weird and pressed together. That’s because the image is filling up the whole space of the Image GameObject. To fix this, just click the checkbox “Preserve Aspect” inside the Image component in the Inspector.

  • Click on lives_img > Look out for the Image component in the Inspector > Check Preserve Aspect
Fix the aspect ratio of the target image!

Don’t forget to change the pivot point to top-left to avoid a wrong position of the lives display on other screens which might be different from yours!

Making it work with code!
Having done all of that we now have the indicator in our game. However, the image is just static and does not represent the actual lives the player still has available. To fix this, we need to implement the logic through code.
Let’s begin by declaring our variables!

  • We need a reference to the Image component in order to swap the sprites to represent the current lives. Therefore, we need a variable of type Image.
  • We can have four states of lives. Three, Two, One and None. Therefore, we need more than just one sprite. We can easily solve that with an Array of type Sprite.
  • For a more tidy script in the Inspector, let’s add an Header.

Here’s the code of what you just read:

We need a function to switch out the sprites to represent the current lives.

  • Create a new public function which requires to pass back a variable returning the current amount of lives
  • We want to update the sprite of the Image according to the current lives of the player. The corresponding sprites are stored within the array we just created. Let’s access the index of it to show the right sprite!
  • To notify the player that just one life is left in a subtle way, we can change the color of the Image.

The current lives are stored inside the Player.cs script. As the UIManager needs this information, we have to create a handle to the UIManager inside the Player script.

  • Create the variable of type UIManager
  • Find the component and access the UIManager script
  • Do not forget to null-check!

Remember that we created a public function on the UIManager script? We have the function but it doesn’t know how when exactly it has to updatethe sprites representing the lives.

  • Call the _uiManager.UpdateLives() method inside the Damage funvtion of the player, and give over the _lives variable
  • Depending on the sprite you chose before at assigning the target image, we should call this function in void Start() as well. This will make sure the sprite will get updated to three lives at the very beginning of the game, regardless of the chosen sprite.
    If you are not doing this and you chose the “One” or “Two” sprite as source image, this will happen when you start the game:

If all of this is done, the Damage() method of the Player.cs will look like this:

That’s it! The live visualization is working as intended now and the player knows how many hits the ship can still take before its “Game Over!” time!

Next up will be the Game Over notification. Stay tuned!

--

--

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
Timo Schmid

Timo Schmid

46 Followers

The mission? Becoming a game developer! RPG is the dream! Writing down my journey here for me and for everyone interested. Thanks for showing interest :)