CocosCreator實(shí)現(xiàn)技能冷卻效果
CocosCreator實(shí)現(xiàn)技能CD效果
在很多游戲里面都有技能,玩家在點(diǎn)擊技能按鈕后技能會有一個冷卻的時間,當(dāng)冷卻時間過了之后技能才可以再次使用
在cocos中實(shí)現(xiàn)這個效果很簡單,需要用到精靈組件
首先將技能按鈕的圖片拖到canvas下
然后在技能按鈕下新建一個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;//顯示技能冷卻剩余時間的文字 @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;//禁用按鈕 } }
每一句代碼我都寫了很詳細(xì)的注釋哦
把寫好的腳本掛到技能按鈕上,然后綁定節(jié)點(diǎn)
可以根據(jù)需要隨意修改
- Time是技能的冷卻時間,想改多少改多少
- Isshow_time是是否顯示冷卻剩余時間的文字,如果不想讓文字顯示就把他勾掉,默認(rèn)是顯示
光寫代碼是不夠的,還需要給技能按鈕做一些設(shè)置
需要改動sprite(精靈)組件并且給技能按鈕添加button(按鈕)組件
按照圖片調(diào)好
- Type 需要把精靈的渲染模式改為填充
- Fill Type 把填充方式改為扇形填充
- Fill Center 修改扇形的中心點(diǎn) 0,0為左下角1,1為右上角 我們希望扇形圍繞中心點(diǎn)來填充,所以改成0.5,0.5
- Fill Range 把填充總量改為1
最后給技能按鈕添加button(按鈕)組件
綁定的事件就是onbtn,為了好看再把button組件的Transition改為COLOR
大功告成,這樣就可以了
點(diǎn)擊運(yùn)行看一下
真不錯
在點(diǎn)擊技能按鈕的時候想實(shí)現(xiàn)什么功能就把代碼都放在onbtn里面就可以了
放這里面就可以
比如可以在按下技能按鈕的時候播放一個特效動畫
以上就是CocosCreator實(shí)現(xiàn)技能冷卻效果的詳細(xì)內(nèi)容,更多關(guān)于CocosCreator技能冷卻的資料請關(guān)注腳本之家其它相關(guān)文章!
- 詳解CocosCreator制作射擊游戲
- 如何在CocosCreator里畫個炫酷的雷達(dá)圖
- 詳解CocosCreator MVC架構(gòu)
- 詳解CocosCreator消息分發(fā)機(jī)制
- CocosCreator入門教程之網(wǎng)絡(luò)通信
- 如何用CocosCreator制作微信小游戲
- 詳解CocosCreator系統(tǒng)事件是怎么產(chǎn)生及觸發(fā)的
- 怎樣在CocosCreator中使用游戲手柄
- 詳解CocosCreator華容道數(shù)字拼盤
- 詳解CocosCreator游戲之魚群算法
- 詳解CocosCreator優(yōu)化之DrawCall
- 詳解cocoscreater預(yù)制體prefab
- python實(shí)現(xiàn)socket簡單通信的示例代碼
- python和websocket構(gòu)建實(shí)時日志跟蹤器的步驟
- Java通過Socket實(shí)現(xiàn)簡單多人聊天室
- 如何在CocosCreator中使用http和WebSocket
相關(guān)文章
Bootstrap 過渡效果Transition 模態(tài)框(Modal)
這篇文章主要介紹了Bootstrap 過渡效果Transition 模態(tài)框(Modal),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03使用bootstrap插件實(shí)現(xiàn)模態(tài)框效果
今天我們選擇使用著名的 bootstrap 庫的模態(tài)框插件 modal.js 來實(shí)現(xiàn)模態(tài)框效果,同時也使大家進(jìn)一步熟悉 bootstrap 的插件使用,需要的朋友可以參考下2017-05-05js實(shí)現(xiàn)動態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實(shí)現(xiàn)動態(tài)改變字體大小,感興趣的額朋友不要錯過2014-01-01