Circular health bars

Lloyd040690 · 2012-06-28T13:35:47

So, a friend of mine and I are working out a game, when we came to the design of the HUD. We began discussing a circular bar for health, or experience, or something of the like. After coming up with the design we were discussing the tech behind it, and we can't wrap our minds around a good way to do a circular health bar. We were discussing a stencil buffer, or perhaps a shader, but that seems a bit much for just a GUI item. Anyone know how to implement this in a simple fashion, or are we going to have to take one of the more complex routes?

Graphics and GPU Programming Programming

Started by Lloyd040690 June 07, 2011 03:23 AM

18 comments, last by rip-off 11 years, 10 months ago

Mussi

4,453

June 07, 2011 11:16 AM

Sorry about that, I'm referring to a bar similar to the teal bar in the thumbnail below. It starts on the right side, where it end in a small ball, and fills up along the black part all the way around the creature's head as your character's experience increases.

Thumbnail from The Witcher.

Katie

2,255

June 07, 2011 12:12 PM

I did something very similar in a pixel shader -- passed in the %age to fill as a parameter to the corners. Each pixel looked to see if it was inside the circle or outside and bailed if so. Then looked to see what angle round the circle it was, compared that to the display %age and picked an appropriate colour.

We also had a version which did a texture fetch based on the angle so we could pass gradients in as textures to use.

We could then put health bars on thousands of screen elements.

kdmiller3

178

June 07, 2011 05:19 PM

That pixel shader technique has the advantage of working with all kinds of crazy shapes, not just circles. You might be able to do the same thing without a shader by using alpha test.

Sneftel

1,788

June 07, 2011 05:47 PM

In general, GUI stuff like this isn't done with a clever shader. The most commonly used tech for game GUIs is Flash, using ScaleForm to render it into the game (RAD game tools recently released Iggy, with equivalent functionality). In this case, the health bar -- whatever its shape -- would be an animation, with the player's health level determining which frame was shown. This lets your GUI artist use content creation tools he's comfortable with, and lets him iterate without constant support from a programmer.

Obviously a ScaleForm license is out of the reach of most indie devs, but if you're using UDK, good news -- it's in there. (Crytek might have it available too, but I'm not sure.)

andur

781

June 10, 2011 12:43 AM

I'd just use an alpha-masked texture. Draw out a nice alpha gradient along the path you want your health bar to follow, and build 2 textures one for the completely filled state and one for the completely empty state. Then pass in the % of life that the player has left to the shader, and have it use the empty texture for alpha values greater than this, and the filled texture for alpha values less than this (with perhaps some blending between them around the boundary). This way, you can have any shape that you want.

acontreras89

101

June 27, 2012 06:29 PM

Hello everybody,

first of all, I must apology for posting in such an old topic. However, I've seen this article (and some others around the internet) a hundred times, and tried to learn some HLSL syntax, but I cannot figure out how to turn this idea into code. I have found some interesting stuff in other forums, but most of it deprecated. Since this is the best explanation I've read about how to do it so far, I've decided to ask here: can someone write an example of the pixel shader? Thank you in advance.

Greetings,

Aaron Contreras

SimonForsman

7,644

June 27, 2012 07:35 PM

[quote name='Lloyd040690' timestamp='1307423706' post='4820392']
Sorry about that, I'm referring to a bar similar to the teal bar in the thumbnail below. It starts on the right side, where it end in a small ball, and fills up along the black part all the way around the creature's head as your character's experience increases.

Thumbnail from The Witcher.

I'd like to clarify that the technique I described works for the shape(or any other irregular circle shape) provided in your example picture, not sure if that was clear from my previous post. Basically you use the angle gradient to get the right portion of the health you wish to display and then you mask pixels to form the shape you want.
[/quote]

And you don't have to use an angle gradient either, you can use a spiral gradient, linear gradients, or a custom drawn mask for some really wierd fill patterns.

Also, you don't have to use a pixelshader for it, you can place your mask texture as the alpha channel in the "fill" texture and use a fixed function alpha test.

[size="1"]I don't suffer from insanity, I'm enjoying every minute of it.
The voices in my head may not be real, but they have some good ideas!

6677

1,054

June 27, 2012 10:35 PM

Since this is the best explanation I've read about how to do it so far, I've decided to ask here: can someone write an example of the pixel shader? Thank you in advance.

Why not make your own thread, this one was dead a year ago

My New Blog

slicer4ever

6,773

June 28, 2012 12:01 AM

Hello everybody,

first of all, I must apology for posting in such an old topic. However, I've seen this article (and some others around the internet) a hundred times, and tried to learn some HLSL syntax, but I cannot figure out how to turn this idea into code. I have found some interesting stuff in other forums, but most of it deprecated. Since this is the best explanation I've read about how to do it so far, I've decided to ask here: can someone write an example of the pixel shader? Thank you in advance.

Greetings,

Aaron Contreras

i'm not certain about hlsl, but i imagine it shouldn't be too hard to get the idea from a glsl example, going off the second post, i'd draw a rectangle(or w/e shape really), and do something like so in shader:



uniform float Health; //Mapped health between 1-0, where 1 is full health, and 0 is none.

unifom sampler2D HealthTexture;

uniform vec4 g_Color; //global color(generally red for health)



in vec2 TexCoord;

out vec4 f_Color; //final output color

void main(){

   f_Color = texture2D(HealthTexture, TexCoord);

   if(f_Color.r<=1.0f-Health) discard; //discard the fragment if our health is too low, by doing 1-health(1-health so that we map from black->white in terms of loss health)

   //alternativly, instead of discarding, we could do some other color like black, it's up to you.

   f_Color*=g_color; //Now make it w/e color we want.

}

anywho, that's how i in vision it would be done.

Check out https://www.facebook.com/LiquidGames for some great games made by me on the Playstation Mobile market.

rip-off

11,000

June 28, 2012 01:35 PM

Please do not resurrect old threads. Feel free to create a new thread if you wish.

blog | twitter

Circular health bars

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Circular health bars

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines