A lot of people, which tried to do bars, which visualise your health, stamina, durability of item and etc. on Roblox receive this problem:
End of green bar is RoUnDeD!?! But blue one isn’t. So, I’ll tell you most simple way to fix this.
- You need to prepare your progress bar:
- make background. In my example it dark red
- make display “frame” inside it, and set it’s size to {1, 0}, {1, 0}
- add UICorners to both of them
- Now, I need to say you that you DON’T need to change display frame’s size. Instead, you need add UIGradient to it.
- Why I need UIGradient? Because, we will use it to hide part of our display frame! UIGradients have Transparency NumberSequence, and with it we can change what part of bar will be hidden. Try to make it like:
And this will result in:
Tada! No anymore rounded corners!
But wait… How you did it so gradient is just hides part of frame but not makes it gradiently transparent? Because we set value like:
- 0 time = 0 transparency
- 0.499 time = 0 transparency
- 0.5 time = 1 transparency
- 1 time = 1 transparency
So, it makes frame gradiently transparent, but on very small piece: from 0.499 to 0.5, which isn’t noticeble. Other pieces have 0 and 1 transparency respectively.
Hm… what if I need to make vertical bar?
You will need to use Rotation property of UIGradient. Probably -90.
Note: Rotation set to NOT multiple of 90 will have bad outcomes.
Hope this was helpfull to you!
