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!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

3 Things I’ve Stop Doing Manually As An Android Developer

Using viewModels with jetpack Compose and navigation-compose

banana

Android Bi-direction Infinite ViewPager 2 Scrolling

Deep Clean Your Android Studio to Fix Weird Issues

Kotlin Coroutines - Job and Timeout

Player lives and respawn

WHY YOU SHOULD THINK TO PUT FLUTTER IN YOUR ARSENAL

FlutterForce — #Week 92

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
GameDev Dustin

GameDev Dustin

More from Medium

Game Dev Blog — Coroutines in Unity

Adding a Main Menu to our UI

3D Survival FPS Game

How To Play Sound Effects In Unity (Creating A Global Sound Manager)