How to make an dynamic health bar?

From the Asset Store
Create your quiz game! Create unlimited categories. Manage categories and questions
  • Ay bois, so, in my game, i want an health bar, that i can make in every width ( not only, set the width to player's health ), like the width being 500 but, the health of the player just being 100, and, the width scalling with the 100 HP. If you know how to make a health bar like i said, or, the health bar of the video below, please, tell me!

    Video: youtube.com/watch ( He's at the right time )

  • Bar set width to 500*(Player.health/100)

  • Bar set width to 500*(Player.health/100)

    Lmao didn't thinked that simple math, but, thanks anyway.

  • Bar set width to 500*(Player.health/100)

    Hey bro, do you know how to drain the health bar when the player got hit? Like in the video?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • You mean gradually? Try lerp:

    Bar set width to lerp(self.width, 500*(Player.health/100), dt*2)

  • You mean gradually? Try lerp:

    Bar set width to lerp(self.width, 500*(Player.health/100), dt*2)

    Thanks, it worked!

  • You mean gradually? Try lerp:

    Bar set width to lerp(self.width, 500*(Player.health/100), dt*2)

    I know it's Construct 2, but I'm doing something similar with the bar (in Construct 3). I used the progress bar but apparently I can't customize it, so I've used a tilemap like suggested in the website.

    Now I've found this and thankfully the lerp function is what I had in my mind, only logically speaking.

    But it's not working well in my case.

    The character drains energy graudally. There is a global variable called HealthBar with the value of 60. Each second, you lose 1 point, until it reaches 0.

    I tried to make the function for the bar.

    lerp(Self.Width, Self.Width(HealthBar/100), dt*2).

    And I tried experimenting, changing variables etc, but it doesn't work well.

    For example, when HealthBar reaches 0, the bar is still decreasing. You have to wait the HealthBar goes to -60 to see the bar empty.

  • Change the expression like this:

    lerp(Self.Width, 500*(HealthBar/60), dt*2)

    Where 500 is the initial full width of the bar, and 60 is the maximum initial health value.

  • I'm not at home so I can't accurately talk about the function, but I've already tried your suggestion and it didn't work.

    The bar goes too slow and when the value reaches 9, it's still not completely empty.

    The bar is about 362x14 (yes I tried changing 500 with 352), but like the author of the topic, I'd like that it's scalable like with the progression bar offered by Construct 3. This is why, in the (b) function, I've added Self.Width instead of the 362.

    If I can I'll show you on phone a recording of the two bars (the one I made and the one from Construct 3).

    EDIT1:

    Here's the first video

    drive.google.com/file/d/1isNUmKF81RhwjRmz199BFW6e6XQdBJ39/view

    This is with the function I showed you. The next is with the function you told me, except for the change of size (362 instead of 500)

    drive.google.com/file/d/1itaD0W9d8s1f-MaCHtaPd2P-zuVmyIUL/view

  • For lerp effect to work, it should update on every tick.

    See this demo:

    dropbox.com/s/tjowni4xr1fgkc9/Healthbar.c3p

  • For lerp effect to work, it should update on every tick.

    See this demo:

    https://www.dropbox.com/s/tjowni4xr1fgkc9/Healthbar.c3p?dl=0

    Sorry for the late response. I've added the function on every tick and now it's working as you said, which is cool!

    But still, I think it's a awkward. By looking at the videos you can see the bar takes too long to reach the end, especially when it's near to 0. I wonder why.

    That said, thank you so much for your help, as always, you're very helpful and I hope this project of mine will finally show up in the future!

  • If you want the bar to react faster, change the last parameter in lerp, for example dt*10

    Or if you don't need the lerp effect at all, you can simply set bar width to OdiginalWidth*(CurrentHealth/MaxHealth). And you don't need to do it on every tick, only when the health changes.

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