Rotating a TextureProgress Bar's Progress

[j.mye]

Godot 4.2.1

(Not shown in runtime but you can see how the progress bar depletes without an angle)

Question: I am attempting to design a health bar right now and would like for the progress section of the TextureProgress Bar to fill/deplete at an angle. I saw a suggestion to rotate the health bar in Aseprite (my pixel art app), and then rotate it in the editor as well so the fill naturally is angled. However, doing this just angles the entire UI instead of just the progress bar. Any way around this? Thanks so much.

[Calinou]

The easiest way to do this would be to use Node2D’s Skew property with a straight texture, but Control (and therefore TextureProgressBar) does not have a Skew property.

Alternatively, use a ProgressBar node (not TextureProgressBar) with a StyleBoxFlat which has a built-in skew property. This is suited for flat design skewed progress bars, but not if you want a detailed texture on them.

I suppose you’d have to use a shader on the TextureProgressBar node for now. Something like this:

2D Cast shadow - Godot Shaders