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

本文链接：https://blog.csdn.net/lsw_Cs/article/details/135400176

本文介绍了如何在Cocos Creator 3.8.1中实现游戏技能冷却效果，包括技能图标变灰、倒计时、遮罩扇形变化和动画使用。通过TypeScript编写代码，详细阐述了实现过程，提供了一个组件来控制技能按钮的交互和视觉效果。

摘要由CSDN通过智能技术生成

看看和你想的是否一样

引言

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