UI rounded border fill

Hello everyone :wave:

I’m trying to implement a timer in my game the same way as in UNO :

I tried to implement it with two images + Mask + fill, but it doesn’t look good as the end of the border is inclined :
img

I also tried Line renderer but I had difficulties to draw rounded corners in Editor.

so I feel that there are tutorials for this but I’m not using the correct keywords to find them, so if you have an idea how to do this or a tutorial explaining it I will be so thankful :pray:

That’s an interesting problem.

I see what you’re trying to do: keep the end perfectly perpendicular to the edge at any given point: flat along the flat parts, then curving where the curve goes.

I don’t think you can get that with the built-in UI stuff, or at least an obvious way doesn’t just occur to me.

While it is definitely an advanced topic, you can actually make your own UI geometry (eg, write code to do it) so that it “plays nice” with everything else in your UI.

You could synthesize the points going around to generate a nice curved smooth line. If you want lots of example code to start from, check out the community-supported UI extensions project:

Another idea is the Shapes package by Freya Holmer, but it is paid:

There was Vectrosity but it looks like it isn’t supported anymore:

thank you for detailed explanation ! I guess I need that Shapes package

I just had a random idea of the whackiest wildest weirdest way you could accomplish this with the existing UI package and a LOT of little tricky code.

First you put four circle fill images at the corners.

Then you put four linear fill images at the edges.

Then you have code to perfectly fill each circle, edge, circle, edge, circle edge going all the way around until you’re 100%.

It would be a CRAZY amount of noodling to get that right, but it would work I think…

Like this, where the “fills” are shown by translucent black on top of your image above:

corners2

You laugh but I’ve worked on games with constructs this wild and crazy… when the boss says “GET THIS WORKING NOW!”