UGUI 技能冷却效果

UGUI 技能冷却效果实现

• 首先需要一个技能的Image，得到它的复制并且修改颜色或者Alpha值。

接着开始进行设置。

• 我们将需要进行冷却的图片更名为：FilledSkillImage。并修改它其中的Image属性。

Paste_Image.png

• 首先修改Color的RPGA通道中的Alpha值，让它出现透明效果。
• 接着将Image Type设置为Filled（填充类型）随便讲解一下ImageType的枚举类型
  • Simpe：Image的普通样式。
  • Sliced：NGUI中的九宫模式，（根据裁剪将图片分为九个部分，使其大小变化时只影响到中间的图片，类似H5中的圆形Button的浮动实现）
  • Tiled： 平铺。
  • Filled： 填充类型。
• 将Filled Method：设置为Radial 360，圆形的360度填充（根据自己需要自己设置）
• Filled Origin：填充的起点，这里设置为从Top开始进行填充。
• Filled Amount： 填充的比例，0为没有填充，1为填满。
• Clockwise： 控制旋转方向（填充方向）是顺时针还是逆时针的。勾选为顺时针填充，不勾选为逆时针。 由于我们这里做的是技能冷却，是反向填充的。所以这里不勾选。

为了实现技能冷却效果，首先我们需要将这个SkillImage设置为Button，所以需要给它添加Button组件。并为它添加一个SkillItem的脚本进行控制。

• 编写脚本。（其实核心就是Filled）

Paste_Image.png

• 这里不需要timer也可以使用协程去控制。

• 这里isStartTimer为标志位用于控制我们是否开始填充（技能冷却）同时可以可以添加到Button的委托中用于控制改变。

Paste_Image.png

• 我们将改变这个标志位的OnClick方法绑定给Button组件的OnClick方法.

Paste_Image.png

现在开始实现冷却。

• 首先我们需要理清思路，什么才是冷却的核心。答案就是Image组件中的fillAmount属性值，我们可以通过改变这个属性值去改变填充。接着去实现九行。

Paste_Image.png