【简单教程】用UGUI实现技能冷却效果

为什么我上传的GIF总是失效？

此楼用做GIF的Debug。

妈了个巴子，现在可以了。
这个效果实现比较简单，我估计贴吧大部分人都会。
现在我开始质疑这个帖子的实用性了…
我先去洗个澡。回来更。

倒计时蒙版用到的其实就是UGUI中Image组件的一个功能，如图。

在讲解之前，先给小白普及一下知识，如果你对这个属性很熟悉，请跳转至下一楼。
Image组件中，Image Type（显示方式）有Simple、Sliced、Tiled、Filled四种。
下面一一介绍。
*Simple【普通】
*此显示模式下，Sprite将直接显示在控件中。如果大小不一致，将通过拉伸来填充控件。
*如果preserve Aspect勾选，图片将保持长宽比
*
*Sliced【切片】
*此显示模式下，Sprite将被视为9个切片[3*3]组成，图片控件只显示中间切片的边缘。
*如果Fill Center勾选，将显示完整切片
*
*Tiled【平铺】
*此显示模式下，sprite尺寸不变
*[自行类比Windows桌面壁纸填充方式中的平铺]
*
*Filled【填充】
*显示模式类似于Simple，但是可以有多个选项来选择展示“从无到有”的变化
*填充方式由Fill-Method属性决定。
*本帖不一一说明各个显示模式。如果你感兴趣，请自行查找资料。

要实现技能效果，我们会在技能面板中使用Filled模式来实现倒计时效果。
我们在Hierarchy面板中建立这样的父子关系

然后我们只需要在脚本中分别关联这几个对象写出相应脚本即可。
在我的项目中，我建立了一个结构体来保存各个属性（不要问我为什么不建立一个类）。

其中比较关键的代码在这里

对代码做简单注释
if(skillSprites[index].isOpen) //如果已经获得该技能执行
{
//Debug.Log("index = " + index);
if (skillSprites[index].isPressDown) //当技能被激活时执行
{
skillSprites[index].isOn = false; //冷却时间重置
skillSprites[index].timerMask.enabled = true; //CD蒙版激活
skillSprites[index].skillTimer -= Time.deltaTime; //CD时间开始倒计时
//startTimer[index]为该技能的冷却时间
//因为在Image组件fillAmount的值范围是[0,1]的float值，所以这里做一个计算转化为百分比
skillSprites[index].timerMask.fillAmount -= (Time.deltaTime / startTimer[index]);
//更新时间显示
skillSprites[index].timerText.text = skillSprites[index].skillTimer.ToString("F1");
}
}

妈了个巴子，发完之后突然觉得这玩意这么简单，几行代码就解决了…

我的帖子被官方微博放上去啦，[SMILING FACE WITH OPEN MOUTH AND SMILING EYES]