Adding a Player Health Bar
Creating UI Elements: Slider
Continuing to improve the UI in this article I’ll add a Health Bar, visually representing the Player’s health. Since we already have a health system in place we can do that by introducing a Slider Component and linking our current health to it.
Slider Component
A standard slider that can be moved between a minimum and maximum value.
The slider component is a Selectable that controls a fill, a handle, or both. The fill, when used, spans from the minimum value to the current value while the handle, when used, follow the current value.
The anchors of the fill and handle RectTransforms are driven by the Slider. The fill and handle can be direct children of the GameObject with the Slider, or intermediary RectTransforms can be placed in between for additional control.
Creating a Slider Component
As a child of the Canvas the UI Manager is attached to, create a new Slider UI Component. In our case we just want to visually represent the Player Health and we don’t need an adjustable handle so we can just delete the Handle Slide Area Component. Position and anchor the Health Bar as you like.
I swapped the Image for the Background and for the Fill Image, and set the fill image color to green, you can use any image you like and it works with the default one as well.
For the Fill Image, I’ve set the Image Type to Filled, using the Horizontal Fill Method. This is done to prevent the Fill Image from overlapping the background.
We also have to make a slight adjustment to the Slider Component so that it is not intractable. Quite important because otherwise, even without using a handle, we’d still be able to adjust the values with mouse interaction.
In the UI Manager.cs Script, create two new reference type variables. One to reference the health bar and one to reference the fill area ‘fill Image’.
Then we can assign them in the Inspector;
Connecting the Health Bar with the Player Health
If we were to go in Play mode of course nothing would happen since we haven’t linked our health values to the fill image yet.
In order for the Health Bar to be in sync with the Player Health we need to create two new methods in the UIManager.cs script; one method allowing us to pass the initial health value, and another method to update the current health value.
Initialisation
In the UIManager.cs first we need to indicate the Health Bar what the maximum value for the fill image is. We grab our health bar, set the max. value by accessing it with the keyword .maxValue, and update the health bar value.
In the Start() method in the Player.cs, we already have a method that sets our maximum health at the beginning of the game. All we need to do now is pass that value to the UI Manager.
Updating the Player Health Bar
We also need a method in the UI Manager to update the Health Bar for whenever the current Player health has changed.
In our case (for now), that is when the Players takes damage and when we add health with a Power up. In the Players.cs Script, each time that happens we update the Health Bar by saying;
Adding a Gradient to the Health Bar
You can see that in the preview Image the Health Bar becomes red if the Player Health drops below 20%. That is because we overwrite it with a custom Gradient we set up in the Inspector;
First we need to indicate what the maximum value for the gradient is (relative to a float from 0 to 1) in comparison to the Player Health. We can do that by saying;
To update the gradient we now need to look for the current value in comparison to our health relative to a normalized value.
