Awesome Custom Health Bars

Game Engine Game Engine Resources
1

When working on Inferno, I wanted to have curved health bars. Normally I do health bars by having a plane and animating it’s scale. It’s fast and easy. But now I have an even better way that I will apply to normal bars in future as well.

The Concept:
Map a linear gradient to an object, and in a node shader, compare the current health (communicated via object color) with the linear gradient.

Example Blend:
BarDemo.blend (540 KB)
I haven’t animated it, but you can slide the object color around to see the effect.

Step By Step (though I assume you know a bit of blender):
First up, create a gradient texture. I do so with Gimp, and leave a few pixels each side to prevent mipmapping and texture wrapping being an issue. Make sure it’s a linear gradient so that your healthbar is linear.

creategradient.jpg1920×1080 236 KB


I’ve used guides to make sure the space each side is consistant and the gradient is parallel with the image. I think 256x256 is probably the optimal size for the image (number of greyscale values?), though I’ve used 512 here.

Here’s the gradient itself:

gradient.jpg512×512 8.95 KB

2

Now you need to create your geometry, and unwrap it so that it covers the gradient:

unwrapgeometry.jpg1920×1080 275 KB


I use ‘reset’ and then ‘follow active quads’ before scaling it onto the image. This should work in most cases, though in some you then need to rotate it by 90 degrees.

Now you need this node shader:

shader.jpg1920×1080 291 KB


The magic number in the math box is 1/2.2 and corrects for the gamma, meaning that a value of 0.5 in all the color boxes does actually turn out to be 50% of the health bar.

There are some changes to the material:

  • Diffuse color needs to be set to 1, 1, 1 (defaults to 0.8 on everything)
  • Shadeless
  • Object color box ticked

Now you can animate the healthbar by changing the object color.

3

This is awesome, def going to use it.

Thanks Sdfgeoff*

Edit:
One could combine this with vertex color and bloom, to make a bar “fizzle” as it raises or lowers,
This+a little motion blur and it could look like a wick burning down or a laser cutting a grove.

Edit 2, could you use a color ramp inside the ge?
I have not looked lately*

4

Sweet, thanks!

5

Cool you know I tryd doing this once but I failed, but this is awesome

6

How can I change the two colors? Instead of white, have green, and the black transparent.

7

I suggest learning the node editor. It’s very powerful. The simplest way would be to put a color ramp just before the output node.

8

rely cool setup

i made a few modifications to it here.

Screenshot_20170430_121514.png1920×1080 351 KB

9

using object.color one could make this flash :smiley:

10

@edderkop:
you get the idea…

@BluePrintRandom:
That and more! If you split the object color into RGB channels you can do all kinds of fancy things (animations running along it’s length, a ‘damage over last second’ indicator and so on)

11

This is a very nice setup!
Thanks alot, very usefull.