【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年游戏主程一起学习设计模式

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

知识付费专栏

相关推荐
断竿散人几秒前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD2 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟3 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire3 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH4 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_5 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
断竿散人5 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
肖魏眸7 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶7 分钟前
VUE带你乘风破浪~
前端·vue.js
橘黄的猫8 分钟前
深入浅出掌握 Git 子模块:项目管理利器
前端·github