Unity Health Bar Slider

This took me way longer to discover than I thought it would. I’d implemented a UI Slider to display health (actually I’m using it as a fuel gauge but the principle remains the same) which worked fine but I wanted to change the colour as the players health/fuel reduced, and then flash if perilously low. Many of the examples I encountered online seemed overly complex for what I assumed should be a fairly easy and common task. I’m not sure why a simple solution – like the one below – isn’t more readily searchable (or perhaps my google-fu isn’t what it used to be)…

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

public class PlayerHealth : MonoBehaviour {
    float maxHealth = 100;
    float currentHealth;
    Slider myHealth;

    void Start() {
        myHealth = GameObject.Find("MyHealthSlider").GetComponent<Slider>();
    }

    void Update() {
        if ((int)myHealth.value < 10) {
            myHealth.image.color = Color.Lerp(Color.red, Color.white, Mathf.PingPong(Time.time, 1f));
        }
        else {
            myHealth.image.color = Color.Lerp(Color.red, Color.green, currentHealth / maxHealth);
        }
    }

Hopefully this will save someone else time in the future 🙂
Cheers. J

5 Replies to “Unity Health Bar Slider”

  1. So I know this article is 5+ years old, but I wanted to thank you for explaining this concept in a simple, easy-to-understand way. You really helped me out! 🙂

  2. Sigh, had some comment fail, please delete the others:)

    Thank you for your script, it came in very useful!
    I had to make some modifications, that I will share with you.

    if (int)myHealth.value < 10) without the .value, it won't compile.

    In fact, that was the only modification I had to make, rest were at me leisure.

    I also used this to make an XP slider, using the same methodology, code as follows (I put it all in a function to keep Update() tidy.

    My code to share is at http://hastebin.com/camatanuxi.avrasm

    cheers Steve

    • Your absolutely right with the (int)myHealth.value. I’ve adjusted the code. Thanks for the spot. 🙂

  3. Hello,

    Thank you for your script, it came in very useful!
    I had to make some modifications, that I will share with you.

    if (int)myHealth.value < 10) without the .value, it won't compile.

    In fact, that was the only modification I had to make, rest were at me leisure.

    I also used this to make an XP slider, using the same methodology, code as follows (I put it all in a function to keep Update() tidy.

    void Sliders()
    {
    myHealth.value = curHealth;
    myXP.value = xp;
    myXP.maxValue = levels[currentLevel];

    if (curHealth <= 0)
    {
    myHealth.image.color = Color.clear;
    }

    else if (curHealth <= 20)
    {
    myHealth.image.color = Color.Lerp(Color.red, Color.clear, Mathf.PingPong(Time.time, 0.25f));
    }
    else if ((int)myHealth.value = 2)
    {
    myXP.minValue = levels[currentLevel-1];
    myXP.maxValue = levels[currentLevel];
    }

    if (xp >= levels[currentLevel] – 200)
    {
    myXP.image.color = Color.Lerp(Color.yellow, Color.clear, Mathf.PingPong(Time.time, 0.1f));
    }

    }

    Would also like to mention for anyone else that is new to sliders, you need to define the target graphic on the parent, this defines which image you change the colour of. I deleted the handles and background and set the target to the fill colour.

    Thanks again for the initial code, you helped me learn something new today!

    • grr, comment in code made it skip a bit…

      else if ((int)myHealth.value = 2)
      {
      myXP.minValue = levels[currentLevel-1];
      myXP.maxValue = levels[currentLevel];
      }

      if (xp >= levels[currentLevel] – 200)
      {
      myXP.image.color = Color.Lerp(Color.yellow, Color.clear, Mathf.PingPong(Time.time, 0.1f));
      }

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.