Progress bar: Diagonal fill amount

[m_dg_be]

Hi everyone,

I am trying to implement a progressbar that has a cut side, like the ones in the Borderlands games:

For the health of the player (as well as the shield, gun ammo and grenade ammo) they have the progressbar with a diagonal cut, even when it’s only partly filled.

There are plenty of tutorials video’s online on how to create a progressbar and i have followed them to use the fill amount of an image sprite (which has a diagonal cut), but when i adjust the fill amount (to for example 0.5), it becomes a straight vertical line. I can’t seem to find any resources where they use a diagonal or different fill method that would work in this case.

The following screenshot shows a progressbar that’s on 0.5 and one that’s at 1. Is there a way in Unity to fix this?

[VoidPhoenix96]

Try masking the progress bar with that shape.

To do this, make a shader on the progress bar that has an image of the desired shape, whatever you want to be visible, make it white, and invisible, black. Hope this helps.