Hello everyone,

Just thought I’d share a quick and easy way of improving a basic health bar in unity, lets get started!

So here is what we are going to make :

We will first start with making the health bar then we will head to the code, but first of all how does this work? well the answer is pretty simple you just have two sliders (or health bars) instead of one, one will be the “real” health bar that is going to have a darker color and the other is going to have a brighter color, which I like to call the “Pre fill”, note the way I set this up is to create the other slider by code so it doesn’t clutter the editor.

Lets start with how to set this up step by step:

We first make a Slider through Create -> UI -> Slider

Then we delete the “Handle Slide Area” child object of the slider because we don’t need it

After that you can resize the slider to how ever you like it to be (Don’t forget to change colors!)

BUT you have to make sure that when you change the slider value it goes through the whole health bar, what I like to do is go the the “Fill” object and change the “Right” value to 0 then go to the fill area and alt tab the anchor to be stretched left to right

Then we just have to duplicate the “Fill” object (or copy and paste it) and place it above the “Fill” Object, and rename it like Prefill.

by the time you are done your Slider will look something like this

Now we move to the code:

The Script will be placed in the main Slider object.

I named it Healthbar.cs , you can go with any name you want.

I like to start coding by adding all the using statements I am going to need, we only need UnityEngine.UI here so :

using UnityEngine.UI;

Then inside the class we are going to have a couple of variables

//slider refrence for the health slider

private Slider HealthSlider; //slider refrence for the prefill slider which is the color that is behind the health bar

private Slider HealthPrefillSlider; //a refrence to an image that will be used to show the prefill, the iage transform should be exactly like the healthbar slider fill transform

//and preferably have the same parent

[SerializeField]

private Image HealthPrefill; //some customization on the pre fill //this is the color that would appear when health increases

[SerializeField]

private Color PrefillIncreaseColor; //this is the color that would appear when health decreases

[SerializeField]

private Color PrefillLossColor; //this is the main health value, the one which should be refrenced from other scripts and changed in runtime

public float Health; private float MaximumHealth = 100; //these 2 variables to help with rendering prefill by being able to edit it and not change the player health

private float HealthDisplay; private float PrefillHealth; //this is how fast the prefill moves

public float PrefillSpeed;

And that is it for the variables, in the start method we are going to have to do some initialization for both the sliders, note that the initialization of the first slider can be done in the editor but I like to do it in code so that when I need to make another healthbar I don’t need to remember it’s configuration.

//gets a refrence to the health slider

HealthSlider = GetComponent();

//this is not necessary but I prefer to do it so that I don’t forget to edit things like the max value in the editor

HealthSlider.minValue = 0.0f;

HealthSlider.maxValue = 100.0f;

HealthSlider.wholeNumbers = false;

HealthSlider.value = HealthSlider.maxValue; //makes a new object to hold the prefill slider and sets the parent to this object, because unity doesn’t allow 2 sliders to be in one object

GameObject PrefillHandler = new GameObject(“Prefill Slider”);

PrefillHandler.transform.parent = gameObject.transform; //add the prefill slider

HealthPrefillSlider = PrefillHandler.AddComponent();

//set the prefill image to be a target fill rect

HealthPrefillSlider.fillRect = HealthPrefill.gameObject.GetComponent(); HealthPrefillSlider.minValue = 0.0f;

HealthPrefillSlider.maxValue = 100.0f;

HealthPrefillSlider.wholeNumbers = false;

HealthPrefillSlider.value = HealthSlider.value; //initilized health at start to be the maximum – this is only for testing

Health = MaximumHealth; PrefillHealth = Health;

HealthDisplay = Health;

//sets starting color to be the increase color/ this won’t make any diffrence because it will change in the update but I prefer doing it

HealthPrefill.color = PrefillIncreaseColor;

And that is it for the Start method now to the final piece of code, the Update method!

//if the player gained health

if (Health > HealthDisplay)

{

//increase the PrefillHealth immediately

PrefillHealth = Health;

//and learp the HealthDisplay pre fill

HealthDisplay += PrefillSpeed * Time.deltaTime;

//also set the color of the prefill

HealthPrefill.color = PrefillIncreaseColor;

}

//if the player lost health

else if (Health < PrefillHealth)

{

//increase the HealthDisplay immediately

HealthDisplay = Health;

//and learp the PrefillHealth pre fill

PrefillHealth -= PrefillSpeed * Time.deltaTime;

//also set the color of the prefill

HealthPrefill.color = PrefillLossColor;

} //update the sliders

HealthSlider.value = (HealthDisplay / MaximumHealth) * 100.0f;

HealthPrefillSlider.value = (PrefillHealth / MaximumHealth) * 100.0f;

Here is a link to the full code.

And that is it for the code and for everything, just don’t forget to refrence the Prefill object in the editor

Now you can test it by changing the Health value in the inspector in PlayMode, here is a picture of my current values

Thanks for reading, I hope this helped you 🙂

Don’t forget to follow me on twitter (if you know arabic but I can also speak english there) and github :

Twitter

Github