Unity制作技能冷却的UI效果

 

新建两个Image，一个是技能图片的正常Image
一个技能图片的遮罩Image(透明度降低)，将遮罩的Image属性设置为Filled

通过代码控制FIll Amount的参数来实现技能图片的冷却效果

using UnityEngine;
using UnityEngine.UI;

public class Test : MonoBehaviour
{
    public Image mask_img;//遮罩的图片
    private bool canUseSkill; //是否可以使用技能
    public float skillCooldownTime; //技能冷却时间
    private float skillCooldownTimer = 2; //技能冷却时间计时器

    private void Update()
    {
        //快捷键发动技能
        if (Input.GetKeyDown(KeyCode.Alpha1) && canUseSkill)
        {
            canUseSkill = false;
            
            UseSkill();
        }

        if (canUseSkill == false)
        {
            skillCooldownTimer += Time.deltaTime;
            img.fillAmount = (skillCooldownTime - skillCooldownTimer) / skillCooldownTime;
            if (skillCooldownTimer >= skillCooldownTime)
            {
                canUseSkill = true;
                skillCooldownTimer = 0;
            }
        }
    }

    //点击发动技能
    public void OnClickSKill()
    {
        canUseSkill = false;
    }

    private void UseSkill()
    {
        
    }
}