Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (495)
Games in Android Showcase (114)
games submitted by our members
Games in WIP (563)
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 2784 times)
0 Members and 1 Guest are viewing this topic.
Online 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

Was I before Chuang Tzu who dreamt about being a butterfly, or am I now a butterfly who dreams about being Chuang Tzu?
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:
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:
http://imgur.com/Nj0eGpf

You can adjust the feather in Photoshop to make the line edge smoother or sharper. More info on triangle strips and lookup texture here:
https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Finger-Swipe#4-extrude-to-triangle-strip

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.

1  
2  
3  
4  
5  
6  
7  
//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:
https://github.com/mattdesl/lwjgl-basics/wiki/Shaders


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
Online 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?

Was I before Chuang Tzu who dreamt about being a butterfly, or am I now a butterfly who dreams about being Chuang Tzu?
Offline BrassApparatus

Junior Member





« 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  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

Dwinin (29 views)
2014-09-12 09:08:26

Norakomi (57 views)
2014-09-10 13:57:51

TehJavaDev (78 views)
2014-09-10 06:39:09

Tekkerue (38 views)
2014-09-09 02:24:56

mitcheeb (58 views)
2014-09-08 06:06:29

BurntPizza (45 views)
2014-09-07 01:13:42

Longarmx (30 views)
2014-09-07 01:12:14

Longarmx (35 views)
2014-09-07 01:11:22

Longarmx (36 views)
2014-09-07 01:10:19

mitcheeb (40 views)
2014-09-04 23:08:59
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org 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‑gaming.org
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!