• 售前

  • 售后

热门帖子
入门百科

CocosCreator实现技能冷却效果

[复制链接]
123457898 显示全部楼层 发表于 2021-10-26 12:28:17 |阅读模式 打印 上一主题 下一主题
CocosCreator实现技能CD效果

在许多游戏内里都有技能,玩家在点击技能按钮后技能会有一个冷却的时间,当冷却时间过了之后技能才可以再次利用
在cocos中实现这个效果很简单,需要用到精灵组件
起首将技能按钮的图片拖到canvas下

然后在技能按钮下新建一个label
像这样

然后新建TS脚本把下面的代码复制粘贴进去
  1. const {ccclass, property} = cc._decorator;
  2. @ccclass
  3. export default class NewClass extends cc.Component {
  4.     @property(cc.Sprite)
  5.     skill:cc.Sprite = null;//技能精灵
  6.     @property(cc.Label)
  7.     time_label:cc.Label = null;//显示技能冷却剩余时间的文字
  8.     @property
  9.     time:number = 3;//技能冷却时间
  10.     @property
  11.     isshow_label:boolean = true;//是否显示文字
  12.     onLoad(){
  13.         this.skill.fillRange = 1;//游戏开始的时候技能的填充范围是1
  14.     }
  15.     update(dt:number){
  16.         if(this.skill.fillRange != 1){//如果技能精灵的填充不为1 也就是说已经使用了技能
  17.             this.skill.fillRange += dt / this.time;//恢复技能   每帧恢复的值为帧率 / 技能冷却时间
  18.             this.time_label.string = Math.floor(((1 - this.skill.fillRange) * this.time)).toString();//每帧更新技能剩余时间
  19.             //技能剩余时间首先1 - 技能精灵的填充度再 * 技能冷却时间,最后Math.floor取整
  20.             if(this.isshow_label == true){//如果可以显示文字
  21.                 this.time_label.node.active = true;//显示技能冷却剩余时间
  22.             }        }
  23.         if(this.skill.fillRange == 1){//如果技能精灵的填充为1 也就是说技能还没被使用
  24.             this.skill.getComponent(cc.Button).interactable = true;//启动按钮
  25.             this.time_label.node.active = false;//隐藏技能冷却剩余时间
  26.         }
  27.     }
  28.     onbtn(){//按下技能按钮时的事件
  29.         this.skill.fillRange = 0;//技能填充范围设置为0
  30.         console.log("使用了技能");//打印log
  31.         this.skill.getComponent(cc.Button).interactable = false;//禁用按钮
  32.     }
  33. }
复制代码
每一句代码我都写了很具体的解释哦
把写好的脚本挂到技能按钮上,然后绑定节点

可以根据需要随意修改
       
  • Time是技能的冷却时间,想改多少改多少   
  • Isshow_time是是否表现冷却剩余时间的笔墨,假如不想让笔墨表现就把他勾掉,默认是表现
光写代码是不够的,还需要给技能按钮做一些设置
需要改动sprite(精灵)组件而且给技能按钮添加button(按钮)组件

按照图片调好
       
  • Type 需要把精灵的渲染模式改为填充   
  • Fill Type 把填充方式改为扇形填充   
  • Fill Center 修改扇形的中心点 0,0为左下角1,1为右上角 我们希望扇形围绕中心点来填充,以是改成0.5,0.5   
  • Fill Range 把填充总量改为1
末了给技能按钮添加button(按钮)组件

绑定的事件就是onbtn,为了好看再把button组件的Transition改为COLOR

大功告成,这样就可以了
点击运行看一下

真不错
在点击技能按钮的时间想实现什么功能就把代码都放在onbtn内里就可以了

放这内里就可以
好比可以在按下技能按钮的时间播放一个特效动画

以上就是CocosCreator实现技能冷却效果的具体内容,更多关于CocosCreator技能冷却的资料请关注草根技术分享其它相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作