CocosCreator技能冷卻效果超方便哦只需複製貼上

CocosCreator實現技能CD效果超方便哦只需複製貼上

在很多遊戲裡面都有技能，玩家在點選技能按鈕後技能會有一個冷卻的時間，當冷卻時間過了之後技能才可以再次使用

像王者榮耀，造夢西遊等遊戲裡面都有技能冷卻

在這裡插入圖片描述
圖片來源於網路

在cocos中實現這個效果很簡單，需要用到精靈元件
首先將技能按鈕的圖片拖到canvas下
在這裡插入圖片描述
然後在技能按鈕下新建一個label
像這樣

然後新建TS指令碼把下面的程式碼複製貼上進去

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Sprite)
    skill:cc.Sprite = null;//技能精靈

    @property(cc.Label)
    time_label:cc.Label = null;//顯示技能冷卻剩餘時間的文字

    @property
    time:number = 3;//技能冷卻時間

    @property
    isshow_label:boolean = true;//是否顯示文字

    onLoad(){
        this.skill.fillRange = 1;//遊戲開始的時候技能的填充範圍是1
    }

    update(dt:number){
        if(this.skill.fillRange != 1){//如果技能精靈的填充不為1 也就是說已經使用了技能
            this.skill.fillRange += dt / this.time;//恢復技能   每幀恢復的值為影格率 / 技能冷卻時間
            this.time_label.string = Math.floor(((1 - this.skill.fillRange) * this.time)).toString();//每幀更新技能剩餘時間
            //技能剩餘時間首先1 - 技能精靈的填充度再 * 技能冷卻時間，最後Math.floor取整

            if(this.isshow_label == true){//如果可以顯示文字
                this.time_label.node.active = true;//顯示技能冷卻剩餘時間
            }        }
        if(this.skill.fillRange == 1){//如果技能精靈的填充為1 也就是說技能還沒被使用
            this.skill.getComponent(cc.Button).interactable = true;//啟動按鈕
            this.time_label.node.active = false;//隱藏技能冷卻剩餘時間
        }
    }

    onbtn(){//按下技能按鈕時的事件
        this.skill.fillRange = 0;//技能填充範圍設定為0
        console.log("使用了技能");//列印log
        this.skill.getComponent(cc.Button).interactable = false;//禁用按鈕
    }

}