CocosCreator实现技能CD效果

在很多游戏里面都有技能,玩家在点击技能按钮后技能会有一个冷却的时间,当冷却时间过了之后技能才可以再次使用

在cocos中实现这个效果很简单,需要用到精灵组件
首先将技能按钮的图片拖到canvas下

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

然后新建TS脚本把下面的代码复制粘贴进去

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 也就是说已经使用了技能
            this.skill.fillRange += dt / this.time;//恢复技能   每帧恢复的值为帧率 / 技能冷却时间
            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;//技能填充范围设置为0
        console.log("使用了技能");//打印log
        this.skill.getComponent(cc.Button).interactable = false;//禁用按钮
    }

}

每一句代码我都写了很详细的注释哦

把写好的脚本挂到技能按钮上,然后绑定节点

可以根据需要随意修改

  • Time是技能的冷却时间,想改多少改多少
  • Isshow_time是是否显示冷却剩余时间的文字,如果不想让文字显示就把他勾掉,默认是显示

光写代码是不够的,还需要给技能按钮做一些设置
需要改动sprite(精灵)组件并且给技能按钮添加button(按钮)组件

按照图片调好

  1. Type 需要把精灵的渲染模式改为填充
  2. Fill Type 把填充方式改为扇形填充
  3. Fill Center 修改扇形的中心点 0,0为左下角1,1为右上角 我们希望扇形围绕中心点来填充,所以改成0.5,0.5
  4. Fill Range 把填充总量改为1

最后给技能按钮添加button(按钮)组件

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

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

真不错

在点击技能按钮的时候想实现什么功能就把代码都放在onbtn里面就可以了

放这里面就可以

比如可以在按下技能按钮的时候播放一个特效动画

以上就是CocosCreator实现技能冷却效果的详细内容,更多关于CocosCreator技能冷却的资料请关注程序员的世界其它相关文章!

