Circular Health Bar

Game Mechanics
#1

In my libGDX game, I have enemies, as well as my player and I would like to make something a little different then the generic straight health “bar”. I would like to do something more like a health “circle”. Is there a class in libgdx that would allow me to kind of warp a straight image into a circle, but act as if width and height were still normal, so if I subtracted from the width, it would make the circle kind of spin back… Bad way to say it but you get what I mean I hope. Just imagine a health bar in a circle. Or would I have to use like 25 different images? Any suggestions? Thanks -cMp

#2

I (Myself) would do this the rather “Hard headed” way lol.

Have a BufferedImage (Transparent) with a circle (Your orb center color should be detected as transparent) cut / drawn out in the middle (Leave the corners there)
Before you render your Image render your “Filler” (A Rectangle the size of your Image) that’s colored in (E.G red filler: Health)

You should be able to do the rest from there to be honest mate :slight_smile: if not post back I’ll help if I can :>

#3

This came up a while ago on IRC. There are a couple ways, but here is one that should be pretty flexible:
http://www.java-gaming.org/?action=pastebin&id=589

This uses a triangle strip to create a thick line that is in the shape of a circle. If we just use full colors for the triangle strip, it will lead to aliasing (jagged edges). To solve this an easy solution is to use a lookup texture, like this:
Imgur

You can adjust the feather in Photoshop to make the line edge smoother or sharper. More info on triangle strips and lookup texture here:

The problem with this technique is that it doesn’t scale perfectly. If you need accurate scaling you can use a fragment shader (GLES20 only) for the anti-aliasing. What I might do is give the outer-most vertices a texcoord of 1.0, and the inner-most vertices a texcoord of -1.0. Then, in the fragment shader, you can use abs() to ensure that the gradiation goes from 0.0 (outer edges) to 1.0 (inner edges), and determine the smooth factor using that.

//the mirrored gradient in the range 0.0 to 1.0
float aa = 1.0 - abs(vTexCoord.y);

//the exact smooth amount
vec4 color = vColor; //vertex color
color.a *= smoothstep(0.0, smooth/thickness, aa);
gl_FragColor = color;

You could play with the “smooth” uniform for a softer line. I’ve found a value of 2.0 to work well.

Further reading:

Also note: ImmediateModeRenderer doesn’t flush the batch for you; so make sure your batch size is large enough to fill all your vertices, or manually batch it if you reach the cap.

If you have questions just ask, it’s a bit of an advanced topic… :slight_smile:

#4

Thanks for the replies, but looking at all this I think I am going to go for just a regular health bar :wink: unless anyone has suggestions for a more unique one?

#5

I think it’s a fantastic idea personally! Anything to make your project stand out is worthwhile. I would imagine that these guys have provided the best solutions but my first thought was to make a circular image and simply render something over the parts that are missing. Rotate the “cover image” over the circle as it depletes. Hope that makes sense :slight_smile: