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:

Solution:
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: https://kimmobrunfeldt.github.io/progressbar.js/

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.

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