Custom Health Bar?

This forum is currently in read-only mode.
  • Hello. I was wondering if there was some way to create a health bar or some sort of curved image to use as a health bar. Something like this:

    <img src="http://2.bp.blogspot.com/__A5dgh3P_-g/TQDVfgtnQGI/AAAAAAAAAFI/D51y04H_kmc/s1600/kingdom_hearts_2_1.JPG" border="0" />

    I'm trying to create a health bar similar to that used in Kingdom hearts 2. I'll be using custom graphics of course but I was wondering if such a thing was possible. I'd also like to be able to extend the end of the bar so that it behave likes a normal health bar, only that it curves around an image or whatever in a circle fashion like in the above image.

  • Is that Stitch? Where is Lilo?

    But yeah, that kind of radial health bar is tricky. There is no simple way to achieve it. You could fake it with sprite animations, but well, it would go in "steps" rather than gradually.

    Oh wait, now that I look again, this is for Construct Classic. Perfectly possible with sprite distortion/displacement. But that's beyond the scope of my modest understanding.

  • There are a few ways you can approach this....

    1. If you wanted to make just a bar you could use the progess bar object and have it where each time your character sustains damage the bar goes down a certain amount.

    2. You could also make a bar by using animation frames that disappear revealing a bar with less length underneath it each time the character is damaged. Or, instead of doing a disappearing approach, you could take a sprite object and put several frames into the animator, then have each frame correspond with the damage the character receives.

    3. Another thing you could do is make a bar out of a single sprite, and each time the character is damaged you could decrease the length of the bar.

    4. As for making a curved health indicator, you could do any of what's mentioned in #2.

  • I should also mention that you'll need to use either a private or global variable (your choice) to keep track of the characters damage. I'll try to make an example for you when I get time, unless someone else beats me to it.

  • Here ya go: Radial_Health_Example.cap

    I'm sure it can be improved if you spend some time with it.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I've got to say that this forum and community is amazing. Thank you so much for the replies and the example caps.

  • Here ya go: Radial_Health_Example.cap

    I'm sure it can be improved if you spend some time with it.

    Alright, this one is near perfect. I have one question though. Is there any way to continue along a specific angle after the angle reaches 270? I sort of want to continue to extend the bar along that angle. If I set the angle to 0, 180 and such, the entire sprite turns to that angle but I want to retain the previous curvature of the bar.

  • I've figured it out. Sorry for triple posting. Here is the final result so that others who might want it can use it.

    http://dl.dropbox.com/u/54897686/Radial_Health_Example_Final.cap

  • And now with colors!

    http://dl.dropbox.com/u/26932498/hp.cap

    When it goes below a specific number, it changes the color :P

  • anyone have .capx of this ? I can't open in constuct2             <img src="smileys/smiley5.gif" border="0" align="middle" />

  • A version for C2 would be great!

  • SquareMation Bl4ckSh33p

    I took a look in the Cap file and it's pretty much exactly how you would code it in Construct 2. You can grab the free/open source Construct Classic from the link in my signature and port it over.

    However, if I get time I'll try and port it to C2 and post it here too.

    Edit: Re-created the Cap by zyblade into Construct 2 here: https://dl.dropboxusercontent.com/u/4714446/KH_HP.capx

  • SquareMation Bl4ckSh33p

    I took a look in the Cap file and it's pretty much exactly how you would code it in Construct 2. You can grab the free/open source Construct Classic from the link in my signature and port it over.

    However, if I get time I'll try and port it to C2 and post it here too.

    Thanks for sharing this for C2, but it uses huge amount of cpu. I've also tried changing things, disabling changing colour, etc. but it didn't fix. Do you know any idea why is that cpu usage? (About 30% and reduces fps)

    Also in debug, number of slices change every frame where it shouldn't. I guess problem has something to do with that.

  • Thanks for sharing! I will take a closer look when I am back home.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)