Godot 4.1
I’m trying to create a healthbar for my game with the effect like what is shown in this image.
First, go to the visibility section and make the sprite mask completely orange, and then reduce its alpha to make it a little transparent.
Are you sure its the front node that isn’t showing?
In my testing when I set the back node to clip-only then it will only show the front node.
I am wondering what the idea is here.
I am thinking that you will shorten the front image width as health depletes. Is that correct?
What image is the mask and what will the mask do as health changes?
Yep, the bright orange area shortens as health depletes.
To clarify, the back sprite is the background for the healthbar, and the bounding region for the healthbar (so all the other sprites can’t go outside that area).
The mask sprite isn’t meant to be shown, and only serves to cut the front sprite to have the effect I’m trying to achieve.
I hope this clarifies things!
I’m not quite sure what you’re trying to do? Could you please clarify?
i mistaked . you just need to this node:
I couldn’t find a way to make it work using sprites and clipping as a mask.
I agree with zoopira that a ProgressBar is the better route.
Since you have it angled you can’t just go with a background and fill color.
Set the theme overides for background and fill to StyleBoxTexture and either drag sprites in or if they are in a single spritesheet use an atlas.
The sprites should be a flat color without the vertical lines and border.
For that you will use a separate sprite containing only the vertical lines and border and everything else transparent.
I managed to get this to work perfectly but I am not sure I am explaining it well.
Maybe there is a better way but if you would like me to post an example project I will.
I didn’t realize the progress bar node exists because I’m sorta new to godot. This helps a lot though, an example would be appreciated. Thank you 
I have uploaded a small project here.
Thank you so much for the example, but is there a way to fix this weird jump between values 0 and 1 in your example project?
In my example I use a variable to make the jump larger and more noticeable.
In the script you will see the variable speed = 3.
Just change that to 1.
I meant to say that at value 0, the bar is completely full, but at value 1, it jumps to the second notch, and then all the consecutive values are only small increments.
