In this recipe, we are going to create a very special kind of health bar, since we are combining the linear bar of Implementing a linear health bar with the radial one of Implementing a radial health bar in order to create a kingdom hearts health bar style. This style is like a typical horizontal health bar that is rounded at the end. To have a better idea, let's have a quick glance at the picture ahead of this recipe.
- To begin, let's create a new empty game object, so right-click on Canvas object, since we want it as parent, and then Create Empty. Lastly, rename it as KHHealthbar.
- Next, right-click on KHHealthbar and add a new image by selecting UI | Image, and again rename the object just created as Linear Part.
- Repeat the previous step and rename the new image to Radial Part.
- Create one image for the linear part of the health bar and another for the radial part.
- Then, import them in to our project. If it is not set in 2D, remember to set the Texture Type of the images to Sprite (2D and UI), and then click on Apply.
- For Linear Part, 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 imported.
- For Radial Part, let's change Fill Method into Radial 360 and Fill Origin into Left. Again, we need to add to Source Image the health bar that we have imported. Finally, set Fill Amount to 0.75.
- Place them in order, and now we should see something that looks like the following:
- Now, in the KHHealthbar, click on Add Component | New Script and name it as KHHealthbarScript, and then press Create and Add.
- Double click on the script to edit it. Since we are going to use UI classes, we need to add the
using UnityEngine.UI;statement at the beginning of the script. - We need four variables, one
privateand threepublic, so we can set these last ones in the Inspector. The following are the variables:public Image linearBar; public Image radialBar; public intmaxHealth = 1000; private int health;
- In the
Start()function, we need to set up the health so that at the beginning it is equal to the maximum:void Start () { health = maxHealth; } - Then, we can add a function to
addHealth(int value)to the player, which takes how many health points will be added to the player's health as a parameter. Hence, let's write it:public void addHealth(int value){ health += value; if (health >maxHealth) health = maxHealth; updateKHHealthbar (); } - Since there must be a way to apply a damage, we should add a
removeHealth(int value)function, as the following one:public boolremoveHealth(int value){ health -= value; if (health <= 0){ health = 0; updateKHHealthbar (); return true; } updateKHHealthbar (); return false; } - Now, the most difficult part of the script is to design our update function. In fact, we have to be careful to make sure that we properly fill the two health bars. On the contrary of the previous script, our main issue is that the radial part of the bar starts it's filling from
0.75and not from1, and also it represents 3/5 of the health and not 1/2. But we can face this in the following way:private void updateKHHealthbar () { float ratio = health*1f / maxHealth; Debug.Log (ratio); if (ratio > 0.6) { linearBar.fillAmount = (ratio - 0.6f) * 2.5f; radialBar.fillAmount = 0.75f; } else { linearBar.fillAmount = 0; radialBar.fillAmount = 0.75f *ratio * 10f / 6f; } } - Save our work. Then, we need to assign the two health bars to the
linearBarandradialBarvariables in the Inspector by dragging the Linear Part and the Radial Part in their own variables. - Finally, the work is done!
We started by creating two health bars: one linear and the other one radial. Then, we can parent them to a GameObject called KHHealthbar. Furthermore, we have set them to look like the kingdom hearts health bar style. Finally, we have implemented our logic within the script.
Inside the script, we have created four variables. The first two are image, called linearBar and radialBar, and they will store the Image (Script) component attached on LinearPart and RadialPart, respectively. maxHealth = 1000 is the max health that the player can have: we can set its value in the Inspector, but in our script, 1000 is set as the default value. Furthermore, the health variable contains the health currently possessed by the player.
In the Start() function, we have set up health equal to maxHealth. This ensure us that at the beginning, whoever (or whatever) will have this health bar will start with full health.
We have also created a function to addHealth(int value) to the player. It increases health by value, and if it exceeds maxHealth, it sets health equals to maxHealth. Finally, it calls the updateKHHealthbar() function to update the user interface.
Moreover, we also need to have a function to removeHealth(int value) from the player. The function takes how many health points have to be removed as a parameter. Then, it decreases health by value and checks whether the player is still alive. If he or she is, the function will return false, otherwise it will return true. Before a value is returned, in both branches, it calls the updateKHHealthbar() function to update the user interface.
Finally, we have written the updateKHHealthbar() function. All the numbers that we are going to see in the script are set up in order to give to the Linear Part the 2/5 of the health of the player, and to the Radial Part the 3/5 of the health. We created a ratio variable and store in it the ratio between health and maxHealth. Then, check through an if statement whether the ratio is more than 3/5 for performance in the script 0.6. If so, we set the fillAmount of linearBar to the proportion of how long the bar should be, which in this case is (ratio - 0.6f) * 2.5f, and the fillAmount of radialBar to its maximum filling, that is, 0.75. Otherwise, we set the fillAmount of linearBar to zero and the fillAmount of radialBar to the proportion of how long the bar should be. In this case, ratio * 10f / 6f and then also multiply for 0.75f since its maximum filling is 0.75.
As a last step, we assign linearBar and radialBar in the Inspector with Linear Part and Radial Part, respectively.