在初步了解了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没有图集概念,可以更好地利用资源。
开始制作一个技能的冷却图标。
首先在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。如下图:
完成后可以进行试验查看效果:
以上,祝好!