UGUI图形系统
1画布与事件系统
1.1画布
画布用于承载所有的UI元素。
Canvas物体的Canvas组件Render Mode分为三种：
第一种：Screem Space Overlay模式，该模式下画布中的元素始终在前面。
第二种：Screem Space Camera模式，该模式下画布中的元素是否在前取决于它与物体的位置。
第三种：World Space模式，该模式下画布可以自由移动缩放。可用来做人物的血条等。
1.2事件系统
事件系统是使画布内元素产生效果系统，创建画布后会自动创建，如果不小心删除也可点击添加单独创建。
2.图像、文本框、按钮、输入框的脚本交互
2.1登录按钮的脚本实现
示例
using UnityEngine;
using UnityEngine.UI;
public class Login : MonoBehaviour
{
InputField accountInput;
InputField passwordInput;
Button loginButton;
void Start()
{
accountInput = transform.Find("Account").GetComponent<InputField>();
passwordInput = transform.Find("Password").GetComponent<InputField>();
loginButton = transform.Find("Login").GetComponent<Button>();
loginButton.onClick.AddListener(LoginButtonOnClick);
}
void LoginButtonOnClick()
{
string account = accountInput.text;
string password = passwordInput.text;
Debug.Log("Account is " + account);
Debug.Log("Password is " + password);
}
}
该段代码实现的功能是，在输入账号和密码并点击登录键后，将账号和密码在控制台输出。
7.2.2更换背景图的脚本实现
示例
using UnityEngine;
using UnityEngine.UI;
public class Change : MonoBehaviour
{
public Sprite bg;
void Start()
{
transform.Find("Background").GetComponent<Image>().sprite = bg;
}
}
该段代码实现的功能是，在将新的图像添加到新建的脚本后，点击播放可以在运行时将背景图换成新的图像
7.2.3修改文本框
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
string text = "抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。\n适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。";
void Start()
{
transform.Find("Text").GetComponent<Text>().text = text;
}
}
该段代码实现的功能是，在运行时将文本框文字改为：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
7.2.4点击按钮导入链接
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
void Start()
{
transform.Find("Button").GetComponent<Button>().onClick.AddListener(ButtonOnClick);
}
void ButtonOnClick()
{
Application.OpenURL("https://v.qq.com/channel/choice?channel_2022=1");
}
}
该段代码实现的功能是，在点击了Button按钮后，跳转到网站https://v.qq.com/channel/choice?channel_2022=1。
7.3切换开关与开关组
7.3.1切换开关
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
InputField user;
InputField password;
Toggle toggle;
Button logon;
void Start()
{
user= transform.Find("User").GetComponent<InputField>();
password = transform.Find("Passward").GetComponent<InputField>();
toggle=transform.Find("Toggle").GetComponent<Toggle>();
logon=transform.Find("Logon").GetComponent<Button>();
logon.onClick.AddListener(logonOnClick);
}
void logonOnClick()
{
if (toggle.isOn == true)
{
string username= user.text;
string passwordnum=password.text;
Debug.Log("用户名是："+username);
Debug.Log("密码是："+passwordnum);
}
else
{
Debug.Log("请先同意用户协议");
}
}
}
该段代码实现的功能是，在点击了按钮后，可以正常登录，未点击时控制台显示：请先同意用户隐私协议！
7.3.2开关组
若有多个Toogle，而只能选择一个，可在Hierachy中新建一个空对象，在空对象的Inspector中添加一个Toggle Group，将空对象移入每个Toogle的Inspector>Toogle>Group中，运行即可实现单选,Toggle Group的Allow Switch Off指允许取消勾选，即选择后可以实现一个都不选。
7.4滑动条Slider的使用
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
Slider slider;
void Start()
{
slider = transform.Find("Slider").GetComponent<Slider>();
slider.onValueChanged.AddListener(OnValueChanged);
}
void OnValueChanged(float value)
{
Debug.Log("进度条的值为："+slider.value);
}
}
该段代码的功能是，在控制台显示slider滑动的值。
7.5滚动视图与遮罩的使用
7.5.1滚动视图Scroll View
滚动视图是容纳多个图标的容器，可以通过拖动滚动条来查看所有的图标，因为在Scroll View中的Viewport含有Mask组件，所以，图标只会在滚动视图内显示。
7.5.2Mask和Rect Mask 2D
Mask作为父物体的组件时，子物体超出父物体的部分不会显示，这里会识别父物体的透明度，透明度高的部分也不会被显示。
Rect Mask 2D作为父物体的组件时功能与Mask相同，但不会识别父物体的透明度，父物体以矩形方式呈现。
7.6水平、垂直、网格布局组件与布局元素
7.6.1水平、垂直和网格布局
水平布局组件：Horizontal Layout Group,在Scroll View>View Port>Content中加入该组件，可以将滚动视图中的图像设置成一行，并进行相关设置。
垂直布局组件：Vertical Layout Group,在Scroll View>View Port>Content中加入该组件，可以将滚动视图中的图像设置成一列，并进行相关设置。
网格布局组件：Grid Layout Group,在Scroll View>View Port>Content中加入该组件，可以将滚动视图中的图像设置成方固定方格排列，并进行相关设置。
7.6.2布局元素
布局元素组件：Layout Element,网格布局元素中的单个图像若添加该组件，并选择组件中的Ignore Layout,可以使该图像自由移动，不受网格限制。
7.7内容尺寸适配器Context Size Fitter
7.7.1内容尺寸适配器
该组件英文名Context Size Fitter，当在内容输入文本框或者在Scroll View>View Port>Content的网格状态下使用该组件，把Horizontal Fit项设置成Preferred Size时，可以根据内容自适应左右宽度的大小，Vertical Fit同理。
7.7.2克隆元素图标
示例
using UnityEngine;
public class Clone : MonoBehaviour
{
public GameObject hero;
public Transform content;
void Update()
{
if (Input.GetKeyDown(KeyCode.A))
{
GameObject clonehero=GameObject.Instantiate(hero);
clonehero.transform.parent = content;
}
}
}
将元素图标的预制件与HeroPanel>Scroll View>View Port>Content拖入该脚本并将该脚本挂到penel中后，可以在播放时通过按A键来克隆物体。
7.8UI特效与图片填充功能
7.8.1UI特效
Outline组件，该组件可以通过设置大小、颜色等给UI元素（如图片）描边。
Shadow组件，该组件可以通过设置大小、颜色等给UI元素（如图片）设置阴影。
7.8.2图片型进度条制作
示例
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public class FullFill : MonoBehaviour
{
public Image image;
void Start()
{
StartCoroutine(Fill());
}
IEnumerator Fill() //协程就是要等时间
{
float value = 0;
while(value<=1)
{
yield return new WaitForSeconds(0.5f);
value+=0.1f;
image.fillAmount = value;
}
}
}
新建两个层级不同的Image,父Image设置成背景色，子Image设置成填充色，并在子Image的Sourse Image中导入一张图片，将Image Type设置成Filled,将Fill Method设置成Horizontal,将Fill Origin设置成Left,将含上面代码的脚本挂到某一物体上，将子Image挂到脚本中，可以实现实现播放时的进度条加载效果。