Unity学习——UGUI制作技能的冷却效果

技能冷却的原理是控制Image中的填充效果为Filled时的FilledAmount属性值的依次减少，从而产生技能的冷却效果。

首先我们需要准备素材，技能的背景图（SkillBg），技能图（Image），冷却的技能图（FillImage只是把技能图的颜色设置为黑灰色）

然后将每个图罗列好（背景图是技能图和冷却图的父物体），背景图和技能图无须修改，只要将冷却图的Image Type修改为Filled， Fill Method修改为360，Fill Origin修改为Top。！！！！！！！！！！
注意：FillAmount是控制冷却图显示的比例，自己调节FillAmount属性观看冷却图的显示效果。

为背景图添加一个button控件和一个c#脚本
My Skill的脚本如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//一定要有这个头文件
public class MySkill : MonoBehaviour {
    public float coldTime = 2.0f;//定义技能的冷却时间
    private float timer = 0;//定义计时器
    private Image filledImage;//定义一个填充图片，下面从start方法里获取实例中的填充图片
    private bool isStartTime = false;//定义标志量，决定是否开始计时
    // Use this for initialization
    void Start () {
        filledImage = transform.Find("FillImage").GetComponent<Image>();//用transform中的Find方法获取名为FillImage物体中Image组件；
    }

    // Update is called once per frame
    void Update () {
        if (isStartTime)//当开始计时时执行下列代码
        {
            timer += Time.deltaTime;
            filledImage.fillAmount = (coldTime - timer) / coldTime;//按照时间比例显示图片，刚开始点击时，timer小，应该显示的背景图大
            if(timer>=coldTime)//判断是否达到冷却时间
            {
                filledImage.fillAmount = 0;//冷却图不显示
                timer = 0;//重置计时器
                isStartTime = false;//结束计时
            }
        }

    }
    public void OnShow()//定义一个点击按妞触发的方法
    {
        isStartTime = true;//当点击时开始计时；
    }
}

在背景图的button组件下添加一个点击事件，点击物体为背景图，点击方法为我们设置的OnShow方法；
运行场景


这就是一个简单的技能冷却效果的展示。
很多时候我们还需要用键盘上的键来操作技能方法同样简单，只需要在UpDate中添加几行代码即可；

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//一定要有这个头文件
public class MySkill : MonoBehaviour {
    public float coldTime = 2.0f;//定义技能的冷却时间
    private float timer = 0;//定义计时器
    private Image filledImage;//定义一个填充图片，下面从start方法里获取实例中的填充图片
    private bool isStartTime = false;//定义标志量，决定是否开始计时
    // Use this for initialization
    void Start () {
        filledImage = transform.Find("FillImage").GetComponent<Image>();//用transform中的Find方法获取名为FillImage物体中Image组件；
    }

    // Update is called once per frame
    void Update () {
        /////////////////////////////////////////////
        /////////////////////////////////////////////
        if (Input.GetKeyDown(KeyCode.Alpha1))//当按下键盘上的数字1键，触发技能
            isStartTime = true;
        if (isStartTime)//当开始计时时执行下列代码
        {
            timer += Time.deltaTime;
            filledImage.fillAmount = (coldTime - timer) / coldTime;//按照时间比例显示图片，刚开始点击时，timer小，应该显示的背景图大
            if(timer>=coldTime)//判断是否达到冷却时间
            {
                filledImage.fillAmount = 0;//冷却图不显示
                timer = 0;//重置计时器
                isStartTime = false;//结束计时
            }
        }

    }
    public void OnShow()//定义一个点击按妞触发的方法
    {
        isStartTime = true;//当点击时开始计时；
    }
}

这样以来，鼠标点击技能会触发技能，按下键盘的数字键1同样也会触发技能。