How to clip circular ui elements

Im making a UI for my new game and was wondering if it was possible to clip this specific part of the UI. The part Im trying to clip is the bar part of the charge frame. The charge frame has a roundness of 1 so its a circle, however its “hitbox”/“render zone” is still a square which means it wont clip the bar part of the charge (the blue square). Is there anyway to have it clip all the unneeded parts of the blue square?


Below is the desired effect using a circle instead of square however this has to be a square due to the fact that this bar needs to scale vertically based on how much charge a player has left, a circle wont scale evenly.
image

Now that i have re-read the topic, you can’t make the round UI ClipDescendant the same shape, you have to work around it like in this example
CircularProgressBar.rbxl (16.5 KB)
or this one
circularFillcharge.rbxl (31.2 KB)
Got those off some other thread, don’t really remember where exactly.

1 Like

I ended up making a 4th circle using paint(dot)net. You can make the circle white and using the image color option to change the color if you desire. To change the size of the bar just rotate the circle to reveal whats under it, giving the illusion that its shrinking. If you were to have some circular element in the middle of your screen you can probably use clip descendants to hide the extra part of the circle that gets rotated.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.