In this recipe, we are going to create a linear health bar. The health of the player will be displayed as a bar that shortens when the player's health decreases, and extends with the player's health increases. To achieve this, we will use the Image (Script) component in a different way than what we have in previous recipes, and develop a script to manage the length of the bar.
- First of all, we need to create our health bar, so let's open a graphic program and create it. We can create something that should looks like the following:
- Then, import it in to our project. If the project isn't set to 2D, remember to set the Texture Type of the imported image to Sprite (2D and UI), and then click on Apply.
- Next, create a new Image. Right-click on the Hierarchy panel and then UI | Image, and rename it to Linear Healthbar.
- Inside the Image (Script) component, we have to change Image Type into Filled. The component should change a little bit in the Inspector.
- Let's change Fill Method into Horizontal and Fill Origin into Left. Of course, we need to add to Source Image the health bar that we have created. Finally, we can place the Linear Healthbar everywhere we want, always using the Rect Tool.
- In order to keep its original proportion, you can click on Set Native Size button on the Inspector.
- The following is how the component should appear:
- Now, in the Linear Healthbar, go to Add Component | New Script and name it HealthbarScript, and then press Create and Add.
- Double-click on the script to edit it and add the
using UnityEngine.UI;statement at the beginning of the script, since we will use theImageclass. - Before we add any functions, we need a three variables, two
privateand onepublic, so we can set this last one in the Inspector. Hence, we can write the following:private Image healthbarFilling; public intmaxHealth = 100; private int health;
- In the
Start()function, we have to set thehealthvariable along with thehealthbarFillingone, thus:void Start () { healthbarFilling = this.GetComponent<Image> (); health = maxHealth; } - As usual, we need a function for add health, so let's write the following:
public void addHealth(int value){ health += value; if (health >maxHealth) health = maxHealth; updateHealth (); } - And also, we need to write a
removeHealth(int value)function:public boolremoveHealth(int value){ health -= value; if (health <= 0){ health = 0; updateHealth (); return true; } updateHealth (); return false; } - Next, we need to add our
updateHealth()function to update the health bar on the screen:private void updateHealth(){ healthbarFilling.fillAmount = health / maxHealth; } - Finally, just save the script and we are done.
First of all, we created our health bar in one of our graphic programs. After importing the image and setting it to be a Sprite (2D and UI), we created a new image and set its Fill Method to Horizontal so that the image can disappear or appear gradually, as the health goes down or increases. Finally, we implemented a script for the logic.
Inside it, we have created three variables. The first one is healthbarFilling and, as usual, it stores the reference to the Image (Script) component. The variable maxHealth = 100 is the max health that the player can have, and we can set its value in the Inspector, but as default in our script, it has 100 as value. Finally, the health variable contains the health currently possessed by the player.
In the Start() function, we first assigned the Image (Script) component attached in the same game object of this script to the healthbarFilling variable by calling the this.GetComponent<Image>() function. Finally, we set health equals to maxHealth.
Furthermore, we have written a function to addHealth(int value) to the player. It takes an int as a parameter, and this int is the number of health points that will be added to the player. In fact, at the beginning, we add value to the health variable by health += value. Then, there is an if statement that checks if the health is more than maxHealth and, if so, set the health equals to maxHealth. At the end, we called our updateHealth() function in order to update the UI.
We also have a function to removeHealth(int value) from the player that returns back a Boolean value: true if the player has no more health, otherwise it returns false. The first line subtracts the value to the health variable, then the if statement checks to see whether we have negative health and, if so, set the health variable to zero and, after updateHealth(), we return true. Otherwise, we call our update function and return false.
At the end, we have the updateHealth() function, in which we put the ratio between health and maxHealth into the Fill Amount variable contained into Image (Script) component in the Linear Healthbar. In fact, the ratio is the percentage of how much health has the player and also how much longer our health bar should be.
We can also consider adding a new image in the scene that encloses the health bar in some graphic elements, such as an artistic border, which also underlines the importance of this UI element. This book does not cover how to do this; however, there are many resources available online that can provide information on how to do this, as well as other UI elements.