实现技能CD - 技术栈

说到技能CD冷却，相信大家会想到王者荣耀，英雄联盟和dota等游戏。本文用Cocoscreator 3.8实现技能冷却的效果。先上效果图：

总体思路： 利用Sprite组件的现充方向属性来做，先来看下填充模式的文档详情：

填充模式（Filled）

Type 属性选择填充模式后，会出现一组新的属性可供配置：

属性	功能说明
Fill Type	填充类型选择，有 HORIZONTAL （横向填充）、VERTICAL （纵向填充）和 RADIAL（扇形填充）三种。
Fill Start	填充起始位置的标准化数值（从 0 ~ 1，表示填充总量的百分比），选择横向填充时，Fill Start 设为 0，就会从图像最左边开始填充
Fill Range	填充范围的标准化数值（同样从 0 ~ 1），设为 1，就会填充最多整个原始图像的范围。
Fill Center	填充中心点，该属性只有选择了 `RADIAL` 填充类型才能修改。决定了扇形填充时会环绕 Sprite 上的哪个点。

只要设置表里面的四个属性，就可以实现CD冷却，操作步骤如下：

将Fill Type设置为RADIAL(扇形方向)
将Fill Center设置为X: 0.5,Y: 0.5
将Fill Start设置为0.25
将Fill Range设置为1,通过计时器来减少Fill Range，值为0，表示CD结束

实操

1，首先先准备圆形四张技能图片和一张圆形黑色蒙版

2，在编辑器中添加4个技能按钮，并且将CD冷却蒙版添加为按钮的子节点，并先隐藏

3，为每个按钮挂上脚本（这里可以把按钮做成预制体，这里偷懒了），脚本如下：

typescript 复制代码

import { _decorator, Component, EventTouch, find, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SkillButton')
export class SkillButton extends Component {
    /** 进度条图片 */
    private _progressBar:Sprite = null;
    /** 是否开始进入CD时间 */
    private _isCDStarting = false;
    start() {
        // 获取进度条图片
        this._progressBar = find("progressBar", this.node).getComponent(Sprite);
        // 注册点击事件
        this.node.on(Node.EventType.TOUCH_START, this._onTouchEnd, this);
    }

    _onTouchEnd (e: EventTouch) {
        if(this._isCDStarting){
            return;
        }
        this._progressBar.node.active = true;
        this._isCDStarting = true;
        this._progressBar.fillRange = 1;
        this.schedule(this._onCDComplete, 0.2);
    }

    _onCDComplete(){                
        this._progressBar.fillRange -= 0.2;
        if (this._progressBar.fillRange <= 0) {
            this._isCDStarting = false;
            this._progressBar.node.active = false;
            this.unschedule(this._onCDComplete);
        }
    }
}

点击按钮后，会启动定时器，来减少进度条progressBar的fillRange以达到CD效果，当fillRange === 0后，CD结束，关闭定时器，在CD未结束时，会屏蔽新的点击响应。

到此我们就实现了CD冷却效果