Health Bar That Is Not A Bar
In this article we are going to talk about how to add a Health Bar that is not in the shape of a bar, but a heart. This approach doesn’t use the UI Slider, but UI Images.
The first step is create the outline of the bar you want to fill. I use Aseprite to make pixel art and I am slowly converting my space shooter game into a classic pixel arcade game.
You will also need to create the fill for the health “bar” making sure it fits inside of your outline. Another good idea is to make the fill white because if it is white, you can easily change it to any color in the Unity Editor.
We need to add a GameObject to the Canvas and renamed it to Health Bar. In this GameObject we will add to UI Images that will be the Fill and Outline of our Health bar.
For each of the UI Images, we just drag the sprite images we uploaded before and in the Fill Image, since it is White, we can change the color to whatever we want.
Let’s create a script for the health bar and first we need to access the UI library.
The variables we need to initialize is two ints that will be the max value of the health “bar” and the current value of the player’s health. The third is an Image that will be our fill image we created earlier.
In the On Start, we just want to make sure we set the current value to the max value. Next, we will make the fill image 100% by setting it to 1. The fill amount is a normalized value ranging from 0–1.
We will need to add two methods. One will be to add health and the other will be subtracting health. Let’s create the method that will handle adding health. We will pass in a int parameter named health. The current value will be increase by the health parameter. We do not want the current health to exceed the max health, so we use and If Then to check this condition and if it happens we will set the current value to max value. Lastly, will need to update the update the fill amount and we have to remember the fill amount expects a float value between 0 and 1. This is a problem if the current value and max value are bigger numbers. To solve this we will the amount to a float that is the current value divided by the max value (this will return a number between 0 and 1).
For the subtract health method, it will be very similar to the add health method except for keeping the current health value from going below 0. We will subtract the health parameter from the current value and performer a check to see if the current value is below and if it is then we will set the current value to 0. The fill amount line is the same as before.
We want to test this, so we will put some key inputs and call both the add health and subtract health methods, passing in the amount we want to add/subtract.
Back in the Inspector, we will attach the script to the Health Bar, assign the Fill Image to the Fill variable and set the Max Value to the value we want. This is not working when enemies hit us, but it is setup to be used with other scripts which will be for another time.
