Clockwise greyed out cooldown animation

Clockwise greyed out cooldown animation

Hi there,

In my app I have certain skills with cooldowns after using them.
I want to visualize the cooldown like shown in the video I linked below. So the skill icon is greyed out, but it gets it color in a clock-like movement.

Does anybody know how I can realize this with Cocos Creator?

Best regards

Sample video:

As you can see, I used two sprite nodes with the same image, one of them greyed out with radial fill type. Then I just changed the fillRange in my update function if the skill was on cooldown.

Thanks to you all!



looks like something suited for a shader.



I think a shader would suffice here too.

There are many ways to do this in pure javascript too, your needs depending:

1 Like


You do it with a parent black sprite with type: FILLED and play with the radial type & a child sprite with the colored one.

1 Like


Ah 2 sprites. This is also an interesting idea. Thanks for sharing.


closed #6

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