CocosCreator實現(xiàn)技能冷卻效果
CocosCreator實現(xiàn)技能CD效果
在很多游戲里面都有技能,玩家在點擊技能按鈕后技能會有一個冷卻的時間,當(dāng)冷卻時間過了之后技能才可以再次使用
在cocos中實現(xiàn)這個效果很簡單,需要用到精靈組件
首先將技能按鈕的圖片拖到canvas下

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

然后新建TS腳本把下面的代碼復(fù)制粘貼進去
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 也就是說已經(jīng)使用了技能
this.skill.fillRange += dt / this.time;//恢復(fù)技能 每幀恢復(fù)的值為幀率 / 技能冷卻時間
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;//技能填充范圍設(shè)置為0
console.log("使用了技能");//打印log
this.skill.getComponent(cc.Button).interactable = false;//禁用按鈕
}
}
每一句代碼我都寫了很詳細的注釋哦
把寫好的腳本掛到技能按鈕上,然后綁定節(jié)點

可以根據(jù)需要隨意修改
- Time是技能的冷卻時間,想改多少改多少
- Isshow_time是是否顯示冷卻剩余時間的文字,如果不想讓文字顯示就把他勾掉,默認是顯示
光寫代碼是不夠的,還需要給技能按鈕做一些設(shè)置
需要改動sprite(精靈)組件并且給技能按鈕添加button(按鈕)組件

按照圖片調(diào)好
- Type 需要把精靈的渲染模式改為填充
- Fill Type 把填充方式改為扇形填充
- Fill Center 修改扇形的中心點 0,0為左下角1,1為右上角 我們希望扇形圍繞中心點來填充,所以改成0.5,0.5
- Fill Range 把填充總量改為1
最后給技能按鈕添加button(按鈕)組件

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

大功告成,這樣就可以了
點擊運行看一下

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

放這里面就可以
比如可以在按下技能按鈕的時候播放一個特效動畫

以上就是CocosCreator實現(xiàn)技能冷卻效果的詳細內(nèi)容,更多關(guān)于CocosCreator技能冷卻的資料請關(guān)注腳本之家其它相關(guān)文章!
- 詳解CocosCreator制作射擊游戲
- 如何在CocosCreator里畫個炫酷的雷達圖
- 詳解CocosCreator MVC架構(gòu)
- 詳解CocosCreator消息分發(fā)機制
- CocosCreator入門教程之網(wǎng)絡(luò)通信
- 如何用CocosCreator制作微信小游戲
- 詳解CocosCreator系統(tǒng)事件是怎么產(chǎn)生及觸發(fā)的
- 怎樣在CocosCreator中使用游戲手柄
- 詳解CocosCreator華容道數(shù)字拼盤
- 詳解CocosCreator游戲之魚群算法
- 詳解CocosCreator優(yōu)化之DrawCall
- 詳解cocoscreater預(yù)制體prefab
- python實現(xiàn)socket簡單通信的示例代碼
- python和websocket構(gòu)建實時日志跟蹤器的步驟
- Java通過Socket實現(xiàn)簡單多人聊天室
- 如何在CocosCreator中使用http和WebSocket
相關(guān)文章
js統(tǒng)計頁面的來訪次數(shù)實現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計頁面的來訪次數(shù),需要的朋友可以參考下2014-05-05
Javascript立即執(zhí)行函數(shù)(IIFE)實例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個在定義的時候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
js 數(shù)組實現(xiàn)一個類似ruby的迭代器
今天突然發(fā)現(xiàn)js的數(shù)組處理起來真是麻煩,代碼一些就是一大堆,相比起ruby的迭代器來真是遜色不少。2009-10-10
前端百度地圖添加點并跳轉(zhuǎn)到百度地圖進行導(dǎo)航完整代碼
web開發(fā)過程中經(jīng)常碰到需要調(diào)用百度地圖來視線定位導(dǎo)航的過程,許多技術(shù)博客上介紹的都是調(diào)用百度地圖的api,這篇文章主要給大家介紹了關(guān)于前端百度地圖添加點并跳轉(zhuǎn)到百度地圖進行導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2024-07-07
jquery中click等事件綁定及移除的幾種方法小結(jié)
這篇文章主要介紹了jquery中綁定事件與解綁事件是常用到的寫法,這里總結(jié)了幾種常見的綁定事件與解綁事件的方法,需要的朋友可以參考下2023-05-05
Javascript 調(diào)試利器 Firebug使用詳解六
有時候,為了更清楚方便的查看輸出信息,我們可能需要將一些調(diào)試信息進行分組輸出,那么可以使用console.group來對信息進行分組,在組信息輸出完成后用console.groupEnd結(jié)束分組。2009-07-07

