How do I keep health bar width constant?

  • I want to make health bar like a RPG games, or like other games, it's familiar (Dota/ Tera /Zenonia).

    So far I'm using set width but this is not what I want

    youtube.com/watch?v=DFUrc6eNsIg

    So if I use this tutorial, if my max hp player larger than layout, it's become bad.

    All I want is keep the width, no matter how much I add number of HP.

    I need some advice.

    Sorry for my english and thank you for your help.

  • You can use percent instead. So the length of the green health bar is 100% when its full and if you get hit you subtract the amount from the health bar in percent.

    So if your HP is set to 100 and you get hit by an enemy causing -10HP you subtract 10% of the length of the bar.

    And when you're high level and your HP is set to maybe 1000 and you get hit by the same enemy causing -10HP you only subtract 1% of the healthbars length.

  • So in case Anon's response wasn't clear for how to do that, you should set the bar's width to (current health/max health)*maximum length. You can also get fancy and use lerp or some other operation to make it smoothly change there. So, for instance,

    Set width to lerp(self.width, (current health/max health)*maximum length, 5*dt) where 5 would generally change how quickly it gets there.

    I've attached a quick example of how to do it. I changed the green bar to a Tiled Background object so that it won't get the blurred edges you get from stretching out a sprite.

    [attachment=0:3hxpbx18][/attachment:3hxpbx18]

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • You can use percent instead. So the length of the green health bar is 100% when its full and if you get hit you subtract the amount from the health bar in percent.

    So if your HP is set to 100 and you get hit by an enemy causing -10HP you subtract 10% of the length of the bar.

    And when you're high level and your HP is set to maybe 1000 and you get hit by the same enemy causing -10HP you only subtract 1% of the healthbars length.

    So in case Anon's response wasn't clear for how to do that, you should set the bar's width to (current health/max health)*maximum length. You can also get fancy and use lerp or some other operation to make it smoothly change there. So, for instance,

    Set width to lerp(self.width, (current health/max health)*maximum length, 5*dt) where 5 would generally change how quickly it gets there.

    I've attached a quick example of how to do it. I changed the green bar to a Tiled Background object so that it won't get the blurred edges you get from stretching out a sprite.

    Thank you for help guys,

    @C-7 I can't open your project because mine older version.. But set width with lerp is a new lesson for me. It's really cool. I had change my project. please check if it's the same thing.

  • Yeah, that looks pretty similar. Here's a screenshot of the event sheet: (relatively large image). I simplified things somewhat from how you had it, particularly the start of layout event and the "every tick" one at the bottom. I also changed the values applied by the buttons just for ease of testing.

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