【Unity游戏开发教程】零基础带你从小白到超神30——UI组件

UI设计又称界面设计&＃xff0c;是指对软件的人机交互、操作逻辑、界面美观的整体设计&＃xff0c;UI就相当于人可以看到的界面&＃xff0c;并且可以对UI进行交互。

Unity 3D的UI&＃xff0c;分为UGUI和GUI&＃xff0c;UGUI主要是图形渲染界面&＃xff0c;搭建方便&＃xff0c;学习比较容易&＃xff0c;GUI主要是代码渲染界面&＃xff0c;需要在编写代码时就思考如何完善界面布局&＃xff0c;在运行项目时才能看到效果

1&＃xff1a;Canvas
所有的UI组件都在画布的子集里&＃xff0c;画布相当于所有UI组件的容器&＃xff0c;每当创建一个UI物体时&＃xff0c;Canvas都会自动创建&＃xff0c;所有的UI元素都必须是Canvas的子物体&＃xff0c;和Canvas一同创建的还有一个EventSystem&＃xff0c;它是一个基于Input的事件系统&＃xff0c;可以对键盘 触摸 鼠标自定义输入进行处理

Canvas&＃xff1a;控制UI的渲染模式

Render Mode&＃xff1a;渲染模式Screen Space overlay&＃xff1a;让UI始终位于界面最前面Screen Space camera&＃xff1a;赋值一个相机 按照相机的距离前后显示UI和物体World Space&＃xff1a;让画布变成一个3D物体 可以进行移动旋转等等


Canvas Scaler&＃xff1a;控制UI画布的缩放比例

Constant Pixel Size&＃xff1a;固定像素大小 无论屏幕尺寸如何变化&＃xff0c;UI都不会变化Scale With Screen Size&＃xff1a;根据屏幕分辨率&＃xff0c;自动调节UI比例Constant Physical Size&＃xff1a;固定物理像素大小


Graphic Raycaster&＃xff1a;控制是否让UI响应射线点击

Ignore Reversed Graphic&＃xff1a;忽略反转的UI UI反转后点击无效Blocking Objects&＃xff1a;阻挡点击物体 当UI前有物体时 点击前面的物体射线会被阻挡Blocking Mask&＃xff1a;阻挡层级 当UI前有设置的层级时 点击前面的物体射线会被阻挡


2&＃xff1a;Text
Text组件是UGUI中最常用的组件&＃xff0c;它的作用是对文本数据进行处理并显示

Font&＃xff1a;显示文字的字体Line Spacing&＃xff1a;行与行之间的垂直距离Rich Text&＃xff1a;富文本格式 勾选后可以显示文本中的标记标签信息


UGUI创建的所有组件都会默认勾选。

3&＃xff1a;Image
Image组件是UGUI中比较常用的组件&＃xff0c;用来控制和显示图片

Source Image&＃xff1a;需要显示的图片的来源Color&＃xff1a;图片的颜色Material&＃xff1a;渲染图像的材质Raycast Target&＃xff1a;能否接收到射线检测Image Type&＃xff1a;图片的排列方式


Texture Type:(一般为图片类型),一般是选择sprite(2D and UI)&＃xff0c;之后点击Apply

Simple&＃xff1a;标准的Sprite&＃xff0c;自适应大小

Sliced&＃xff1a;九宫格切片&＃xff0c;创建固定边框控件的最佳选择。边框固定&＃xff0c;图片中间做拉伸(缩放)&＃xff0c;如角色头像&＃xff0c;
按钮背景

Tiled&＃xff1a;平铺&＃xff0c;一个Sprite缩放填充整个区域&＃xff0c;如背景平铺

最后一个filled。
用来显示图片当中的某一部分的&＃xff0c;用来制作技能CD冷却时间或进度条。
FillMethod表示以什么方式进行切割&＃xff0c;其中 有水平方式、垂直方式&＃xff0c;90、180、360度圆方式进行切割。
FillOrigin表示从什么地方开始切割&＃xff0c;其中有上、下、左、右几种方式。
FillAmount表示切割哪一部分&＃xff0c;0表示不显示&＃xff0c;1表示全部显示。

4&＃xff1a;Button
Button是一个按钮组件&＃xff0c;在开发中经常使用&＃xff0c;通过单击按钮执行某些事件、动作、切换状态等

Interactable&＃xff1a;是否启动按钮 取消勾选则按钮失效Transition&＃xff1a;按钮状态过渡的类型Navigation&＃xff1a;导航On Click&＃xff1a;按钮单击事件的列表 设置单击后执行哪些函数Button组件可以通过On Click手动添加监听事件&＃xff0c;也可以通过代码动态添加监听事件


