Unity3D makes it easy to add 2D UI elements to 3D games, so it’s a great place to start exploring health bars for the first time.
What You Will Learn
On the surface, this project may not seem complicated. Despite this, you’ll need to understand several key Unity3D coding concepts to create a working health bar. This means that there is plenty to learn as you go through this project, including:
How to create 2D UI elements/sprites in Unity3D. How to edit game object components with code. How to share variables between scripts in Unity3D.
Step 1: Set Up Your Scene
Before you can start coding your health bar, you need a scene with a player model for it to apply to. To get started, you can follow our physics-based Unity3D character controller guide to create a player model with basic controls.
With a scene and player model in place, it’s time to add a UI element. Right-click inside the Hierarchy window and select UI > Image. This will create two new items in your hierarchy: a Canvas parent object and an Image child object. Change the name of the child object to Healthbar. Choose a width, height, and position for your health bar using the inspector.
You can add a slightly larger UI image with its color set to black to act as a background/border for the health bar. Just make sure that it is above the health bar in the hierarchy so that it displays behind it.
This UI element works as the foundation for your health bar, but you also need a sprite in place to animate it. Go to the Project pane, right-click, and select Create > 2D > Sprites > Square.
Select the Healthbar from the hierarchy and drag the sprite you just created into the Source Image selection box inside the inspector. You can also change Image Type to Filled, Fill Method to Horizontal, and Fill Origin to Left. Now if you run your game and use the Fill Amount slider you should see your health bar shrink and grow.
Step 2: Add a Health Variable
There wouldn’t be much point in creating a health bar without a health variable in place to dictate its state. Other scripts need to be able to access this variable, and it makes sense to put it somewhere central. Add it to the Character Control script as a public float:
Using a float for this variable means that you can easily represent any percentage from 0 to 100, to match the health bar UI image Fill Amount variable. For example, a playerHealth of 0.5f is 50% of the health bar’s width.
Step 3: Share Variables Between Scripts in Unity
Variables usually operate within their own functions and scripts. This makes them inaccessible from other functions and scripts unless you take steps to tell the code where to find the variables you want to work with.
Start by creating a new script file called Health to house the code. You can drag and drop this script onto the Healthbar UI element created in the first step. The following code goes into the void Update() function.
This process starts with finding the game object that owns the variable. In this case, it’s the Character_Model object:
Next, it’s time to find the script component that contains the variable you need to work with.
And, finally, you can extract the specific variable you’re looking for. In this case, it’s the playerHealth variable you added to your character controller. Assign this to a float variable within the current script called currentHealth.
It only takes a few lines of code to get the variable you need, and you can apply this method whenever you need to access your player’s health. Your code should look like this once you’re done:
Step 4: Program the UI Health Bar Game Object
Now that you’ve created a health bar UI element and have access to the player health variable, it’s time to make them work together. To start, add a private static variable that will contain the image component of your health bar:
You can then assign the image component to this variable within the void Start() function, which only runs once.
Now that you have all of your variables in place, you can use the code from the previous step to set the fill width of the health bar UI object. You don’t need to carry out any conversion here; both the player health and health bar fill amount are float variables.
With this code in place, your health bar will fill up and down based on the health variable found in the Character_Control code. This is a little boring, though, and it could definitely do with some color.
Start by adding a new color to make the health bar a light green color when the player has a lot of health.
Next, add an if statement to check whether the player’s health is above 0.3f, i.e. 30% or more. If it is higher than 0.3f, set the health bar to match the color you just added. If it is below 0.3f, turn the health bar red.
Step 5: Testing the Code
As you can see from the complete code below, this project is quite simple when it’s all together. Of course, though, you need a way to test your code.
You can add a single line of code to the Character_Control script to make testing possible. Whenever the player presses the W key to move forwards, remove a small amount of health. You can add the same code to any script with access to the playerHealth variable for the same results:
You can also consider adding unique assets to your Unity project. You can find free Unity assets across the web, giving you the chance to liven up your project without having to spend any money.
Building Health Bars in Unity3D
Your game is starting to take shape now that you have a health bar in place for your character. There is still a lot of work to do, but you should now have some of the key skills you need to start making real progress. Of course, though, it never hurts to read more guides.
