I frequently want to create progress bars that have rounded corners. However, when the progress bar is really tiny, this creates an ugly effect because the corner radius scales according to the smallest corner radius that will fit within the smallest axis of the parent GuiObject’s size.
Ugly scaling with a small bar:
How the bar normally looks:
It can be pretty difficult & annoying to fix this using code, as it requires wrapping the visible bar in an invisible ClipsDescendants=true container, then manually maintaining the visible bar’s size to match the desired size of the progress bar.
It would be really nice if we could have an easy way to get UI corners to look nice in this scenario.
Unfortunately that’s no different from the ClipsDescendant solution, and I also avoid using CanvasGroups because they make things look ugly and have weird failure cases.
If you want to keep a “rounded” look even at 0% (or close to it), you shouldn’t be starting from empty anyway. The more common (and arguably “correct” design) is to set the starting size to be a square:
And I’m assuming you want it to also scale relative to the longest axis, but that’s probably not going to solve your issue due to the fact that scaling on the longer side means that:
the result will be asymmetrical (will the curve be on the left or the right?)
you would have to manually determine and adjust when the longer side changes axis
There are many different designs you can consider (green = 0%, blue = some percent close to 0):
No. It makes an empty bar look like it has stuff in it.
There are different ways people may want to orient a rounded corner, so yeah it’s not automatic. This is something the API can solve easily though by providing an option to choose which side.
“Straight method” is my preference here. It’s the simplest and most sensible way of getting exact curve matching on the “edge side” (e.g. the rounded left side) and accurately maintaining the exact bar size on the “bar side” (the right side).
this doesn’t exactly fix your case (as the bar loses its roundedness as it moves away from the edges) but i use a uigradient to represent bar progress. It’s really simple and all that gets manipulated in runtime is a vector2 (uigradient.offset)
