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

看看和你想的是否一样

引言

Cocos中技能冷却效果

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

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

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

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

1.技能冷却效果

游戏录屏，LOL手游中的技能冷却效果

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

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

这里面有哪些知识点？

2.需求分析

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

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

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

3.实现技能冷却效果

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

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

请勿用做商业用途

然后简单地摆个盘。

达到米其林的效果

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

LabelOutline

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

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

扇形遮罩

下面一起来写代码。

3.编写代码

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

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控制是否可以点击。

this.button.enabled = false;

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

this.icon.grayscale = true;

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

this.mask.fillRange = 1;

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

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

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

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();
}