"Animated" health bar

I would like to have a health bar "animation" effect. But because the health bar design is somewhat complicated (basically it has an exterior design), my initial idea to relate the health bar to a variable hp was to have two sprites, one was 100hp and one was 0hp. I then overlay those in the layout view (100hp in front of the 0hp), but now I want to try and make it so that the code will crop the full hp bar, revealing the 0hp bar underneath slowly as you lose health. Is there a better way to do this? If not, how do I make this cropping idea work? I couldn't find a way to do so.

Here are two options.

I often use the “tween” behavior to change the size of the health bar.

fex.net/s/a4tnnzy

Ah I see, how would I make this work in typescript? I can't figure out how to do `lerp`

The option using `lerp` linear interpolation is not very good, as it requires performing this action every tick even if the health parameters have not changed. If you don't know how to do this in TS, you can simply subtract half a pixel from the length until it becomes necessary; this is not visible to the naked eye.

But it would be better to use “tween” only when necessary during health loss.

the way I did it was just to have an instance variable called "health" that was tied to the player sprite, set the origin point of the health bar all they way left, set width to the instance variable, and made it so that when the player got hit or smth, the instance variable went down.

P.S. no clue if you'll use this, but I still hope it helps!

The option using `lerp` linear interpolation is not very good, as it requires performing this action every tick even if the health parameters have not changed. If you don't know how to do this in TS, you can simply subtract half a pixel from the length until it becomes necessary; this is not visible to the naked eye.

But it would be better to use “tween” only when necessary during health loss.

I got it working with your lerp idea! It seems really cool. When you say not very good do you mean performance wise?