[Unity3D] 技能图标的冷却效果和时间显示

基本原理：利用 ImageType 中的Filled方法，通过代码控制FillAmount来实现图标的冷却效果。

主要步骤：

1 在Canvas中创建一个Image，起个名字比如“Offense”；

2 在Offense（Image）下，创建两个子Image（Bkg 和 Mask0）和一个子Text；如下图，其中Bkg可以用来给图标套框，可以不用；

3 导入需要的图标素材，并在Texture Type中将类型设置为Sprite，根据需要调整导入参数后，Apply。
这里使用了https://opengameart.org/content/painterly-spell-icons-part-3上的图标素材，作为示例。

用作技能图标的Fireball

用作Bkg的Frame

4 将素材添加到对应的Image组件上，如下：

出于简单考虑，Mask使用了unity自带的Background(Sprite)

5 Mask的ImageType设置为Filled，具体设置如下图：

Background的颜色设置成深色，并且跟需要调整好透明度，如下：

现在，便可以手动拖动Fill Amount的滚动条，来查看冷却效果。

技能冷却效果需要能和实际的冷却时间想关联，因此接下来需要通过代码实现：

6 编写冷却计时与冷却效果控制代码（C#），此代码作为参考，仅提供实现思路，实际使用还需要根据具体情况进行调整。

private const float m_CD_0 = 2f;             // 冷却时间，2s
private float[] m_CD_Left = new float[3];
private bool[] CD_Trigger = new bool[3];
private Image[] m_Masks = new Image[3];
private Text[] m_Texts = new Text[3];

void Start () { 

    CD_Trigger [0] = false;  // 初始化为false，在Update()中，跳过冷却计时代码；
    m_CD_Left[0] = m_CD_0;   // 初始化为对应冷却时间
    m_Masks[0] = GameObject.Find("Mask0").GetComponent();  // 获取Mask的实例，可用其他方法
    m_Masks[0].enabled = false;  // 禁用Mask，确保开始时，技能图标效果为可用；
    m_Texts[0] = BtnObject.GetComponentInChildren();   // 获取Text实例，可用其他方法
    m_Texts[0].enabled = false;  // 禁用Text，确保开始时，技能图标上无冷却数字显示；

}

void Update () {

    // 此处我有多个按钮需要不同的CD，因此用了数组;
    // CD_Trigger[0] 是一个bool值，用于判断是否开始冷却计时；
    if (CD_Trigger[0]) {

        m_CD_Left[0] -= Time.deltaTime;  // m_CD_Left[0] 冷却开始后，计算冷却剩余时间
        m_Masks[0].fillAmount = m_CD_Left[0] / m_CD_0; 
        // 更新对应mask的Image.FillAmount, 由于FillAmount是[0,1]，要换算成对应范围的小数
        m_Texts[0].text = string.Format("{0:F1}", m_CD_Left[0]); 
        // 更新技能文本中的数字显示，采用string.Format，详情可参考C#官方文档，“F1”表示一位小数

        if (m_CD_Left[0] < 0) {  // 如果剩余冷却时间为0，则停止冷却，并重新初始化相关变量。
            CD_Trigger[0] = false;   // 下一个frame开始将不再执行if (CD_Trigger[0]){...}语句块的代码；
            m_CD_Left[0] = m_CD_0;   // 剩余冷却时间重新赋值为初始值
            m_Masks[0].enabled = false;  // Mask被禁用，不显示在图标上
            m_Texts[0].enabled = false;  // Text被禁用，不显示数值
        }

    }
}

// 技能释放，在角色施法时被调用，这里是一个重载
// index是技能编号，groupindex是对应按钮编号，与本文无关可忽略。
public void SpellCast(int index, int groupindex){

    if (!CD_Trigger [groupindex]) { // 如果技能不再冷却中，则释放技能并开始冷却计时；如果技能在冷却，则跳过；
        CmdSpell (index,2f,SpellCastPosition.position,SpellCastPosition.rotation,groupindex);   
        // 真正的技能释放，与本文无关。
        CD_Trigger[groupindex] = true;  // 赋值为True，下一个frame，开始冷却计时
        m_Masks[groupindex].enabled = true; // 启用Mask（Image）
        m_Masks[groupindex].fillAmount = 1; // FillAmount设为1，确保效果显示正确
        m_Texts[groupindex].enabled = true; // 启用Text，显示冷却数字
    }

}

7 Enjoy It！

至此，基本的技能图标的冷却效果和时间显示便完成了，还不赶快试一下吗？