Issue with StatusBar orientation vertical
 

Hi everyone!

I am trying to create a simpler UI in the style of Azerite UI (which is why I am borrowing some assets from them for now, until I get the logic working. No point in making art if I fail at coding..) but I am facing an issue.

Please take a look at this screenshot:


They both are technically "StatusBar"s. The MP orb is set to orientation="ORIENTATION_VERTICAL", whereas the HP bar is left at default, which seems to be horizontal.

When I call SetValue(75) on each of them, the orientation clearly works, but now comes the issue:

The bar clips the texture at the correct point. This is what I expect and want.
The orb, however, squishes the texture instead of clipping it. This is NOT what I want. I want a cleanly cut off, undistorted orb, with a sharp edge at the top.

Is there anything I can do to fix this?

I've been looking for a way to rotate the entire orb by 90 degrees but I wasn't successful.

Any ideas?

You may have to do it the other way round: Putting a black rectangle above the unchanged orb.

By the way: the orb does not look bad that way.

Thanks! That is actually a great idea! I also thought about creating several images with different fill heights, so to speak. Should I use a sprite sheet or make them separate if I were to go that route?

I have no idea what the limitations are and what performance would look like when doing that..

I also thought, that i looked okay, but when you go below 50 or so it starts to look horrible. :D