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

這篇文章主要介紹CocosCreator如何實(shí)現(xiàn)技能冷卻效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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;//游戲開始的時(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)好

1. Type 需要把精靈的渲染模式改為填充

2. Fill Type 把填充方式改為扇形填充

3. Fill Center 修改扇形的中心點(diǎn) 0,0為左下角1,1為右上角 我們希望扇形圍繞中心點(diǎn)來(lái)填充，所以改成0.5,0.5

4. Fill Range 把填充總量改為1

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

綁定的事件就是onbtn，為了好看再把button組件的Transition改為COLOR

大功告成，這樣就可以了
點(diǎn)擊運(yùn)行看一下

真不錯(cuò)

在點(diǎn)擊技能按鈕的時(shí)候想實(shí)現(xiàn)什么功能就把代碼都放在onbtn里面就可以了

放這里面就可以

比如可以在按下技能按鈕的時(shí)候播放一個(gè)特效動(dòng)畫

以上是“CocosCreator如何實(shí)現(xiàn)技能冷卻效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！