Using A Multi-Colored Image as a Health Bar


I need help in regards to a health bar that I’m current working on for my game. It uses a multi-colored appearance to it, and when I choose it as a fill it turns green. Is there a way around this to use the image itself as the fill? If it can be helped I’d rather not use a flat, generic color.

Yay: this is with it just being set up as an image and not a fill, just so I can get my point clear.

Nay: this is with the fill being the image in question, and it turns green and I’m not sure how to change it to the above version to act as a fill.

There are many ways to do this. Here are a few:

  1. You can setup a material that blends between two gradients (like on your image), and use a Scalar Parameter to dynamically blend between the two images.

  1. Alternatively, you could add a Progress Bar with your Blue-To-Green gradient on top of your static image red gradient, so when the progress bar goes “down” it reveals the red bar behind it.

  2. Similar to the first option, you could just add the two gradients and set the green one to be on top, and then set its opacity in relation to the health percentage.

Hope this helps!

Here is your solution;


Just change the Fill Color and Opacity to pure white.

It is silly to have it as blue toned by default. Very confusing for beginners but hey, at least it’s not solvable. :stuck_out_tongue:

Ahhh, thanks a lot! I just figured it out just before I re-checked the post, but at least I got confirmation that I wasn’t an idiot and I did it right XD

Also @brunogruber that is a very interesting way of going about doing this and I’ll definitely keep this in mind, for some things later on down the line!

I finally got the desired result that I was looking for:


Character Mesh needs work. :stuck_out_tongue:

Glad you are progressing!

Oh, the reason why the character mesh looks weird is because of the cel-shader I am using at the moment. This isn’t a very flattering shot, however :stuck_out_tongue:

I was just joking. ^-^ (As Portrait is not the same with the mesh itself :p)