【100个Cocos实例】仿LOL手游中技能冷却效果

引言

Cocos中技能冷却效果

大家好，在游戏开发中，技能释放后 ，往往会有一个冷却效果 ，俗称CD。

主要用来规定玩家使用某个技能的间隔，限制频繁使用。

本文将介绍一下如何在Cocos中实现技能冷却效果。

本文源工程可在文末阅读原文获取，小伙伴们自行前往。

1.技能冷却效果

在游戏开发中，技能释放 后，会在技能图标上添加一个数字的倒计时效果。

然后技能图标会变暗 ，同时会有一个灰色遮罩 表示倒计时进度，技能点击不生效。

这里面有哪些知识点？

2.需求分析

要在Cocos中实现技能冷却效果 ，可能需要以下知识点：

技能图标变灰。
技能倒计时。
技能遮罩扇形变化。
tween动画的使用。

下面一起来实现技能冷却效果。

3.实现技能冷却效果

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

首先准备一批好看的技能图标，美术资源仅做演示用，请勿用做商业用途。

然后简单地摆个盘。

为了更清晰显示 倒计时，我们给Label添加一个描边组件。

遮罩要实现扇形变化，需要做以下处理。

Type改成FILLED。
FillType改成RADIAL。
FillCenter改成(0.5,0.5)。
FillStart改成0.25，从时钟12点的方向开始。

下面一起来写代码。

3.编写代码

首先我们创建一个SkillCooling组件并且添加到技能按钮节点 上，并且在start方法中初始化。

typescript 复制代码

import { _decorator, Button, Component, EventHandler, Label, Node, Sprite, tween } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('SkillCooling')
export class SkillCooling extends Component {
    button: Button;
    icon: Sprite;
    mask: Sprite;
    label: Label;
    start() {
        this.button = this.getComponent(Button) || this.addComponent(Button);
        let eventHandler = new EventHandler();
        eventHandler.target = this.node;
        eventHandler.component = 'SkillCooling';
        eventHandler.handler = 'onClick';
        this.button.clickEvents.push(eventHandler);
        this.icon = this.node.children[0].getComponent(Sprite);
        this.mask = this.node.children[1].getComponent(Sprite);
        this.label = this.node.children[2].getComponent(Label);
    }
}

然后编写核心的代码onClick点击事件。

其中通过Button组件的enabled控制是否可以点击。

typescript 复制代码

this.button.enabled = false;

通过Sprite组件的grayscale使图标变灰。

typescript 复制代码

this.icon.grayscale = true;

通过Sprite组件的fillRange使遮罩实现扇形变化。

typescript 复制代码

this.mask.fillRange = 1;

用tween组件的onUpdate回调实现技能冷却倒计时。

typescript 复制代码

tween(this.mask)
  .to(random - 1, { fillRange: 1 / random }, {
      onUpdate: (target: object, ratio: number) => {
      }
}).start();

为了演示，我们点击技能后随机产生冷却时间 ，先整数倒计时，最后一秒保留一位小数倒计时，完整代码如下：

typescript 复制代码

onClick() {
    this.button.enabled = false;
    this.icon.grayscale = true;
    this.mask.fillRange = 1;
    const random = Math.floor(Math.random() * 9) + 2;
    tween(this.mask)
        .to(random - 1, { fillRange: 1 / random }, {
            onUpdate: (target: object, ratio: number) => {
                this.label.string = Math.ceil(random - (random - 1) * (ratio)).toString();
            }
        })
        .delay(0.1)
        .to(0.9, { fillRange: 0 }, {
            onUpdate: (target: object, ratio: number) => {
                this.label.string = (1 - ratio).toFixed(1);
            }
        })
        .call(() => {
            this.label.string = "";
            this.button.enabled = true;
            this.icon.grayscale = false;
        })
        .start();
}

就这样我们的代码编写完毕，下面看看效果。

4.效果演示

结语

本文源工程 可通过私信SkillCooling获取。

在哪里 可以看到如此清晰的思路，快跟上我的节奏！关注我 ，和我一起了解游戏行业最新动态，学习游戏开发技巧。

我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！

推荐专栏：

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

知识付费专栏