Unity UI Tutorial : Health Bar Part 1

Overview

In this tutorial, I will teach you how to use Unity's UI system to create a health bar for a player.  The health bar will be located at the top of the screen such as in an RPG game.  The method used in this tutorial can be used for other bars such as mana or experience bars.  Feel free to follow along with the video on the right.

Scene Set-up

The set up for the scene is very simple.  You will not need to import any assets, and can use the default background image for the health bar.  However, for final production of your game, I recommend creating your own health bar icons.

The setup for our scene is quite easy.  I'll go through top to bottom what you will need.  

Main Camera
-Used to render our scene.   I chose to rotate the camera 90 degrees in 2D mode so that the camera is facing downwards.  This was mostly because of physics stuff, but how you do it in your game will depend on your needs.

Directional Light
-Needed so that you can see objects in your scene.  Comes with the hierarchy when you create your scene.

Canvas
-Makes all of the UI elements visible.  Nothing special you need to do with the settings here.  

TopPanel
-Just a panel I put in there to make it easier to move stuff around.  Not necessary for this tutorial, but may be a good idea for your game.

HealthText
-Cosmetic text just to show that we are talking about health :]

EmptyHealthImage
-UI Image that we will be using as a base for our health.  Change the color of it to red, and select one of the default background images for the icon.  Also change the image type to filled.  The fill method to Horizontal and the fill origin to Left.

FullHealthImage
-UI element that we will be manipulating with our script.  Make all of the same changes that were made in the EmptyHealthImage, but change the color to green.

EventSystem
-Comes with the UI Canvas element.  Don't need to do anything with it.

Background
-This is purely cosmetic so that I can show you what is happening in the scene.

Player
-One of Unity's primitive spheres which is colored blue.  We will be attaching the HealthBarControl script and movement control script to it so that we can see the health go up and down.  Also make sure there is a rigidbody attached with all of the constraints selected.

HealthPack( ,1,2)  
-The next two objects are again Unity's primitive sphere objects.  These will be used to test our add health functionality in our HealthBarControl script.  Make sure you add a tag to each of them with the string "HealthPack".

Enemy( ,1,2)
-These objects will be used to test our subtract health functionality in our HealthBarControl script.  Make sure you add a tag to each of them with the string "Enemy".

When you are done, your game view should look something similar to this.  Don't worry if you have objects in different places.  Just kind of get this gist.

Player Movement Script

In this section I will go through the code you need to create the player movement.

/**********************************************************************
Company:       Acem Gaming
Author:             Drew Massey
Date Created: 07/08/2015
Brief:                 Simple player movement script.
***********************************************************************


using UnityEngine;
using System.Collections;

public class PlayerMovement : MonoBehaviour 
{
   public int speed=8; 

   // Update is called once per frame
   void Update () 
   {
      if (Input.GetKey ("w"))
      {
         transform.Translate(Vector3.forward * speed * Time.deltaTime);
      }
      if (Input.GetKey ("d"))
      {
         transform.Translate(Vector3.right * speed * Time.deltaTime);
      }
      if (Input.GetKey ("a"))
      {
         transform.Translate(Vector3.left * speed * Time.deltaTime);
      }
      if (Input.GetKey ("s"))
      {
         transform.Translate(Vector3.back * speed * Time.deltaTime);
      }
   }
}

HealthBarControl Script

In this section I will go through the code you need to create the health bar control.

/**********************************************************************
Company:       Acem Gaming
Author:             Drew Massey
Date Created: 07/08/2015
Brief:                 Control the health of a player in an RPG game.
***********************************************************************
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class HealthBarControl : MonoBehaviour 
{
   public Image EmptyHealthBar_Image;
   public Image FullHealthBar_Image;

   public int playerFullHealth = 10;
   public int currentPlayerHealth = 10;

   //When the player has a collision with another object
   public void OnCollisionEnter(Collision collision)
   {
      //Check the tag
      switch(collision.gameObject.tag)
      {
      case "Enemy":
      if(currentPlayerHealth > 0)
      {
         //Subtract health and update healthbar image
         currentPlayerHealth -= 1;
         UpdateHealthBar(currentPlayerHealth);
      }
      break;

      case "HealthPack":
      if(currentPlayerHealth < playerFullHealth)
      {
          //Add health and update healthbar image
         currentPlayerHealth +=1;
         UpdateHealthBar(currentPlayerHealth);
      }
      break;

      default:
      break;
      }
   }

  //Updates the healthbar image to reflect added or subtracted health
  public void UpdateHealthBar(float currentPlayerHealth)
   {
      FullHealthBar_Image.fillAmount = currentPlayerHealth / playerFullHealth;
   }
}

Result

The "game" below is the scene result of the health bar script we implemented.  Use the WASD keys to move.

Unity Web Player | Health Control Test

« created with Unity »