So you can get a circle in a gui as an image. However I would wan’t to display only sectors of it. I wan’t the implementation to be simple. Not some complex library. It has to be performant also.
A solution came in my mind where you would divide the circle in to 4 sectors of 90 degrees. Then you would just check which of them are rendered. Then on the one which is partially filled you display only a part of it via Positioning some frame in a way where .ClipDescendants would only show a part of it.
So how would I create a system where you would be able to display only a sector of a circle. Also I wan’t it to be a simple implementation and one where you could implement animations without much lag. Also I would prefer it to be a system where you would use the .ClipDescendants property so you could have a complex background.
I am not exactly sure how I would implement this.
You could just make a frame, add another frame with UICorner with the size 1,0, and then just change the AnchorPoint of the UICorner frame. Add a UIAspectRatioConstraint to the first frame.
Yes. However I would like to display a certain sector with a set degree of the circle. If I do it via this static UI functionality it limits me with 0, 90 180, 270 and 360 degrees.
I don’t think it’s possible as when you rotate any UI object, ClipDescendants appears to stop working. The object only disappears once the AnchorPoint goes off of the object.
I came up with a solution that could work.
So at the 1/4th of the circle which is not fully filled you create a wedge Image frame with the background color of the GUI then you get the circles wedges size with either acos, asin or atan not sure exactly which one to use. Then we just set the frame of the quarter circle have .ClipDescendants and parent the wedge there.
And when the wedge is in the lat 10 degrees you would just render the quarter as full.
I am not exactly sure how could I animate this properly. Like with TweenService. I could use something like lerp to mimic tweens.
Not sure how could I implement all of this in practice
The best way to do circular progress bars currently is just using images, but if you’re clever enough with maths, you might be able to do this, or even use live-CSG in a ViewportFrame if you can get it to perform fast enough.
Well. I would not like to union thousands of times. And my script has to be as performant as possible. Somethings unions and vievports aren’t.
But the image thing is a really great idea. I think you have to use either math.acos math.asin or math.atan on an image label with a wedge as the picture.
You could also use parabolas to create a frame that clones itself and changes the size a little bit, I’m not super math savvy so I am not sure how you’d go about that though.
