Creating a UI Shield Strength indicator

We’re going to be adding a new indicator to our UI.
We’ll modify the player shield to take more than one hit.

Our shield tracker on the UI will let the player know how much shield strength they have remaining.

The first thing we need to do is create an empty game object on our Canvas game object, and rename it to “ShieldStrength” or something similar.

Then we’ll add 2 child game objects to this game object, “Shield_img” and “ShieldStrength_text”.

Next we’ll assign our Shield sprite to the Shield_img game object.

Set the alignment to the Geometry center and vertical middle alignment.

We’ll default the text to 3, as that will be the full shield value.

I intend to keep this UI element hidden while the player has no shields and reveal it when they do and until they lose them again.

Next, I’ve resized the ShieldStrength_text game object itself to properly center as a child object of the ShieldStrength game object.

Now we resize the Shield_img game object to be more similar in size to our player lives images on the player screen.

For me, that was a width and height of 75.

To make the ShieldStrength_text more visible on top of the shield image, I added an outline to the shader and played with the color and thickness until I was happy.

Looks good to me.

Now, let’s disable our ShieldStrength game object.
This is equivalent to ShieldStrength.SetActive(false);

Updating our Player script

Let’s add _shieldStrengthGO, _shieldStrengthTextGO and _shieldPower variables to our player script.

Back in the Unity editor let’s go ahead and assign our ShieldStrength and ShieldStrengthText game objects to the player script variable.

I needed to add a null check for _shieldStrengthGO in my Start() method but the sheer quantity of null checks was getting out of hand, so I created a method to do this.

The Start() method of our player script should now look like the above.

We’ll add a new method to deactivate our player shield as well as the shield power indicator as well.

Let’s not forget to update our ShieldActive() method as shown above.

Lastly, we update our LoseLife() method to take into account shield power, decrement as necessary, and call ShieldDeactivate() when appropriate.

Run the game and test it out!