Unity | 技能(CD)冷却效果

1 简介

游戏中技能冷却是一种常见的机制，用于限制玩家连续使用某个技能的频率。在 Unity 中，可以使用 Image 组件的 Filled 选项来快速实现该效果

2 解决方案

1 制作遮罩

「创建 Image」
以目标对象的纹理创建 Image，将其层级设置为目标对象的上层，更改颜色为黑色，并设置合适的透明度

「修改 Image 属性」

1. Image Type: Filled

• 按照与 Simple 相同的方式显示精灵，但不同之处是使用定义的方向、方法和数量从原点开始填充精灵

1. Fill Method: Radial 360

• 填充方法

1. Fill Origin: Top

• 填充起始位置

1. Fill Amount: 填充量

• 脚本动态控制

1. Clockwise: 不勾选

• 填充量从0到1时是顺时针填充还是逆时针填充

最终样式如下：

2 增加动画

修改完 Image 的属性后，还需要编写脚本来动态控制 fillAmount 属性，让冷却效果真正的动起来

计算 fillAmount 属性的方式一般有两种：

• 通过组件生命周期中的 Update 自己计算时间，实现平滑过度

• 通过 DOTween 实现补间动画

这里更推荐使用 DOTween，会使代码更简洁，易于维护

float totalTime = 5f;
float duration = 5f;
DOTween.To(() => duration,
    value => { this.imgMask.fillAmount = value / totalTime; },
    0,
    duration);