Nanfeng

Notes on software development, code, and curious ideas

Creating a Radial Skill Cooldown with ProgressTimer

In
Wrap a sprite in a radial ProgressTimer to display a clockwise or counterclockwise skill cooldown.

Environment: Cocos2d-x 3.17
Language: Lua

Radial progress indicators are commonly used for skill cooldowns:

1
2
3
4
5
6
7
8
9
10
11
12
function createSkillCooldown(parent)
    local sprite = cc.Sprite:create("skill.png")
    local progress = cc.ProgressTimer:create(sprite)

    progress:setMidpoint(cc.p(0.5, 0.5))
    progress:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
    progress:setReverseDirection(true)
    progress:setPercentage(100)

    parent:addChild(progress)
    return progress
end

setReverseDirection(true) reverses the radial direction. Animate the percentage from 100 to 0, or from 0 to 100 depending on the overlay artwork and desired visual:

1
progress:runAction(cc.ProgressTo:create(cooldownSeconds, 0))

Keep a reference if the cooldown must be cancelled, reset, or synchronized with server state.

+