Unity简单实现技能读条CD

学习目标：

学习常见游戏（如英雄联盟）技能CD进入读条

---

学习内容：

学习UI界面上下层级关系

学习面板的各种属性

如何实现技能读条CD呢

先来看看实际效果吧（先点击鼠标左键）

---

代码以及实际内容展示：

首先我们，要有一个图标，一个半透明的条，一个计时器文本Text

为了方便我们就做个正方形⑧

相信聪明的你，一定会先把场景调整2D 吧（不会吧不会吧？？？？）

先创建一个子对象Image，然后再RGB color面板上将最后一个A调成半透明

然后创建好字体，调整好大小以及摆放位置，然后关键来了！

我们先将子图片对象Image改名为Mask，然后在Image组件里开整！

将Image Type调成Filled模式，然后下面就会多出几行，拉动Fill Amount的进度条（只有0——1），会发现半透明的图片就会旋转式消失，这就是转技能CD！

Fill Method是指填充是按什么角度，360°表示旋转一周的填充，180°表示半周的填充

Fill Origin表示的从哪里开始，Top表示从上面开始填充

ClockWise表示顺时针还是逆时针，如果不勾选，Fill Amount从1到0就是顺时针

介绍完这些后，就可以开始写代码了

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SkillsCD : MonoBehaviour {

    [Header("技能CD")]
    [Range(1,100)]
    public float cd = 3f;

    private Text myText;

    private Image myImage;

    private bool beginCD = false;
    private void Awake()
    {
        myImage = GetComponent<Image>();
        myText = transform.GetChild(0).GetComponent<Text>();
    }

    private void Update()
    {
        //如果按下鼠标左键
        if (Input.GetMouseButtonDown(0) &&beginCD == false)
        {
            beginCD = true;
            //技能开始进入CD
            myImage.fillAmount = 1;
        }
        if (beginCD)
        {
            //要将fillAmount,!!fillAmount的范围只能是0-1，所以还要除以个CD
            myImage.fillAmount -= Time.deltaTime / cd;

            myText.text = (myImage.fillAmount * cd).ToString("0.00");
            if (myImage.fillAmount == 0)
            {
                beginCD = false;
            }
        }
        
    }
}
要将fillAmount,!!fillAmount的范围只能是0-1，所以还要除以个CD
            myImage.fillAmount -= Time.deltaTime / cd;

同时，我们还要注意如何获取字体的组件

myText = transform.GetChild(0).GetComponent<Text>();

这就是子对象！

---

学习产出：

注意Image Type下面的四个属性，熟练掌握即可