Incrementally filling/draining bars

Hello! I'm making a side-scroller that uses the following health bar (as an example):

<img src="http://i.imgur.com/yMjran3.png" border="0" />

Here it is at full health. When the player takes damage, it goes down one notch, like so:

<img src="http://i.imgur.com/eEKWGTl.png" border="0" />

The way I do this is by setting a "health" variable for the player because they can only take a maximum of four hits. I have a set width for the color inside the bar, a separate object called "healthbar_color", for each increment from 4 to 0.

My question is, how do I make it so that it doesn't just jump from one width to the other? Here is an example of what I want it to look like that I made in Photoshop:

<img src="http://i.imgur.com/mtsNibx.gif" border="0" />

Ideally, when the player loses 1 health, the bar will slide down to the next notch. Anyone out there able to help?

Maybe try something like this:

+Always

->Set playerhealthbar.width to

clamp(playerhealthbar.width - 1, (player.value('health') / 100) * playerhealthbar.value('maxwidth'), playerhealthbar.value('maxwidth'))

That should work (assuming player has 100 as health max) <img src="smileys/smiley1.gif" border="0" align="middle" />

I don't know if this will work. Set two variables, OldHP and HP, if OldHP is greater than HP then every X milliseconds subtract 0.1 from OldHP. And set the hp bar's width to OldHP.

Ha, jayjay's method is better and simple.

Maybe try something like this:

+Always

->Set playerhealthbar.width to

clamp(playerhealthbar.width - 1, (player.value('health') / 100) * playerhealthbar.value('maxwidth'), playerhealthbar.value('maxwidth'))

That should work (assuming player has 100 as health max) <img src="smileys/smiley1.gif" border="0" align="middle" />

<img src="smileys/smiley3.gif" border="0" align="middle" /> Holy diver! I dunno what kind of arcane tome you had to decode to come up with that but it worked like a charm. I was even able to modify it a little to get it to incrementally refill when the player heals. Thanks!

Though... I have no idea WHY it actually works. A brief explanation of what any of that actually means would be very much appreciated. <img src="smileys/smiley36.gif" border="0" align="middle" />

+Always

->Set playerhealthbar.width to

clamp(playerhealthbar.width - 1, (player.value('health') / 100) * playerhealthbar.value('maxwidth'), playerhealthbar.value('maxwidth'))

--

This will always set hpbar.width-1 every ticks.

But if you only set this the hpbar will decrease continuously. So use the clamp to set the max and min hpbar.width value.

Clamp(Value, Lower bound, Upper bound)

Lower bound = hpbar.width you want it to be. You change this value the hpbar.width will -1 until this value. And hpbar.width-1 will stop when hpbar.width hit this value. This value is controlled by player health.

Player get damaged -> the lower bound changed -> hpbar.width start to decrease.

Maybe try something like this:

+Always

->Set playerhealthbar.width to

clamp(playerhealthbar.width - 1, (player.value('health') / 100) * playerhealthbar.value('maxwidth'), playerhealthbar.value('maxwidth'))

That should work (assuming player has 100 as health max) <img src="smileys/smiley1.gif" border="0" align="middle" />

I cant get to work keep getting syntax errors <img src="smileys/smiley18.gif" border="0" align="middle" />

SquareMation Ah are you trying to use it in C2?

SquareMation Ah are you trying to use it in C2?

yes

SquareMation Okay C2 will use this syntax:

+Always

->Set playerhealthbar.width to

clamp(playerhealthbar.width - 1, (player.health / 100) * playerhealthbar.maxwidth, playerhealthbar.maxwidth)

This is due to variables in CC working as "Object.Value('VariableName')" and C2 is just "Object.VariableName"

Make sure to add Health as variable to player, and MaxWidth as variable to health bar object <img src="smileys/smiley1.gif" border="0" align="middle" />