Making a Gradient Health Bar In Unity

If you’ve ever wondered how games make the health bars turn from green to red, or change colors as health depletes, then you are like me. So, I learned how to do it. Here is my story.

Objective: Make a health bar change color with damage amount.

First, you need a canvas. Now, I am going to show you my enemy health system more because the one for the player is the same, it is just on the large UI for the screen. While the enemies method will show you how to individualize health bars above their heads. Anyways, you have to resize this canvas and make it a little bigger than the character you are attaching it to and make it a child object of that player.

Start with the canvas and resize it and position it above the character or below the character (Left) or for character you can do the same thing or position it on the large canvas (Right)

Then you add a slider to the canvas. This will be how the health bar moves and depletes.

You also need 2 images. Well, one image but 2 if you want a border. One will be for your slider image fill. Then if you want a little added flair you can add an image border like these things here or whatever image you want and just size them to fit how you want. You can also adjust the size of the slider to fit whatever you have going on. This is very basic and not over the top artistically. As I’ve said before, I’m not an artist. I was going for functionality at this point.

Simple Border

Set the colors you want for each piece by using the color window of the image in the inspector.

You should now have 3 or 4 elements for your health bar.

1. The Canvas
2. The Slider which is a child of the little canvas or main canvas
3. A fill image which will be a child of your slider.
4. The optional border image of your fill image which is a child of your fill image.

Now you need a script. I attached mine to my slider. When making a script that uses UI elements, don’t forget to add using UnityEngine.UI up at the top. Otherwise it won’t recognize any UI components.

Then you need 3 components. You need to be able to access your slider, your fill that represents your slider in the form of the image you created, and a gradient which is how you will change the color depending on the values.

Then you need to create 2 different methods. The first method is to declare the values and how the values and gradients are calculated by those values. These methods are what you will use to adjust these according to the health of the character.

So you need to set the max value of your slider which will be the max health of the character. You also declare the value of the slider to be equal = to the health of the character. Then set the value of the fill color to be equal to the gradient color evaluation over time. The gradient.Evaluate() function is used to calculate the gradient value at any given time. In this case I used 1f because I want it to be accurate and quickly adjust itself.

That method will set all the values according to the max health of the player. Now to change those values according to the health values as they deplete or change are by getting the slider value to be = to the health. Then getting the fill and the gradient to adjust according to the current health of the player. The values are calculated and normalized so that no matter what the max health value is, it works the same between max value and 0. Normalizing sets the value range from 0–1, even if the values are not 0–1.

After that you can set your gradient colors by using the gradient portion of the script you just made in the inspector. Just create a new blend and put the color keys where you want the transitions to change to different colors. Then drag and drop your fill image and your slider into the proper spots and your health bar is complete.

If you want it to always face the camera even when the character isn’t facing you you can put a billboard or lookat script on the canvas. This will make it so that it always looks at the camera by getting the camera and rotating the canvas object to look at its position. That way you will always be able to see the health bars head on.

After that you need to make your own health script and tie this into it. You do that by getting the script. Then setting the health components of the script to the values of your character at the proper times..

Make it so you can drag the UI box into the inspector.

On start set your max health bar values to your character max health values.

Set it to change with the characters current health.

That should be it. Hope you enjoy.