How do i make a graphic health bar

0 favourites
  • 14 posts
From the Asset Store
Over 1700 16x16 pixel art RPG icons for item and skills
  • Hello all,

    I was discussing with my partner as to the direction we wanted to go with our game and we came to a consensus to avoid using numbers wherever possible. With that in mind, I was hoping you lovely people here on the forums could help with my dilemma.

    To cut a long story short, I was wanting to have a graphic show how much health the player has remaining, but I cant figure out how to attach a graphic to a variable. Basically we are shooting for a life bar similar to the ones used in the old Megaman X games. For instance, if the player has 20 health remaining out of 30 maximum the bar would show 20 horizontal bars out of a possible 30 bars. Any help on how to create a connection between the sprite and the health would be greatly appreciated.

    As a side note, we also want to have pick ups that increase the value of the maximum health too. So if someone knows of a way to simplify the graphic so that we don't have to keep replacing it that would be awesome as well.

    Thanks for the help,


  • When you update the score, do:

    HealthBar set animation "20"

    Have single animation frames in HealthBar for all the states you want to display.

  • Here you go..


  • Without having to use 30 different frames of an animation you could create 1 with all 30 heath slots then simply move the sprite backwards 10 pixels each time they loose a live. Hiding the front half behind another icon, or mask it off visually.

    Or make one health tick. Then add as many as needed each time you pick up health or loose heath


    On health added.

    • > loop for current health -> create health tick sprite at previous health tick + 10

    So if the player currently had 20 health points, it would loop 20 times adding another tick visually each time.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • While unfortunately I didn't have time to check back for replies last night, but I will check out the capx file in the evening when I get home tonight. Thank you all for the help and ideas, I greatly appreciate them!

  • Use a tiled background for the health bar. Have your little tick for one health bar as a single image and set it as the tiled bg. Then, have an event like

    • Every Tick
    • > HealthBar set Width to width of a single bar * Health

    If you want to have some empty space between each bar just put a bit of transparent padding on the sides and dont crop it in the editor.

  • Will using a tiled background work if I want to have a shield as well that regenerates over time? For example:

    If I want the shields to have a max amount that can regenerate, and I want to have health that does not regenerate.

    Shield 0 < X < max (Increasing by 1 every x seconds until max value.)

    Health 0 < x < max (Only increasing when a specific item is picked up)

    I get that if I set the width to x*(health variable) but what would I do if I have a shield graphic? Would it be as simple at the health bar with another line that makes the (shield variable) an increasing over time array?

    Again any discussion is appreciated, I still have a lot to learn on using Construct 2 as well as programming in general.

  • You could just use a solid green sprite and set the height to the value of health.

  • Is this what you're trying to do?

    You may also be able to use local variables for the shield sprite itself, i'm not sure which is more correct but hopefully this helps.

  • I will check out all the tips and capx files either tonight or tomorrow. Thanks again for all the support!

  • I made this for you. It has health and shield (with recharge)

  • I'm sorry EncryptedCow, but did you mistakenly not add what you were referring to? I don't see anything in your post to interact with.

  • Another idea for the shield bar, is if you have an actual visible shield sprite that surrounds the player, or something similar, you can adjust the alpha on the shield based on the amount of shielding they have, for example 50% shield means the players shield (I picture a bubble type shield around the player in this example) has a 25% alpha... so it is only 25% solid/visible... 100% shield would be 50% alpha (as I wouldn't want the shield to hide the player). Just a thought...

  • Thanks for the added tip BluePhaze, I will most likely be implementing something like that as well.

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