Unity Health Bars

You might want a health bar at the top, instead of a text score. Something that looks like this:

Let's create a simple scene, with a Plane and a Cube. In a new Unity Scene, click the Game Object menu. From the Game Object menu, select 3D Object > Plane. You can add a material to your Plane, if you like. Now add a cube to the scene (Game Object > 3D Object > Cube.) This will serve as a player. The player's not going to move, however, as we're only using it to attach a health script. Every time we press the H key on the keyboard, the health bar at the top will shrink. Anyway, your scene might look something like this:

Now let's add the UI Elements.

UI Elements go on a canvas. To add one to your scene, go to Game Object > UI > Canvas. In your Scene, scroll out a lot to see the whole of the canvas. Scroll out until your Scene looks like this:

The white rectangle is the canvas. The Plane you added is in the bottom left corner of the canvas.

Notice the 2D icon indicated in the image above. Click that and your Scene will change to this:

With the Canvas still selected in the Hierarchy, have a look at the Inspector on the right. Notice that there is a Canvas Scalar section:

Click the dropdown box for UI Scale Mode. Change it from the default Constant Pixel Size to Scale with Screen Size:

The Reference Resolution is 800 x 600. This is fine for a PC, so we'll leave the size. You might want to change it for a mobile device. But let's move on and add a panel to the canvas.

Right-click on your Canvas in the Hierarchy. From the menu, select UI > Panel. By default, a panel will fill the whole of the canvas in a white colour. The Panel is actually an image with a low transparency (the Alpha). In the Inspector, click on the Color item:

Clicking on Color will bring up a color wheel. Change the color to something darker, and move the alpha slider up a little:

Your Scene view will look like this:

Notice the four white triangles in the corner. These are the anchors. They are in the corner because the default is set to stretch, stretch in the Rect Transform of the Inspector:

Click on the square indicated by the red arrow, in the image above. You'll see this box:

If you click the square for Middle, Center, you should see those white triangles move to the centre of your panel in Scene view:

Now select middle, left and the white triangles will move to the left of the panel:

For us, though, an anchor position of top left will work well. When we place our images on the panel, they will be aligned with those anchors we just set - the top left of the heart image, for example, will align with the top left of the anchors.

So, set your anchors to top, left. And set the height of the panel to 60. Set the Pos Y value to -17. Your Inspector will then look like this:

And the Scene view will look like this:

Now let's add the heart image. We'll then add the bar later.

Right-click on the two images below and save them to your own computer.

In the Project area of Unity, create a new folder called Textures. Drag and drop the two images above into your new folder. The project area will then look like this:

The heart just looks like a red square with a white background. That's because we haven't set the texture type.

So, select the health-heart item in your Textures folder. In the Inspector on the right, notice the Texture Type at the top. It's set to Default:

Click the dropdown box and set it to Sprite (2D and UI):

When you select Sprite (2D and UI), the Apply button will become available in the bottom right. Click the Apply button and your health-heart will now look like a heart in the Project area:

Now select your health-bar image in the Project area. Do the same - change the Texture Type in the Inspector to Sprite (2D and UI). Click Apply and your health-bar should then have the same arrow icon the right as the heart:

Now right click on your Panel in the Hierarchy. From the menu that appears, select UI > RawImage. Change the name of the Raw Image to Health-Heart. You'll have a white square in your Scene, in the middle of the Panel:

In the Inspector on the right, notice that there's a small circle to the right of the Texture box. Click the circle, as indicated in the image below:

When you click on the circle, you'll see a Select Texture dialog box appear. This one:

Double click on your heart texture. This will select the heart and close the dialog box down. The Texture slot should then show the health-heart item in it:

Your Scene will then look like this:

The Raw Image has its own anchors, which are in the middle. We want these, and the image, on the left. So, (tricky part, this), click the anchor box in the top left again:

From the dropdown, we need to select top, left. However, this time, hold down a SHIFT key on your keyboard. (Holding down the SHIFT key lets you set an anchor.) You should see blue circles appear in the anchor box:

Now, with your SHIFT key held down, left-click top, left. If you do it right, the white anchor triangles will move to the left in Scene view:

Click the anchor box again. This time, hold down an ALT key on your keyboard (The ALT key is for position). You should see blue rectangles in the anchor box:

With the left ALT key held down, click top, left again. The image itself will move to where your anchors are, on the left:

