Want to try this Exercise?

Join CG Cookie and gain access to 100's of Blender Courses

Watch course trailer Get Started

Dynamic Health Bar

  • Software:Unity 2018  ·
  • Difficulty:Beginner

Rules of the Exercise

  • 1
    Use a vertical fill type for the inner red cross portion of the health bar
  • 2
    Create a script to reduce health by 10 every second and stops when it reaches 50%
  • 3
    Regenerate health when it reaches 50% smoothly over time until it reaches 100%

Regenerative Health Powers!

Regenerative health is a common mechanic in a lot of games. In this exercise you'll learn how to take the concepts of a simple timer and apply them to a health bar. Reducing health over time until it reaches a halfway point, then we regenerate our health back up to 100%. You can take this a step further and use this in a game to regenerate health when a player is within cover and no longer taking damage. Download the starting project files to get started with this exercise. 


You must utilize the images from the project files for this exercise, but feel free to create variations of this along side with the red cross. Create a circular health "bar" or an icon/image based health system in a similar format. When you're ready, submit your exercise to be graded. Have fun!

How To

If you have completed the exercise or are having trouble accomplishing this exercise then take a look below to see how it was accomplished. 

The first rule was to set the fill type of the red part of the image to Vertical

The Image Type should be Filled with Vertical for the Fill Method.  This will ensure that we can use the Fill Amount with a health value later in our scripting. 

The second rule was to decrease your health (and fill amount) by 10 every second until it reached 50. Below is the code snippet that shows how this was used:

IEnumerator StartHealth ()
        while(currentHealth > 50)
            currentHealth -=10;
            healthText.text = currentHealth.ToString();
            healthFill.fillAmount = currentHealth/totalHealth;
            yield return new WaitForSeconds(1);

We use a while loop to determine if currentHealth is greater than 50, if so we continue to go through the loop. We deduct 10 health, then update our text to display this in a string format. We also use this with the fill amount. Since the fill amount cannot be greater than 1, we use a fraction to represent the health. So we divide totalHealth by the currentHealth. This continues until we reach 50 for currentHealth.

Lastly at 50 health, we start regenerating health over time until we get to 100. Using a similar approach to "StartHealth" except we increment it smoothly over time. Here is the code snippet for that portion:

IEnumerator SmoothHealth ()
        while(currentHealth < 100)
            currentHealth += Time.deltaTime;
            healthText.text = currentHealth.ToString("F0");
            healthFill.fillAmount = currentHealth/totalHealth;
            yield return null;

We check the value of currentHealth, if it's less than 100 then we continue to increment our health. This time we increase it by Time.deltaTime which is a float value. We want to display a whole number with our text, so we use ToString("F0") which only displays the numerical values before the decimal. The rest is the same as the first Coroutine. SmoothHealth gets called from the first Coroutine when health reaches 50. Once it increments all the way up to 100, it stops. 

Take a look at the completed project files for this exercise in the downloads tab!