- Home /
Progress bar: Diagonal fill amount
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?
Answer by VoidPhoenix96 · Aug 12, 2021 at 11:35 PM
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.