Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (788)
Games in Android Showcase (234)
games submitted by our members
Games in WIP (862)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Circular Health Bar  (Read 9535 times)
0 Members and 1 Guest are viewing this topic.
Offline Slyth2727
« Posted 2013-06-04 00:13:05 »

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
Offline GabrielBailey74
« Reply #1 - Posted 2013-06-04 00:30:12 »

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 ^_^ if not post back I'll help if I can :>

Offline davedes
« Reply #2 - Posted 2013-06-04 00:32:36 »

This came up a while ago on IRC. There are a couple ways, but here is one that should be pretty flexible:

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:

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.. Smiley

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Slyth2727
« Reply #3 - Posted 2013-06-04 00:39:32 »

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?
Offline BrassApparatus

Junior Devvie

« Reply #4 - Posted 2013-06-04 01:59:20 »

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 Smiley
Pages: [1]
  ignore  |  Print  

hadezbladez (2166 views)
2018-11-16 13:46:03

hadezbladez (818 views)
2018-11-16 13:41:33

hadezbladez (2138 views)
2018-11-16 13:35:35

hadezbladez (421 views)
2018-11-16 13:32:03

EgonOlsen (3459 views)
2018-06-10 19:43:48

EgonOlsen (3687 views)
2018-06-10 19:43:44

EgonOlsen (2276 views)
2018-06-10 19:43:20

DesertCoockie (3005 views)
2018-05-13 18:23:11

nelsongames (3085 views)
2018-04-24 18:15:36

nelsongames (3903 views)
2018-04-24 18:14:32
Deployment and Packaging
by philfrei
2019-02-17 20:25:53

Deployment and Packaging
by mudlee
2018-08-22 18:09:50

Java Gaming Resources
by gouessej
2018-08-22 08:19:41

Deployment and Packaging
by gouessej
2018-08-22 08:04:08

Deployment and Packaging
by gouessej
2018-08-22 08:03:45

Deployment and Packaging
by philfrei
2018-08-20 02:33:38

Deployment and Packaging
by philfrei
2018-08-20 02:29:55

Deployment and Packaging
by philfrei
2018-08-19 23:56:20 is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!