技能CD倒计时效果的实现
- 首先我们创建两个Image,一个Text
- 一个Image用于Button
- 一个Image用于遮罩,调成变透明
- 两个Image用同一个图片比较好
- Text用于显示剩余技能冷却时间
- 此处我选择直接通过代码添加一个Button到SkillCD物体上
private Button btn;
void Start()
{
btn = transform.AddComponent<Button>();
}
- 直接看图了解原理
- 我们将图片类型Image Type改为Filled,即填充
- 选择填充的方法 Fill Mothed 改为360°填充
- 此时调整填充量Fill Amount 就会发现遮罩按照填充量0 - 360° 显示图片。(0<=Fill Amount<=1)
- 我们也可以选择代码修改这些对象的值
public class SkillCD : MonoBehaviour
{
private Image image;
private Button btn;
// Start is called before the first frame update
void Start()
{
image = transform.Find("Override").GetComponent<Image>();
image.raycastTarget = false;
image.type = Image.Type.Filled;
image.fillMethod = Image.FillMethod.Radial360;
btn = transform.AddComponent<Button>();
}
-
现在思路已经很明了,我们只需要通过代码计时控制遮罩Image的Fill Amount值,以及更新Text上的计数就可以实现简单的技能cd效果了!
-
先看效果
-
参考代码如下
using Unity.VisualScripting;
using UnityEngine;
using UnityEngine.UI;
public class SkillCD : MonoBehaviour
{
[SerializeField]
private float cd;
private float curTime;
private Text text;
private Image image;
private Button btn;
// Start is called before the first frame update
void Start()
{
text = GetComponentInChildren<Text>();
text.raycastTarget = false;
text.gameObject.SetActive(false);
image = transform.Find("Override").GetComponent<Image>();
image.raycastTarget = false;
image.type = Image.Type.Filled;
image.fillMethod = Image.FillMethod.Radial360;
cd = 10;
btn = transform.AddComponent<Button>();
btn.onClick.AddListener(()=>{
curTime = cd;
image.fillAmount = 1;
text.gameObject.SetActive(true);
btn.enabled = false;
});
}
// Update is called once per frame
void Update()
{
if (curTime > 0)
{
curTime -= Time.deltaTime;
image.fillAmount = curTime / cd;
text.text = ((int)curTime).ToString();
if (curTime < 0)
{
text.gameObject.SetActive(false);
btn.enabled = true;
}
}
}
}