Player and enemy health bars in Unity

Objective: To remove the health from the main UI and attach it to the player and enemies.

Currently the health system is shown to the player on the main UI of the game.

To make this happen I need to:

1. Create a canvas on the player game object
2. Grab some circle images that I want to represent the new health bar
3. Create a prefab of the canvas so it can be added to the enemy prefabs for easy use

A quick tip before I start. If you do want to make a prefab of the canvas that contains the health script and objects you need, then it will need to be made on an object that is not already a prefab. I am using my player for this reason.

First create a canvas on the player by right-clicking and adding the canvas.

Next you need to make sure that the canvas scaler of the canvas is set to scale with screen size and set up you dimensions. I’m currently using a 16:9 ratio so my dimensions are 1600 x 900.

Now right-click on the canvas and add a UI image, then drag in your download image into the image slot and change the image type to filled. You can choose whichever setting you wish by I have chosen radial 360.

The last part to do in the Unity editor is to create a Health script and add it to the new canvas on the player.

Once in the script I am creating 5 variables, this is a preference for me as I want to change the colour of the image depending on the percentage of the health that is left.

This allows me to choose three colours and they can be changed per enemy if needed. The offset variable is so that I can move the image if I want it in another position either below or above the player. The Image will be the child gameobject of the canvas that is the image you added earlier.

In the start method I am calling my method called MoveImage() which sets the position of the image from 3D space to 2D space using Camera.main.WorldToScreenPoint(using the canvas position + the offset). The same method is also called in the update method as it needs to move along with the gameobject it is attached to.

Next is the method to set the image fillamount to match the health the player/enemy has left.

If you want a simple method without the colour changing you can just use one line.

the newHealth = health/maxhealth. I am doing this because the fillamount of the image needs to be between 0 and 1. Making this calculation will gives us that number.

Now that the script is set up I now need to go into the editor and chose the colours I want for my high, mid and low health, attach the image from the child object of the canvas.

And that is the canvas setup for the health. If you want to reuse this you can now create a prefab from the canvas, simply select the canvas and drop it into the project window. Now let’s see the health bars in action.

There are a couple of adjustments made to the player class that instead of updating the UIManager for the lives sprites, I am now calling the new method in the Health script.

That’s it for this article about creating a health system that is attached to a player.