Connect with us


Unity Help

Developer Hub

Fastest way of Creating a Color changing HP bar in Unity

Working on a project recently, I came across a very simple, and obvious way of creating a color changing HP bar (or any progress bars) in Unity, that change color based on the amount of health left. And yet I have never seen this being used, and never used this myself before. In the next few minutes, you’re going to learn the fastest way, of making color changing HP bars.

UI setup

So first let me show you the scene setup I have in place. There’s a simple HP bar, and a couple of buttons to increase or decrease the health.

unity health bar
game scene

The HP bar is a simple Image for bar background, and another UI image with Image type “filled” which is the actual bar part. There is a TextMeshPro text gameObject in the ‘OtherUi’, along with the + and – buttons to increase and decrease HP which will be indicated graphically by the filled bar and the TMP text.

unity health bar
scene setup
unity hp bar
filed area Image inspector


Alright!, now that you’ve seen the scene setup, let’s get to the code part.

So I created a new Script called ColorHP.cs , and here’s the code :

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class ColorHP : MonoBehaviour
    public TMP_Text currentHpText;

    public Image filledBar;

    public Gradient hpGradient;

    private int currentHP;

    public int maxHP = 100;

    void Start()
        currentHP = maxHP;

    public void PlusHP(int changeAmount)
        currentHP = Mathf.Clamp(currentHP + changeAmount, 0, maxHP);

    public void MinusHP(int changeAmount)
        currentHP = Mathf.Clamp(currentHP - changeAmount, 0, maxHP);

    void UpdateUI()
        currentHpText.text = currentHP.ToString();

        filledBar.fillAmount = (float)currentHP / maxHP;

        filledBar.color = hpGradient.Evaluate(filledBar.fillAmount);

Inspector setup

Then I added the script to the parent “HP bar” gameObject. Assigned the required fields for variables “Filled Bar” and “Current Hp Text”.

unity health bar

Then I made the color changes in Hp Gradient, you can do so by clicking on the gradient. you can click on the lower edge to create a Color Key, and upper edge to create a new alpha key. Mine looks like this :

unity health bar
unity health bar

Then I assigned the “PlusHP” and “MinusHP” functions to the + and – buttons, and put a change value of 10.

unity hp bar

And that’s it, we’re ready to test the Color change functionality.

Color Changing HP Bar in Unity – The Final Result

final result

Using the gradient gives you much more flexibility over the color control then any other way like Lerping between colors would.

If you want me to explain how the code works, or how to make a progress bar UI, let me know in the comments.

I hope you found this useful, and that you’ll use this for your games.

I’ll be uploading a tutorial for this on YouTube soon, covering how the code works as well, for that follow me on twitter (@BuluSama) to stay updated.

Have a nice and productive day!!!

Newsletter Signup

Get notified of new articles and have fresh tech news delivered straight to your inbox.

Written By

I'm a freelance Game developer, web developer and AI enthusiast I love working on VR projects and simulations. I love writing fiction, watching anime and playing games in my free time, which I rarely have any. Reach me out for freelance work on follow me on twitter :

Click to comment

You must be logged in to post a comment Login

Leave a Reply

TechLater: Chasing XP Podcast

Chasing XP Podcast

TechLater presents: The Chasing XP Podcast.
Developer interviews, industry chat, indie development discussion and more.
Listen now!



More From The Developer Hub

Write for

We have a number of indie developers writing for, and we’d love to provide you with a platform to chronicle your journey – be it game development, coding, designing, ethical hacking or any other computer science.

It’s easy. Simply register here, and start writing!

Newsletter Signup

Get notified of new articles and have fresh tech news delivered straight to your inbox.

| Copyright © 2020 | Powered By Coffee and Kangaroo Burgers |

Newsletter Signup

Get notified of new articles and have fresh tech news delivered straight to your inbox.