Build an Amazing Health Bar in Unity

I have already talked a bit about how to make a health bar from scratch back in this article way back from the 2D Space Shooter series. There is an easier way to make this system though. We can use Unity’s built-in Slider to make a health in just a few steps.

We start with a simple Slider Object that contains a few other objects. One thing that we added is the Text to the Handle so that we have Text that will move along as the Slider Value changes.

The Slider by itself looks like this.

We have a few things that we can customize to our liking. The MaxValue is Defaulted at 1 but we can change it to anything we like. We can also adjust the Slider to only use Whole Numbers for its values.

The Handle is generally the object that User will interact with. Since we are making a health bar, we don’t actually need this Object. We can first turn off the Interactable option.

We can then disable the Handle’s Image so that it is still there but we can’t see or interact with it. We can use its location to move our Text though.

As we can see there is a bit of the Fill that is still visible.

We can fix this by setting the Fill’s Width to 0.

We can also adjust the Color of the Fill.

Likewise, we can adjust the Color of the Background’s Image Component.

This results in an amazing-looking health bar.

Now, we move on to the coding. As always we start with adding our Namespaces for any Libraries we need access to.

We now add our variables for our Slider and the Text attached to the Handle. We will also keep track of our health with Floats for the current and maximum health values.

Now, we need to Initialize our beginning values.

Then, we create methods for taking damage and healing.

We will also create a method to take Input from the keyboard to determine if we are taking damage or healing.

Lastly, we will update our Slider and Text to the current health.

We will call the CalculateControls and UpdateSlider methods during the Update method for testing purposes.

Now if we run the Application, the Slider moves down when we take damage and vice-versa when we heal. The Text also Updates according to the current health. So, it looks like it is all working as intended.

Now, we can make some adjustments and refactor a bit. For instance, we can put the UpdateSlider method call into the TakeDamage, Heal, and Start methods. This will only call the UpdateSlider method when the Value is changed as opposed to every Update.

We can also add a reference to the Fill’s Image Component. We will also add a Gradient Field. We will use this to adjust the Color of the Fill depending on the Slider’s Value.

Now, we will make a method to change the Color value of the Fill. We will get the current health divided by the maximum health to get a Float value between 0 and 1. We then use that number to determine a point along the Gradient and get a Color. Then, we simply adjust the Fill Image’s Color to that Color.

Now, we add the UpdateColor method to the UpdateSlider method.

Now, we need to make a Gradient, which we can do simply by clicking on the field in the Inspector and adjusting values to our liking.

We can also change the Background’s Color to Black.

Now, when we run the application and change values, our health bar will change colors based on the current health.

There are of course multiple other things that we can do to improve upon this setup. For now, we have a basic, working health bar we can incorporate into almost any game.

Thanks!