CocosCreator實(shí)現(xiàn)技能冷卻效果

更新時(shí)間：2021年04月15日 09:45:58 作者：property-Cocos

這篇文章主要介紹了CocosCreator實(shí)現(xiàn)技能冷卻效果，同學(xué)們可以跟著教程，親手試一下，代碼都是可以復(fù)用的

CocosCreator實(shí)現(xiàn)技能CD效果

在很多游戲里面都有技能，玩家在點(diǎn)擊技能按鈕后技能會(huì)有一個(gè)冷卻的時(shí)間，當(dāng)冷卻時(shí)間過(guò)了之后技能才可以再次使用

在cocos中實(shí)現(xiàn)這個(gè)效果很簡(jiǎn)單，需要用到精靈組件
首先將技能按鈕的圖片拖到canvas下

然后在技能按鈕下新建一個(gè)label
像這樣

然后新建TS腳本把下面的代碼復(fù)制粘貼進(jìn)去

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;//顯示技能冷卻剩余時(shí)間的文字

    @property
    time:number = 3;//技能冷卻時(shí)間

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

    onLoad(){
        this.skill.fillRange = 1;//游戲開(kāi)始的時(shí)候技能的填充范圍是1
    }

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

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

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

}

每一句代碼我都寫了很詳細(xì)的注釋哦

把寫好的腳本掛到技能按鈕上，然后綁定節(jié)點(diǎn)

可以根據(jù)需要隨意修改

Time是技能的冷卻時(shí)間，想改多少改多少
Isshow_time是是否顯示冷卻剩余時(shí)間的文字，如果不想讓文字顯示就把他勾掉，默認(rèn)是顯示

光寫代碼是不夠的，還需要給技能按鈕做一些設(shè)置
需要改動(dòng)sprite（精靈）組件并且給技能按鈕添加button（按鈕）組件

按照?qǐng)D片調(diào)好

Type 需要把精靈的渲染模式改為填充
Fill Type 把填充方式改為扇形填充
Fill Center 修改扇形的中心點(diǎn) 0,0為左下角1,1為右上角我們希望扇形圍繞中心點(diǎn)來(lái)填充，所以改成0.5,0.5
Fill Range 把填充總量改為1

最后給技能按鈕添加button（按鈕）組件