CocosCreator实现技能冷却效果的更多相关文章

  1. react实现Radio组件的示例代码

    本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习,共同进步效果展示:测试组件:class Test extends Component {constructor(props) {super(props)this.state = {active:1}}onGroupChange(va......

  2. JavaScript this关键字的深入详解

    一、前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说,this的绑定一直是一件非常令人困惑的事。二、了解this学习this的第一步是明白this既不指向函数自身也......

  3. JavaScript Html实现移动端红包雨功能页面

    本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下实现效果如下:具体代码如下html部分:红包雨demo.css为初始化css,可以不加index.css部分body{width: 100%;height: 100%;background-image: url(/javascript/......

    ____
  4. ________
  5. JavaScript实现鼠标经过表格行给出颜色标识____

    本文实例为大家分享了JavaScript实现鼠标经过表格行给出颜色标识,供大家参考,具体内容如下代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"......

  6. 原生javascript开发计算器实例

    计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力。本实例旨在帮助js计算能力有待提高的读者,通过自己一步一步开发完成计算器功能,熟悉js数字处理方法。计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运......

  7. 整理CocosCreator常用知识点

    一、场景加载cc.director.loadScene(‘场景名称');//场景跳转cc.director.preloadScene(‘场景名称');//预加载场景cc.director.getScene();//获取当前场景二、查找节点1,节点查找node = cc.find(“Canvas/bg......

  8. CocosCreator通用框架设计之网络

    前言在 Cocos Creator 中发起一个 http 请求是比较简单的,但很多游戏希望能够和服务器之间保持长连接,以便服务端能够主动向客户端推送消息,而非总是由客户端发起请求,对于实时性要求较高的游戏更是如此。这里我们会设计一个通用的网络框架,可以方便地应用于我们的项目中。使用websocket......

  9. react获取input输入框的值的方法示例

    react 获取input 输入框的值的多种方式第一种方式 非受控组件获取第二种方式 受控组件获取非受控组件获取 refimport React , {Component} from 'react';export default class App extends Component{search(......

  10. 使用JS调用WebService接口

    <> $(document).ready(function () { var username = "admin"; var password = "123456";       /*==J......

  11. React Router 如何使用history跳转

    在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样,replace的作用是取代当前历史记录go,此方法用来前进或者倒退,history.go(-1);goBack,此方法......

随机推荐

  1. 详解Python小数据池和代码块缓存机制

    前言本文除"总结"外,其余均为认识过程;3.7.5;这部分官方文档不知道在哪里找,目前没有找到,有谁知道的可以麻烦留言吗? 谢谢了!总结:如果在同一代码块下,则采用同一代码块下的缓存机制;如果是不同代码块,则采用小数据池的驻留机制;需要注意的是,交互式输入时,每个命令都是一个代码......

  2. std::async的使用总结

    C++98标准中并没有线程库的存在,直到C++11中才终于提供了多线程的标准库,提供了管理线程、保护共享数据、线程间同步操作、原子操作等类。多线程库对应的头文件是#include ,类名为std::thread。然而线程毕竟是比较贴近系统的东西,使用起来仍然不是很方便,特别是线程同步及获取线程运行结......

  3. java HttpClient传输json格式的参数实例讲解

    最近的一个接口项目,传的参数要求是json,需要特殊处理一下。重点是这两句话:httpPost.setHeader("Content-Type", "application/json;charset=UTF-8");se.setContentType(CONT......

  4. Python中的类对象

    目录抽象特点具体细节总结抽象特点Python 一切皆对象,基于此概念,对 类 class 有以下特点:类与实例的属性类对象创建可选择定义类属性,创建实例对象时,实例属性自动执行类的__init__方法初始化实例对象自动继承相应的类属性(如果有),但实例属性优先级更高实例方法,类方法,静态方法的参数实......

  5. 【java框架】SpringBoot(5)--SpringBoot整合分布式Dubbo+Zookeeper

    1.理论概述1.1.分布式分布式系统是若干独立计算机的集合,这些计算机对于用户来讲就像单个系统。由多个系统集成成一个整体,提供多个功能,组合成一个板块,用户在使用上看起来是一个服务。(比如淘宝网)。 起源分布式系统出现的原因是:用多个廉价的、普通的机器完成单个计算机无法完成的计算、存储任务分布式......

  6. pycharm 如何跳出服务器证书不受信任的提示

    出现这个问题解决方法:点击File > Settings > Tools > Server Certificates > Accept non-trusted certificates automatically勾上就好啦~补充:pycharm启动出现Server's cer......

  7. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了?伪代码大概是这样:{height: unset;transition: all 0.3s linear;will-change: height;&.up {height: 0;}&.down {h......

  8. pandas groupby分组对象的组内排序解决方案

    问题:根据数据某列进行分组,选择其中另一列大小top-K的的所在行数据解析:求解思路很清晰,即先用groupby对数据进行分组,然后再根据分组后的某一列进行排序,选择排序结果后的top-K结果案例:取一下dataframe中B列各对象中C值最高所在的行df = pd.DataFrame({"......

  9. windows打包脚本出现 /bin/sh^M: 坏的解释器: 没有那个文件或目录 错误

    1.错误描述我在Windows 10 系统下打包dolphinscheduler,上传到centos7解压之后,执行脚本报如下错误:-bash: ./dolphinscheduler-daemon.sh: /bin/sh^M: 坏的解释器: 没有那个文件或目录^M是什么东东,为什么会有^M通过命......

  10. python自动统计zabbix系统监控覆盖率

    脚本主要功能:1)通过zabbix api接口采集所有监控主机ip地址;2)通过cmdb系统(蓝鲸)接口采集所有生产主机IP地址、主机名、操作系统、电源状态;3)以上2步返回数据对比,找出未监控主机ip地址,生成csv文件;4)发送邮件。脚本如下:#!/usr/bin/python#coding:u......