Unity UI学习（1）——制作技能冷却图标

在初步了解了Unity的UI相关资料后，对UI了更多了解。

首先了解一下相关概念

UI： User Interface 用户界面；

GUI： Graphic User Interface 图形化用户界面

NGUI：Next Gen User Interface 次世代用户界面

UGUI：Unity Graphic User Interface unity公司开发的图形化界面

GUI：类似应用软件的UI，外观不够美观，不能够自行对相关UI界面进行定制，属于高级控件。

UGUI/NGUI ：游戏软件UI，外观精致，可以自行对UI界面随意定制，属于低级控件。

NGUI是unity上的一个插件，UGUI是unity找到NGUI的开发者一起开发的unity自带的UI系统。

UGUI因为引入了锚点所以在做屏幕自适应上会更方便，深度管理（UI渲染顺序）上，UGUI更简单方便，UGUI没有图集概念，可以更好地利用资源。

开始制作一个技能的冷却图标。

扫描二维码关注公众号，回复： 2167402 查看本文章

首先在Hierarchy界面下创建一个button,然后右击button选择UI中的Image,再右击button选择创建一个Text。创建后如下图：

点击button在Inspector窗口对Image中的source Image进行修改。然后点击Set Native Size，将图片的大小变为本地文件的大小。

更换后如下图：

点击 button下方的 Image,更换 source Image 中的图片，选择一张没有太多形状的图片，可以是任何颜色的图片，然后将 Image Inspector 中 Rect Transform 中的 width 和 height 调整为 button 同样的数值。改变 color 的颜色为黑色，设置透明度为0.7左右。将 Image type 类型改为 filled。设置完成后的界面为下图：

然后将Text中值改为3，做字符大小颜色的修改。

技能按下后的初始界面搭建完毕，接下来需要在代码中实现技能按下后的具体效果。

代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class SkillCD : MonoBehaviour {
    public Button skillbtn;  //按键
    public Image mask;  //按键下的Image
    public Text cd;  //按键下的Text
    private const float cdtime = 3f;  //冷却时间设置为3秒
    private float cultime=0f;  //按下按键后经过的时间
    // Use this for initialization
    void Start() {  
        //给按钮绑定一个监听方法，当按下按钮后执行这个方法。
        skillbtn.onClick.AddListener(Onclickbtn);
        //初始化时，按钮是没有被按下的，所以应该处于EndSkill状态
        EndSkill();
    }


    // Update is called once per frame
    void Update() {
        //对按钮的可用与否进行逐帧检测，如果不可用说明按钮已经被按下，那么遮罩(button下的Image)的覆盖面积随时间逐步减少，直到为0
        //同时Text中的数值也要更新，采用整数秒显示
        if (skillbtn.interactable == false)
        {
            if (mask.fillAmount > 0f && mask.fillAmount <= 1f)
            {
                cultime += Time.deltaTime;
                mask.fillAmount = (cdtime - cultime) / cdtime;
                 
                cd.text = Mathf.CeilToInt((cdtime - cultime)).ToString();
            }
            //一旦冷却时间到了，也就是遮罩覆盖面积为0时，执行EndSkill方法，刷新技能状态
            if (mask.fillAmount == 0)
            {
                EndSkill();
            }
        }
    }
    //按钮被按下后启动技能开始方法
    public void Onclickbtn()
    {
        StartSkill();
    }
    //技能开始后，遮罩（button下的Image）会覆盖button图形，并且设置按钮不能再起作用，Text显示的倒计时初始为3.
    public void StartSkill()
    {
        mask.fillAmount = 1;
        skillbtn.interactable = false;
        cd.text = cdtime.ToString();
       


    }
    //技能结束后，遮罩覆盖为0，按钮恢复可以起作用，Text不显示内容，同时将按钮被按下后经过的时间恢复成0
    public void EndSkill()
    {
        mask.fillAmount = 0;
        skillbtn.interactable = true;
        cd.text = string.Empty;
        cultime = 0;
    }

}

最后将此脚本绑定到button上，分别将button,Image,Text拖入脚本所声明的UI。如下图：

完成后可以进行试验查看效果：

以上，祝好！

Unity UI学习（1）——制作技能冷却图标

猜你喜欢