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

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

引言

Cocos中技能冷却效果

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

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

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

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

1.技能冷却效果

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

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

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

这里面有哪些知识点?

2.需求分析

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

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

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

3.实现技能冷却效果

1.环境

引擎版本:Cocos Creator 3.8.1

编程语言:TypeScript

2.资源准备

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

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

然后简单地摆个盘

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

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

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

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

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

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

下面一起来写代码。

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

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

4.效果演示

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

结语

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

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

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

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

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

推荐专栏:

100个Cocos实例

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

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

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

知识付费专栏

原文链接:https://juejin.cn/post/7320288157916119091 作者:亿元程序员

(0)
上一篇 2024年1月5日 上午10:21
下一篇 2024年1月5日 上午10:31

相关推荐

发表回复

登录后才能评论