Unity3D UGUI实现冷却时间的技能图标

哟哟哟，UGUI实现这个功能特别的简单。利用了Image组件的功能，接下来就为大家一步步实现这个小技能。

先为大家介绍一下Image组件的ImageType属性。
(1)Simple:        最普通模式，用原图显示。
(2)Sliced:         切片模式，首先对图片本身的SpriteEditor编辑器，编辑图片的边框范围

                         这行这样设置后，Image拉伸的时候图片的边框大小就不会改变。保持设置时候的宽度，适合公告栏等。效果可以自己去试试。

(3)Tiled: 瓦片模式，像瓦片一样填充。
(4)Filled: 填充模式，Fill Method 可以设置vertical horizontal 90° 180 ° 360° 填充。
                                Fill Origin 可以设置开始填充的位置。
                                Fill Amount 可以设置填空百分比。(可以用这个功能制作技能冷却)

好了，组件介绍完了。让我们来做图标了，动起来吧

1. 添加一个Image对象，改名为Skill，为他设置一个sprite，作为技能图标的背景底。
   

2. 在Skill里面添加一个子image对象，改名为icon，作为技能图标。
   

3. 然后再把第一步时候做的背景底copy一份，改名为mask放在Skill下面（记得把copy的那份里面的icon对象去掉），作为冷却时候的遮罩，当然也可以专门做一个遮罩，博主太懒就这样了= =。
   

4. 现在就是重点咯，然后选中mask对象，在iamge组件里面利用之前讲的知识，首先把图片透明度设置到百分之50左右，把imageType设置为Filled填充模式，然后设置填充方向Fill Origin为Top，把下面clockwise的勾去掉（这是设置是否正向旋转），然后拖动fill amount 就可以看到效果了。
   

5. 总感觉还缺点什么，对了，时间倒计时。。。这个简单，在mask下面添加一个text对象就可以啦，都设置成居中对齐。

我的天啊，这就结束了？这么简单，。。。。的确这么简单，接下来只需要给Skill加上C#脚本就可以控制倒计时和mask的旋转了，因为这个理想情况要涉及到人物当前技能状态等，我就只说说实现逻辑，就不去实现了，也太简单，一听就懂。

在玩家使用了技能后，会给根据技能ID获取技能类，然后设置状态处于冷却状态，玩家无法使用，必须等待这个ID的状态变回可使用状态。
当这个状态处于冷却状态时候，冷却动画就开始了，所以在update()里面判断当前对象的技能ID是不是处于冷却状态，如果是，就开始把mask对象的fill amount设置为1，然后开始计时 curTime += Time.deltaTime，fill amount = (coolingTime - curTime)/coolingTime; 就可以了(coolingTime是技能类里面技能需要的冷却时间)，当curTime == coolingTime,就把技能状态设置回可用。

搞定。
真的搞定了。
没看懂？怎么可能，相信自己，我都能懂，你也可以。