实现技能CD

说到技能CD冷却,相信大家会想到王者荣耀,英雄联盟和dota等游戏。本文用Cocoscreator 3.8实现技能冷却的效果。先上效果图:

总体思路: 利用Sprite组件的现充方向属性来做,先来看下填充模式的文档详情:

填充模式(Filled)

Type 属性选择填充模式后,会出现一组新的属性可供配置:

属性 功能说明
Fill Type 填充类型选择,有 HORIZONTAL (横向填充)、VERTICAL (纵向填充)和 RADIAL(扇形填充)三种。
Fill Start 填充起始位置的标准化数值(从 0 ~ 1,表示填充总量的百分比),选择横向填充时,Fill Start 设为 0,就会从图像最左边开始填充
Fill Range 填充范围的标准化数值(同样从 0 ~ 1),设为 1,就会填充最多整个原始图像的范围。
Fill Center 填充中心点,该属性只有选择了 RADIAL 填充类型才能修改。决定了扇形填充时会环绕 Sprite 上的哪个点。

只要设置表里面的四个属性,就可以实现CD冷却,操作步骤如下:

  • Fill Type设置为RADIAL(扇形方向)
  • Fill Center设置为X: 0.5,Y: 0.5
  • Fill Start设置为0.25
  • Fill Range设置为1,通过计时器来减少Fill Range,值为0,表示CD结束

实操

1,首先先准备圆形四张技能图片和一张圆形黑色蒙版

2,在编辑器中添加4个技能按钮,并且将CD冷却蒙版添加为按钮的子节点,并先隐藏

3,为每个按钮挂上脚本(这里可以把按钮做成预制体,这里偷懒了),脚本如下:

typescript 复制代码
import { _decorator, Component, EventTouch, find, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SkillButton')
export class SkillButton extends Component {
    /** 进度条图片 */
    private _progressBar:Sprite = null;
    /** 是否开始进入CD时间 */
    private _isCDStarting = false;
    start() {
        // 获取进度条图片
        this._progressBar = find("progressBar", this.node).getComponent(Sprite);
        // 注册点击事件
        this.node.on(Node.EventType.TOUCH_START, this._onTouchEnd, this);
    }

    _onTouchEnd (e: EventTouch) {
        if(this._isCDStarting){
            return;
        }
        this._progressBar.node.active = true;
        this._isCDStarting = true;
        this._progressBar.fillRange = 1;
        this.schedule(this._onCDComplete, 0.2);
    }

    _onCDComplete(){                
        this._progressBar.fillRange -= 0.2;
        if (this._progressBar.fillRange <= 0) {
            this._isCDStarting = false;
            this._progressBar.node.active = false;
            this.unschedule(this._onCDComplete);
        }
    }
}

点击按钮后,会启动定时器,来减少进度条progressBar的fillRange以达到CD效果,当fillRange === 0后,CD结束,关闭定时器,在CD未结束时,会屏蔽新的点击响应。

到此我们就实现了CD冷却效果

相关推荐
VaJoy16 天前
Cocos Creator Shader 入门 ⑺ —— 图层混合样式的实现与 Render Texture
cocos creator
VaJoy18 天前
Cocos Creator Shader 入门 ⑹ —— 灰阶、反色等滤镜的实现
cocos creator
VaJoy20 天前
Cocos Creator Shader 入门 ⑸ —— 代码复用与绿幕抠图技术
cocos creator
VaJoy21 天前
Cocos Creator Shader 入门 ⑷ —— 纹理采样与受击闪白的实现
cocos creator
VaJoy23 天前
Cocos Creator Shader 入门 ⑶ —— 给节点设置透明度
cocos creator
VaJoy25 天前
Cocos Creator Shader 入门 (2) —— 给节点染色
cocos creator
VaJoy25 天前
Cocos Creator Shader —— 附录
cocos creator
成长ing121381 个月前
多层背景视差滚动Parallax Scrolling
cocos creator
似水流年wxk1 个月前
cocos creator使用jenkins打包微信小游戏,自动上传资源到cdn,windows版运行jenkins
运维·jenkins·cocos creator
成长ing121383 个月前
点击音效系统
前端·cocos creator