Making a circle cooldown gui

Help and Feedback Scripting Support
#1

Hello. I was wondering how do I create a moving down frame over the circle gui frame to show the cooldown of an ability. Turning on the clips descendants for the parent circle frame doesn’t work, because it’s still considered as a square, so how do I do something like that?

Any ideas are appreciated!

4 Likes
#2

You have to use Tween Service

#3

I think you can use a UIGradient to simulate this idea. Create the gradient you want with 2 colors (color to use as the fill and the color to use as empty space)

Then change its Offset to get it to appear correctly. It uses scale for offset, so an X offset of 1 means the full length of the circle, .5 is half, etc.

2 Likes
#4

Thank you for the idea, but it doesn’t look as I wanted. At least in my case. Maybe there’s a way of doing it using another frame?

#5

I provided a solution to a question that seems applicable here too. It is using UIGradients as @C_Sharper suggested, but it’s not what you’re looking for? Seems the correct effect. Check it out:

#6

Use TweenSize

Put the cooldown frame inside of that black round circle, and make it’s size {1,0,0,0}.
Here’s a script I made for you (Should be a child of the cooldown GUI):

-- Whenever the cooldown starts this happens
local cooldown = 1 -- Change this to the cooldown 
script.Parent:TweenSize(UDim2.new(1,0,1,0), "In", "Quad", cooldown)

You can also make it’s transparency 0.5

#7

Thank you for the idea, but the frame goes out of the circle because the tween doesn’t do it properly

#8

Thank you, the transparency did the job!

1 Like
#9

Nevermind, it is already solved :sweat_smile:

#10

You can still share the idea, maybe it’s possible to do it in your way too

1 Like