Reduce Health gradually / smooth ?

Post reply
0 favourites
From the Asset Store
Animated Counter
$3.99 USD
Make a displayed number gradually increase or decrease, making an impression of a real-time counting.
ForConstruct's avatar
ForConstruct

  • How can I make the health reduced by "Damage" (variable) smoothly instead of immediate result?

    Visual Example: (Street Fighter 2)

    If anyone don't mind sharing an example file and explain step-by-step how things are working it will be very appreciate since I didn't have a chance to do health-bar related things beside simple count without an actual health bar.

    If there is a plugin / behavior to make my life easier I'll be happy to check it out.

    Thanks ahead!

    Tagged:

  • I made this for another post:

    dropbox.com/s/tjowni4xr1fgkc9/Healthbar.c3p

  • Thanks for the quick reply and example! :)

    TBH - I don't understand any of it even that it's only 2 events...

    Maybe I should make a simple example so I can try implement it as "damage" variable = smooth amount in X speed.

    I guess that the dt is delta? which is probably related to the speed of how fast the health will drain, but still I only guess things for now.

  • HP is drained in the first event, 4 points at a time. In your game you'll of course have a different event for this.

    The expression for health bar width explained:

    lerp(Self.Width, 300*(hp/60), dt*2)

    Self.Width is the current width. 300 is the initial width (at full health). 60 is the maximum (full) health value. dt*2 is how fast the bar will react to health changes.

  • Thanks for the explanation!

    I'll try to re-create something simple and implement it on the way I would in the game using instance variables and such just to explore it and make sure I understand how it works.

    If there are other / extra examples related to this, I'll be happy to learn from different ways of as well, the more the merrier :)

  • You can also try Tween with different easing options.

    Every time the health changes (increases or decreases), restart the tween for healthbar width. End value: maxWidth*(currentHealth/maxHealth)

  • You can also try Tween with different easing options.

    Every time the health changes (increases or decreases), restart the tween for healthbar width. End value: maxWidth*(currentHealth/maxHealth)

    Oh nice! that sounds interesting, I never actually used tween yet... or the timeline for animating stuff, maybe it's a good time to try them out.

    Basically anything that is more "user-friendly" less math-formulas for my simple brain will be nicer :)

  • dop2000 so I created a simple example file (not the cleanest, but I visual it's nicer for me)

    I got pretty much most of the basics to work:

    I limit the minimum and max of the "current_HP" to not break the visual container.

    I didn't set the container to every thick, because I just want it to be steady as a HUD that won't change anyway.

    But Tween is where I got lost, since I try to get away from formulas (if possible) I tried this:

    End result to be: "Current_HP - Global_Damage"

    I also tried HP_Bar.width...

    -

    Is there a way to simplify it without the formulas? just wondering, if not.. I guess I'll have to "copy past" but I tried my simple-brain first.

    My Example File

  • That's very cool dop2000 thanks!

    I sure like using this Tween solution with the different ease modes.

    -

    I'm looking at the code, it makes more sense to me but I notice that you're using Min and Max

    also there is "0" at the end, Can you please explain a bit how it works?

    Damage:

    max(Self.Current_HP-Global_Damage, 0)

    Heal:

    min(Self.Current_HP+Global_Heal, Self.Max_HP)

    Thanks ahead! :)

  • max returns the largest of several numbers, min returns the lowest of several numbers. You can also use clamp(health, 0, MaxHealth)

    It's all in the documentation :)

    construct.net/en/make-games/manuals/construct-3/system-reference/system-expressions

  • Now for something related, but I guess it should be done differently but not sure how exactly:

    -

    What if I have a fixed width for animated health probably as Sprite (animated image sequence) and not Tiled Background.

    The width should be based on the fixed size of the sprite and somehow... reduce / cut from it, basically I don't want to stretch it using the width like with the Tiled Background, so what is the solution.

    I've created a quick ugly animated example (it seems like animating sprites in C3 is not a good idea)

    My Example File

    -

    If you don't mind please have a look and share your mind, I'll be happy to learn something new! hopefully it's not confusing as the math-formulas but I'm still curious.

  • Pretty cool, thanks dop2000!

  • Alon, you can cut the animated bar using a mask sprite with a blend mode. Change the mask width from right to left.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Thanks! that's sounds EXACTLY how I would do it as animator in my animation progress (not related to programming).

    I never used mask in C3 I'll try to found more about it in the documents.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)