Unity 4.6 - Simple Tutorial, Health Bar and Damage Popup!

If you find yourself making a RPG or RTS game you will be in need of Health Bars and Damage Popups (floating text) for your units. With Unity 4.6 uGUI this is easier than ever before. However, there are some details that you can to take into account if you want to have the classic effect in your game, no matter the setup you are using.

The best news about this tutorial is that you won't even need a single asset to make a simple Health Bar or Damage Popup! This is how I implemented those in my project Northwards of Roswell and this is the result:

Fight, my minions... FIGHT! Muahahaha! >:D

Let's start already! :)

Health Bar

The simplest Health Bar is a square that scales down as the unit is loosing its Health Points. Additionally you can make it change color to better inform the player of what is going on.

Place the bar as a child of your Unit. Better under something that isn't animated (scaling).

The "Billboard" effect will make the Health Bar to be always facing the camera, no matter if the unit rotates or the camera rotates. You don't have to male this behaviour yourself. Since it is pretty basic it has been implemented many times before. I recommend you check the Unify Community wiki for this and many other amazing scripts.

The trick is setting the anchor to the left, so it will behave as a proper Health Bar while scaling.

Changing the color depending of the scale is something rather simple. So simple that I felt bad doing a script only for this. So I make a generic script that hopefully could will be used with different kind of simple Health Bars. You can learn more about Lerp here.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

// Script that Lerp the color of a image depending of the scale of the transform
public class ChangeColorByScale : MonoBehaviour {

 public enum SelectedAxis{
  xAxis,
  yAxis,
  zAxis
 }
 public SelectedAxis selectedAxis = SelectedAxis.xAxis;

 // Target
 public Image image;

 // Parameters
 public float minValue = 0.0f;
 public float maxValue = 1.0f;
 public Color minColor = Color.red;
 public Color maxColor = Color.green;

 // The default image is the one in the gameObject
 void Start(){
  if (image == null){
   image = GetComponent<Image>();
  }
 }
 
 void Update () {
  switch (selectedAxis){
  case SelectedAxis.xAxis:
   // Lerp color depending on the scale factor
   image.color = Color.Lerp(minColor,
                            maxColor,
                            Mathf.Lerp(minValue,
                     maxValue,
                     transform.localScale.x));
   break;
  case SelectedAxis.yAxis:
   // Lerp color depending on the scale factor
   image.color = Color.Lerp(minColor,
                            maxColor,
                            Mathf.Lerp(minValue,
                     maxValue, transform.localScale.y));
   break;
  case SelectedAxis.zAxis:
   // Lerp color depending on the scale factor
   image.color = Color.Lerp(minColor,
                            maxColor,
                            Mathf.Lerp(minValue,
                     maxValue,
                     transform.localScale.z));
   break;
  }
 }
}

Integrating the logic of the Health Bar will change greatly depending on your project. It should look something like this:

public GameObject healthBar;

// Health between [0.0f,1.0f] == (currentHealth / totalHealth)
public void SetHealthVisual(float healthNormalized){
 healthBar.transform.localScale = new Vector3( healthNormalized,
                                              healthBar.transform.localScale.y,
                                              healthBar.transform.localScale.z);
}

Damage Popup

The damage popup should be prepared to be spawned many times, so it will be a prefab.

Setup is very similar to Health Bar, but this time we will animate it.

What? You don't know how to set the life spawn of a gameObject via script? Piece of cake:

using UnityEngine;
using System.Collections;

// Destroy the gameObject or component after a timer
public class SetLifeSpawn : MonoBehaviour {

 // Object can be a GameObject or a component
 public Object myGameObjectOrComponent;
 public float timer;

 void Start(){
  // Default is the gameObject
  if (myGameObjectOrComponent == null)
   myGameObjectOrComponent = gameObject;

  // Destroy works with GameObjects and Components
  Destroy(myGameObjectOrComponent, timer);
 }
}

OK, but how am I supposed to create the Damage Popups and show the numbers of the damage there? This will again depend on the setup of your particular project, but it will generally done via Instantiate. After you have implemented the combat and damage logic it should look something like this:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public Transform damageTransform;
public GameObject damagePrefab;

// The damage to show as a popup
public void CreateDamagePopup(int damage){
 GameObject damageGameObject = (GameObject)Instantiate(damagePrefab,
                                                       damageTransform.position,
                                                       damageTransform.rotation);
 damageGameObject.GetComponentInChildren().text = damage.ToString();
}

The animation is pretty simple. Polish it until you have what you want.

You should ensure that the animation of your Damage Popup is protecting many numbers from obscuring each other. My animation makes the number go up and became small until disappearing. It is not perfect but does the trick.

Note: the CanvasDamage GameObject should have the same components as CanvasHealthBar. This means Canvas set up in world space.

And... we are finished for today! :)


Last time we were talking about Theory with Event Systems and Raycasters. Since the update I have already been using it and learning about its pros and cons. I hope you have enjoyed this tutorial about how to put uGUI into practise.

See you in the official Unity 4.6 Beta Forums! :D

Do you have any questions about Unity4.6? Would you like to see any simple tutorial or example? Is there anything you would like to learn? Looking forward from hearing from you :)