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?