Posted on

Unity Health Bar Tutorial – Using Fill Images

How to make a health bar

Welcome to this quick game mechanic tutorial on how to make a health bar using fill images in Unity 3D. In this lesson, we will teach you how to create and update fill meters that you can use for health bars, shield bars, stamina bars, or even experience bars.

Create a Health Bar Object in Unity

To create a fill bar all you have to do is Is create a UI image object. you then you need to set the rect transform so the health bar is positioned and sized the way you want. You then need to apply a source image to the image component so that the Image type drop-down menu becomes available. You then can set the image type to Filled which will make it so you can determine the fill amount of our health bar. You can then decide if you want your fill meter to be a linear or a radial health bar by setting the fill mode. With your health bars created we will now switch over to the code we need.

Update Health Bar with C# Code

To get your health bar to update you will need at least three variables. Two of them need to be int or float. One will be for your current health. The other will be for the max health and the last one will be for holding the image component of the. To then update the health bar you only need one line of code. You will first need to access the fill amount of the image variable and set it equal to the current health divided by the max health. This will give you a decimal value of a percentage of how much health you currently have over how much total health you could have. You will need to have this line of code right after any time you change your current health value.

Test your Work

Inside Unity, you need to make sure you set all the variables and then you can test your game. If you follow along with this video you should then have a working health bar.