Help with healthbar depletion (Kingdom Hearts 2 style)

[OblivionSkull21]

This question may seem a little confusing so I'm going to try to explain as best as I can.

I've started making healthbars for my battle system by using draw_healthbar(). I've got it working fairly well. When the enemy is hit, their health gradually drops like so:

However, for stylistic purposes, I'd like to do something along the lines of Kingdom Hearts 2's health depletion, where the health that has been taken away turns red and gradually fades like so:

Now, I've got the red to pop up and then turn to gray after some time has passed (no fade yet, but I can just use merge_color() to accomplish that). The problem, is that the red is taking up ALL of the background of the health bar and not just the health that it is being taken away from. Here's an example if it helps to understand what I'm saying:


The problem is that I don't want the red to take up the whole background but rather start just from where the green ends like how KH2 does it.

I'm using draw_healthbar() where the background color starts as gray, turns to red when depletion is triggered, and then turns back to gray after some time. I've come up with an idea but don't know how to accomplish it.

Basically, I want to draw a red rectangle for the depletion instead, over top of the health bar. This would require I know the exact x coordinates of where the green bar/remaining health stops and where it's destination will be when it finishes depleting. I would have the health bar's background ALWAYS be gray.

Here's what I have for the health bar code, without that idea implemented:

pc = target_hp/target.starting_hp*100; //current hp divided by the amount they started with scaled by 100
draw_healthbar(x+start_x,y+start_y,x+end_x,y+end_y,pc,color,GREEN,GREEN,0,true,true); //draws according to the enemy's x and y coordinates

 

[Nidoking]

You just need another variable to store where the health was before they took damage.

 

[OblivionSkull21]

You just need another variable to store where the health was before they took damage.

The problem is that, the way the health bar is set up, it's ALWAYS the same size. The green is just the amount remaining and not the health bar as a whole. I need to determine where the green ends and not the whole health bar

 

[nacho_chicken]

The problem is that, the way the health bar is set up, it's ALWAYS the same size. The green is just the amount remaining and the health bar as a whole. I need to determine where the green ends and not the whole health bar

It doesn't matter what size the health bar is. If you want the red to not take up the whole background, it needs to end somewhere--and that somewhere is exactly where the enemy's health used to be before taking damage. That's why you need to store that value. It's fairly easy to figure out where the green begins and ends, but now you are able to figure out where the red bar ends.

EDIT: If you want to do anything more complex than "single-colored bar over any single-colored background" you need to ditch the draw_healthbar() function. It's made for quick and dirty healthbars and has just about zero options for customization.

 

[OblivionSkull21]

I figured out the solution.

I kept the original code for the health bar that results in the last GIF, where the red takes up the WHOLE background and not just the part being depleted.
To counteract this issue, I drew ANOTHER health bar on top of that which acts as the reverse of the actual health.

For example, if the actual green health bar has 25% remaining, the second gray bar will be 75% full.

Originally, I was having an issue because the gray bar would increase as the green one decreased, causing the red to be hidden. To fix this, I have the gray bar ONLY increase once the red has disappeared.

It's confusing but here is an example of it in action:


So basically, the green is its own health bar with a red background while the gray is also its own bar that INCREASES but only changes value once the red has vanished. To make the red vanish, I used merge_color(RED,GRAY,amount) and then just increased the amount from 0 (fully red) to 1 (fully gray) once it's time to fade.

 

[Nidoking]

You're going out of your way to make this really complicated.

You store two variables: current health and old health. Also, the total health, but depending on your system, that may not need to be a variable. You calculate the lengths of the green and red bars from those. Then you draw a green rectangle from the left end to current health, a red bar from there to old health, and a gray bar for the rest. You can get a simple effect by sliding the red to the left until it's gone, or do what you've got up there and store yet another variable to track where green meets red and slide that until it hits current. I guess there's nothing wrong with what you've got per se, but your determination to use draw_healthbar is getting in the way of doing things sensibly.