Programming a Dynamic HP Bar in Unity

Today’s article is part of a Boss Fight Script that we’ll keep exploring in segments due to its length. This article will focus on programming the HP Bar UI from the previous article.

Creating a Dynamic HP Bar in Unity

Objective: Program a dynamic HP Bar to take damage and change color as it decreases.

Programming the Slider

For the sake of my game, the HP Bar logic is divided into two scripts: One which handles the slider, and one that handles the damage the Boss receives. However, the code in this article can be placed all within the same script.

1. Declare global variables to control the slider. The variables will be public so that they can be accessed by other scripts.

Note: For my game, this is in a script called HP Bar that will be accessed by the boss script. These variables must go in the script that will be attached to the HP Bar.

• The slider variable allows us to manipulate the Slider component through code.
• The gradient variable adds a special component field that makes the color in the Fill dynamic. This is what allows us to make the HP bar change colors as it decreases.
• The Image Fill is the color and what will decrease.

2. Assign the elements to the Inspector. For the Slider, you need to place the HP Bar which has the Slider component.

3. Set up your gradient colors.

• Change the mode to Fixed so that the changes in the HP Bar are solid colors rather than blended shades.

• If you’re following along to make a Boss Fight with multiple phases, you should make it so each color represents one of the phases. For example: In my game when the Boss is at 50%, the color turns yellow and the second phase starts. You can check the percentages in the Location section of the gradient panel.

Showing percentage location

When adding colors, make you select the knobs first and then the color bar.

4. Make a method to set the max health in the slider and manipulated the gradient.

• The SetMaxHealth method has an int parameter known as health. This number must be an int type to manipulate the value in the Slider.
• Gradient.Evaluate calculates the color at a given time.

5. Create a method to handle displaying the health in the Fill image/color. This method will be called when we need to set changes to the current health display, which will be explained later.

• slider.normalizeValue moves the slider around to the desired position.

Making the Health Bar take Damage

The next portion of the code is set in the boss Fight Script. You could keep adding it to the same script if you’re not following along with that.

Note: The boss fight code will be in a later article.

1. Declare global variables for the health values.

• The max health can be any value you like, the boss fight I’m programming has max health of 100.
• currentHealth is used to keep track of how much health the Boss has at a give moment.
• the healthBar variable is to assign the HP Bar UI to the boss object in the Inspector

2. Set the max health in the Start method. This will ensure that your object starts the scene with max HP.

3. Create a method to reflect taking damage in the health bar. This will have an int parameter which represents the amount of damage being dealt.

3. Make the object take damage by adding collisions to it. Here, I am specifically searching for the “Laser” and “AoE” tags because those are the Player attacks that can harm the boss.

Note: I have a clear quick guide on collisions if you need any help getting started.

OnCollisionEnter vs. OnTriggerEnter — When to use them

The Result:

This has been part of a series of Core Programming Challenges from GameDevHQ. The HP Bar is the first in the script set for a Boss Fight.