Button按钮监听函数测试代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class Test_16_1 : MonoBehaviour
{public void OnClickTest(){Debug.Log("点击了按钮");}
}


下面介绍代码动态添加监听事件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test_16_2 : MonoBehaviour
{Button TestBtn;void Start(){TestBtn &＃61; GetComponent<Button>();TestBtn.onClick.AddListener(OnClickTest);}public void OnClickTest(){Debug.Log("点击了按钮");}
}


然后将脚本添加到Button组件上执行即可

5&＃xff1a;Toggle
在项目开发时&＃xff0c;需要一个按钮模拟和控制开关&＃xff0c;这就是Toggle的作用&＃xff0c;Toggle组件通常进行状态判断&＃xff0c;如是否记住密码&＃xff0c;是否开启某些指令等

Toggle按钮监听函数测试代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test_16_3 : MonoBehaviour
{public void OnValueChanged(bool isOn){if (isOn){Debug.Log("开启");}else{Debug.Log("关闭");}}
}


将脚本绑定到相机对象上&＃xff0c;再添加到OnValueChanged单击事件中

下面通过代码动态添加监听事件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test_16_4 : MonoBehaviour
{Toggle TestToggle;void Start(){TestToggle &＃61; GetComponent<Toggle>();TestToggle.onValueChanged.AddListener(OnValueChanged);}public void OnValueChanged(bool isOn){if (isOn){Debug.Log("开启");}else{Debug.Log("关闭");}}
}


6&＃xff1a;Slider
Slider是一个滑动条组件&＃xff0c;一般用来制作血条或者进度条

下面我们来做一个滑动条自增的效果&＃xff0c;类似于进度条 脚本代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test_16_5 : MonoBehaviour
{public Slider m_Slider;//Slider组件public Text m_Text;//Text组件void Start(){//值初始化m_Slider.value &＃61; 0;m_Text.text &＃61; "";}void Update(){if (m_Slider.value < 100){m_Slider.value &＃43;&＃61; Time.deltaTime;//将value的取小数点两位m_Text.text &＃61; m_Slider.value.ToString(("F")) &＃43; "%";}}
}


7&＃xff1a;ScrollView
ScrollView组件是一个滚动窗口以及区域组件&＃xff0c;在做游戏背包或者商城展示大量物品时&＃xff0c;可以使用ScrollView组件

8&＃xff1a;Dropdown
下拉菜单&＃xff0c;可用于快速创建大量选择项、创建下拉菜单模板等

Dropdown组件比较常用的功能有添加选项、添加监听事件等等

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test_16_6 : MonoBehaviour
{public Dropdown m_Dropdown;void Start(){//第一种添加下拉选项的方案Dropdown.OptionData data &＃61; new Dropdown.OptionData();data.text &＃61; "第一章";Dropdown.OptionData data2 &＃61; new Dropdown.OptionData();data2.text &＃61; "第二章";m_Dropdown.options.Add(data);m_Dropdown.options.Add(data2);//第二种添加下拉选项的方案List<Dropdown.OptionData> listOptions &＃61; new List<Dropdown.OptionData>();listOptions.Add(new Dropdown.OptionData("第三章"));listOptions.Add(new Dropdown.OptionData("第四章"));m_Dropdown.AddOptions(listOptions);m_Dropdown.onValueChanged.AddListener(OnValueChanged);}public void OnValueChanged(int value){switch (value){case 0:Debug.Log("第一章");break;case 1:Debug.Log("第二章");break;case 2:Debug.Log("第三章");break;case 3:Debug.Log("第四章");break;default:break;}}
}


9&＃xff1a;InputField
InputField组件是输入框组件&＃xff0c;是一个用来管理输入的组件&＃xff0c;通常用来输入用户的账号&＃xff0c;密码或者再聊天室输入文字等等

下面添加单击登录按钮后显示密码和账号功能 代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test_16_7 : MonoBehaviour
{public InputField m_InputFieldName;public InputField m_InputFieldPwd;public Button m_ButtonLogin;public Text m_TextInfo;void Start(){m_ButtonLogin.onClick.AddListener(Button_OnClickEvent);}public void Button_OnClickEvent(){m_TextInfo.text &＃61; "账号&＃xff1a;" &＃43; m_InputFieldName.text &＃43; " 密码&＃xff1a;" &＃43; m_InputFieldPwd.text;}
}


运行程序 输入账号和密码&＃xff0c;单击登录按钮可以看到账号和密码显示出来