How to make a health bar in Unity

UI is an integral part of a game and UI like health bar is very important to communicate the player’s health in a combat-oriented game. So, the next step in our journey to learn Unity, will be to create a health bar for the player.

In this tutorial, we will design a simple health bar using paint, import it into Unity and use it in our game. Let’s get started.

Designing the health bar.

The design might vary based on your style. I will go ahead with a basic style. You can also download free health bars from Unity asset store.

1. Let’s make a rectangle with curved edges in Paint.
2. Save it as a PNG file.
3. Open the file in GIMP or Photoshop.
4. Crop the image so that there is no background.
5. Here is my final image.

Using the health bar in Unity

• Drag and drop the image into your Unity project window.
• Select the image and set the type to Sprite (2D and UI).

• Adjust pixel per unit so that the image native size matches your requirement.
• Add a Canvas and an Event system to your scene.
• Create an empty gameobject called Health_bar as a child of canvas.
• Adjust the rect transform to make it look like a health bar. Since we made a rectangle sprite, we will adjust the values to make a rectangular box.
• Set the position to your requirement.
• Add two UI images as child objects to the Health_bar.
• Name one as border and one as fill. The border will act as the outline and the fill will act as the slider.
• Set the health bar image that we imported as the source image of both border and fill game object.
• Set the Alpha value of the border image to less than 50. This will make it look transparent.
• Select border image object, press down the alt key, click the anchor preset and select the one in bottom right corner.
• Repeat the same for fill image. This will set the size of both border and fill to match the parent health bar object.

Making the health bar into a slider

1. Select your health bar and go to the inspector window.
2. Click on add component and select slider.
3. Uncheck interactable check box and set transition to none.
4. Drag and drop your fill object into the “Fill Rect” parameter.
5. Now if you adjust the value parameter on the slider component, you should see your health bar changing.

Writing code to control health

Let’s add a cube and a plane object to the scene and reduce the health by 20% when the cube collides with the plane.

1. Create a new script called “health” and attach it to your player. In this case, it’s the default Unity cube.
2. Open the script for editing.
3. Declare a public slider variable and an integer for health.
4. Using OnCollisionEnter(), reduce the health by 20 on collision.

Here is the complete script for reference

using UnityEngine;
using UnityEngine.UI;

public class health : MonoBehaviour
{
    public Slider healthbar;
    int health_value=100;

     
    void OnCollisionEnter(Collision col)
    {
        health_value-=20;
        healthbar.value= health_value;

    }
}

We don’t have a movement script on the player. So, we will just manually move the player and hit the ground. Here is the output using the above script.

If you have any other questions regarding creating a health bar, feel free to leave a comment below. For our next tutorial, we will learn how to move a game object in Unity.