Health bar in Unity using Unity UI.

In many games main hero has health. To indicate current health value we need some health bar. Here, in the first part of this article, we will review progress bar-like health indicators using Unity UI.

There are 2 obvious solutions: slider and filled image. Let’s examine them in more detail.

Fast solution is slider. It has value and convenient fill area. We just simply setup slider maxValue to 120 and minValue to 0.

health bar window

Synchronize it like that:

public Slider HealthBar;
private float Health = 120f;
void Start()
{
HealthBar.maxValue = Health;
}
public void GetHit(float hitAmount)
{
Health -= hitAmount;
if(Health <= 0) Health = 0;
HealthBar.value = Health;
}

Super simple and super fast. But in this case we have several problems. Here they are:

  • No color match
  • Shape limitations
  • No zero value

health bar simple color

Color matching we can easily make:

private float _maxHealth;
private Image _targetBar;
void Start()
{
HealthBar.maxValue = Health;
_maxHealth = Health;
if (HealthBar.fillRect != null) _targetBar = 
HealthBar.fillRect.GetComponent<Image>();
}
public void GetHit(float hitAmount)
{
Health -= hitAmount;
if(Health <= 0) Health = 0;
HealthBar.value = Health;
MatchHPbarColor();
}
void MatchHPbarColor()
{
var currentHealthPercentage = (Health*100)/_maxHealth;
if(currentHealthPercentage >= 75)
{
_targetBar.color = Color.green;
}
else if(currentHealthPercentage < 75 && currentHealthPercentage >= 25  )
{
_targetBar.color = Color.yellow;
}
else if(currentHealthPercentage < 25)
{
_targetBar.color = Color.red;
}
}

Now health bar shows us colored health status.

health bar color change

Background (handle area) as actual blob state is simply deleting. But with shape limitation we can’t do anything. Slider should be a rectangular shape, horizontal or vertical and not radial or something else. Of Course we can use special sprite with some non-rectangular shape, thin circle for example, but it looks awful.

To make slider zero value possible, you should follow this steps:

  1. Create a slider;
  2. Delete the Handle Slide area;
  3. Set the Target Graphic to the Fill GO (child of Fill Area) – else it complains about not having a graphic;
  4. Set the Slider value to 0 – it is important before altering anything else;
  5. Select the Fill GO and set its width to 0;
  6. Select the Fill Area GO and using the Rect Tool (in the editor toolbar) to alter It’s Rect to fill the Background graphic.

health bar color change zero

In the other hand we have Unity UI images with the cool feature – filled image! There are some options: Fill method, fill origin and of course fill amount. For our purpose we can use horizontal, vertical and radial 360 fill methods.

Filled image is a little bit different in usage – we control fillAmount and color of this Image. The main thing is to set image type to filled. Next we need to convert the health value to percents. And that’s it.

public void GetHit(float hitAmount)
{
Health -= hitAmount;
if (Health <= 0) 
Health = 0;
MatchAmount();
MatchHPbarColor();
}
void MatchAmount()
{
TargetImage.fillAmount = Health/_maxHealth;
}

health bar radial

In the next part of this article we will review the other types of health bars, not only the progress bar style.

Thanks for reading! Share this article to your friends and colleagues and order outsourcing development of games from us.

Even more interesting and useful info:

Our Twitter: https://twitter.com/TakeGamesTeam

We’re on Facebook: https://www.facebook.com/TakeGamesTeam/

Take Games Blog: https://take-games.com/blog/

Site: https://take-games.com/

Leave a Reply

Your email address will not be published. Required fields are marked *