The image is a bit big, though. So, in the Rect Transform area of the Inspector, change the width and height to 35. Also, change the Pos Y value to -20. Here's the Inspector:

And here's Scene view, after you've made the changes:

If you switch to Game view, it will look like this:

You might feel the heart is a little too close to the left edge. If so, change the Pos X value in the Inspector.

Now let's add the bar. We'll do it in more or less the same way.

 

Health Bar

In the Hierarchy on the left, right-click your panel. From the menu that appears, select UI > Image (not Raw Image). Rename to Health-Bar. Your Hierarchy should look like this:

Notice that Health-Bar is on top of Health-Heart. If yours is the other way round, drag Health-Bar to the top. (Left-click on Health-Bar. Keep your left mouse button held down and drag above Health-Heart.) If you don't, the heart will be below of the bar.

Make sure Health-Bar is selected in the Hierarchy. In the Inspector on the right, click the small circle to the right of Source Image to bring up the dialog box.

This time, select your health bar image:

In Scene view, you should have this:

Do the same as before: click the anchor box, hold down SHIFT and click on top, left, hold down ALT and click on top, left. The Image should then jump to the left:

In the Inspector, change the following values in the Rect Transform section:

Pos X: 24
Pos Y: -27
Height: 20

Your Inspector should look like this:

In Scene view, the health bar and heart should look like this:

And like this, in Game view:

Still in the Inspector, and with Health-Bar selected in the Hierarchy, notice that there is an Image Type further down, in the Image section, as well as a Fill Method and Fill Origin. Set the values for these as follows:

Image Type: Filled
Fill Method: Horizontal
Fill Origin: Left

Finally, notice the slider for Fill Amount. The slider goes from 0 to 1. This is what we'll be changing with code. Play around with the slider and watch what happens to your health bar at the top of the Game window. It should go up and down as you adjust the slider.

After all that hard work, you're now ready to do the coding! (Don't worry, there are only a couple of lines.)

 

Health Bar Code

In the Hierarchy, select that cube you added at the start. In the Inspector, click the Add Component button. Type New Script into the search box. Add a new script and call it HealthBar. By default, Unity adds a new script to your Assets folder. So, click inside of your Assets folder and double-click your new script to open it up.

At the very top of the script, add this using statement:

using UnityEngine.UI;

Inside of the curly brackets of the class, add these two variables:

public Image imgHealthBar;
private int damage = 5;

You don't need the Start method, so you can delete that.

In the Update method, add these lines:

if (Input.GetKeyDown(KeyCode.H)) {

imgHealthBar.fillAmount = imgHealthBar.fillAmount - (damage * 0.01f);

}

The if statement just detects if you've pressed the H key on your keyboard. This is to simulate taking damage by an enemy. We have a set of tutorials here where a soldier fires at a player and causes the player damage:

Enemy Gun Fire

Instead of the if statement above, you'd need to do something like this:

if (playerGotShot)) {

imgHealthBar.fillAmount = imgHealthBar.fillAmount - (damage * 0.01f);

}

The line that does the work, though, the one reduces the health bar, is this one:

imgHealthBar.fillAmount = imgHealthBar.fillAmount - (damage * 0.01f);

The fillAmount is that slider you've just been playing with. We're reducing it by damage * 0.01f. (The f on the end is because it's a float value not an integer.) The value in damage is hard-coded to a value of 5. When you multiply 5 by 0.01, you'd be able to take 20 hits before the health bar shrinks to zero.

But it's important to bear in mind, here, that the line above is just for the health bar. You'd need an additional line to reduce your player's overall health. Something like this:

currentHealth = currentHealth - damage;

Anyway, your code should look like this:

If you wanted to reset the health bar, you'd set the fillAmount to 1:

imgHealthBar.fillAmount = 1;

But save your code and go back to Unity.

Make sure your Cube is still selected. In the Health Bar script section of the Inspector, click the tiny circle to the right of Img Health Bar, as indicated in the image below:

When you click the circle, you'll get a Select Image dialog box popping up. Select your Health-Bar image:

The Inspector for the cube will then look like this:

At long last, you're done! Try it out. Play your game. Hit the H key on your keyboard and you should see the health bar shrink. Keep hitting the H key to deplete your health further.

 

This same technique, by the way, can be used to attach a health bar to a character in your game. Instead of a panel at the top, you add a panel to a character. As the character moves so too will the panel and the health bar attached to the panel.

<--Back to the Unity 3D Course Contents Page