Unity中的UI系统之UGUI

大家好，欢迎来到IT知识分享网。

概述

UGUI是什么
UGUI是Unity引擎内自带的UI系统
官方称之为:Unity UI
是目前Unity商业游戏开发中使用最广泛的UI系统开发解决方案
它是基于Unity游戏对象的UI系统,只能用来做游戏UI功能
不能用于开发Unity编辑器中内置的用户界面

UGUI基础——六大基础组件

六大基础组件概述

如何在Unity中使用UGUI
直接在Hierarchy窗口中右键
选择UI
UI中所有内容都是UGUI相关控件
六大基础组件
1、Canvas对象上依附的:
①Canvas:画布组件,主要用于渲染UI控件
②Canvas Scaler:画布分辨率自适应组件,主要用于分辨率自适应
③Graphic Raycaster:射线事件交互组件,主要用于控制射线响应相关
④RectTransform:UI对象位置锚点控制组件,主要用于控制位置和对其方式

Canvas画布组件

Canvas组件用来干啥
Canvas的意思是画布
它是UGUI中所有UI元素能够被显示的根本
它主要负责渲染自己的所有UI子对象

• Pixel Perfect: 是否开启无锯齿精确渲染(性能换效果)
• SortOrder: 排序层编号(用于控制多个Canvas时的渲染先后顺序)
• TargetDisplay: 目标设备(在哪个显示设备上显示)
• Additional Shader Channels:其他着色器通道,决定着色器可以读取哪些数据

2、Screen Space-Camera: 屏幕空间,摄像机模式,3D物体可以显示在UI之前

• RenderCamera:用于渲染UI的摄像机(如果不设置将类似于覆盖模式)
• Plane Distance:UI平面在摄像机前方的距离,类似整体Z轴的感觉
• Sorting Layer: 所在排序层
• Order in Laver: 排序层的序号

3、World Space:世界空间,3D模式，常用于处理VR或者AR

• Event Camera:用于处理UI事件的摄像机(如果不设置,不能正常注册UI事件)

CanvasScaler画布缩放控制器组件

必备知识

CanvasScaler是干啥的
CanvasScaler意思是画布缩放控制器
它是用于分辨率自适应的组件
它主要负责在不同分辨率下UI控件大小自适应
它并不负责位置,位置由之后的RectTransform组件负责

恒定像素模式

Scale Factor:缩放系数,按此系数缩放画布中的所有UI元素
Reference Pixels Per Unit:单位参考像素,多少像素对应Unity中的一个单位(默认一个单位为100像素)
图片设置中的Pixels Per Unit设置,会和该参数一起参与计算
恒定像素模式计算公式

缩放模式

Reference Resolution:参考分辨率(美术同学出图的标准分辨率)。
缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算
Screen Match Mode:屏幕匹配模式,当前屏幕分辨率宽高比不适应参考分辨率时,用于分辨率大小自适应的匹配模式

• Expand:水平或垂直拓展画布区域,会根据宽高比的变化来放大缩小画布,可能有黑边
  
  
• Shrink:水平或垂直裁剪画布区域,会根据宽高比的变化来放大缩小画布,可能会裁剪
  
  
• Match Width Or Height:以宽高或者二者的平均值作为参考来缩放画布区域
  
  
  
  
  
  

恒定物理模式

DPI:(Dots Per Inch,每英寸点数)图像每英寸长度内的像素点数

Physical Unit:物理单位,使用的物理单位种类

Fallback Screen DPI: 备用DPI,当找不到设备DPI时,使用此值
Default Sprite DPI: 默认图片DPI
计算公式

恒定像素模式和恒定物理模式区别

3D模式

3D模式何时出现
当Canvas的渲染模式设置为世界空间3D渲染模式时
这时Canvas Scaler的缩放模式会强制变为
World 3D世界模式
参数相关
Dynamic Pixels Per Unit:UI中动态创建的位图(例如文本)中,单位像素数(类似密度)
Reference Pixels Per Unit:单位参考像素,多少像素对应Unity中的一个单位(默认一个单
位为100像素)

Graphic Raycaster图形射线投射器

Graphic Raycaster用来干啥
Graphic Raycaster意思是图形射线投射器
它是用于检测UI输入事件的射线发射器

EventSystem和Standalone Input Module

EventSystem组件用来干啥
Event System意思是事件系统
它是用于
管理玩家的输入事件并分发给各UI控件
它是事件逻辑处理模块
所有的UI事件都通过EventSystem组件中轮询检测并做相应的执行
它类似一个中转站,和许多模块一起共同协作

RectTransform

RectTransform组件用来干啥的
RectTransform意思是矩形变换
它继承于Transform
是专门用于处理UI元素位置大小相关的组件
Transform组件只处理位置、角度、缩放
RectTransform在此基础上加入了矩形相关,将UI元素当做一个矩形来处理
加入了中心点、锚点、长宽等属性
其目的是更加方便的控制其大小以及分辨率自适应中的位置适应
RectTransform组件参数

UGUI基础——三大基础控件

Image图像控件

Image是什么？
Image是图像组件，是UGUI中用于显示精灵图片的关键组件，除了背景图等大图，一般都使用Image来显示UI中的图片元素
参数相关

代码控制

Image img = this.GetComponent<Image>(); img.sprite = Resources.Load<Sprite>("路径名"); (transform as RectTransform).sizeDelta = new Vector2(200,200); img.raycastTarget = false; img.color = Color.red; 

Text文本控件

Text是什么
Text是文本组件
是UGUI中用于显示文本的关键组件
参数相关

富文本




边缘线和阴影
添加组件：
边缘线组件 outline

Text txt = this.GetComponent<Text>(); txt.text = "chx"; …… 

RawImage

RawImage是什么
RawImage是原始图像组件
是UGUI中用于显示任何纹理图片的关键组件

RawImage raw = this.GetComponent<RawImage>(); raw.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08"); raw.uvRect = new Rect(0, 0, 1, 1); 

UGUI基础——组合控件

Button按钮控件

Button是什么
Button是按钮组件
是UGUI中用于处理玩家按钮相关交互的关键组件

Button btn = this.GetComponent<Button>(); btn.interactable = true; btn.transition = Selectable.Transition.None; 

监听点击事件的两种方式
点击事件 是 在按钮区域抬起按下一次 就算一次点击

1.拖脚本

2.代码添加

btn.onClick.AddListener(ClickBtn); btn.onClick.AddListener(()=>{ 
    btn.onClick.RemoveListener(ClickBtn2); btn.onClick.RemoveAllListeners(); }); public void ClickBtn() { 
    } 

Toggle开关控件

Toggle是什么
Toggle是开关组件
是UGUI中用于处理玩家单选框多选框相关交互的关键组件
开关组件 默认是多选框
可以通过配合ToggleGroup组件制作为单选框

Toggle tog = this.GetComponent<Toggle>(); tog.isOn = true; ToggleGroup togGroup = this.GetComponent<ToggleGroup>(); togGroup.allowSwitchOff = false; foreach(Toggle item in togGroup.ActiveToggles()) { 
    } 

监听事件的两种方式
1.拖脚本
2.代码添加

tog.onValueChanged.AddListener(ChangeValue); tog.onValueChanged.AddListener((b) => { 
    print("代码监听 状态改变" + b); }); public void ChangeValue(bool isOn) { 
    } 

InputField文本输入控件

InputField是什么
InputField是输入字段组件
是UGUI中用于处理玩家文本输入相关交互的关键组件

InputField input = this.GetComponent<InputField>(); input.text = "123"; 

监听事件的两种方式
1.拖脚本

 public void ChangeInput(string str) { 
    print("改变的输入内容" + str); } public void EndInput(string str) { 
    print("结束输入时内容" + str); } 

2.代码添加

 input.onValueChanged.AddListener((str) => { 
    print("代码监听 改变" + str); }); input.onEndEdit.AddListener((str) => { 
    print("代码监听 结束输入" + str); }); 

Slider滑动条控件

Slider是什么
Slider是滑动条组件
是UGUI中用于处理滑动条相关交互的关键组件

Slider s = this.GetComponent<Slider>(); s.value; 

监听事件的两种方式
1.拖脚本

public void ChangeValue(float v) { 
    print(v); } 

2.代码添加

 s.onValueChanged.AddListener((v) => { 
    print("代码添加的监听" + v); }); 

ScrollBar滚动条控件

Scrollbar是什么
Scrollbar是滚动条组件
是UGUI中用于处理滚动条相关交互的关键组件

Scrollbar sb = this.GetComponent<Scrollbar>(); print(sb.value); print(sb.size); 

监听事件的两种方式
1.拖脚本

 public void ChangeValue(float v) { 
    print(v); } 

2.代码添加

sb.onValueChanged.AddListener((v) => { 
    print("代码监听的函数" + v); }); 

ScrollView滚动视图控件

ScrollRect是什么
ScrollRect是滚动视图组件
是UGUI中用于处理滚动视图相关交互的关键组件

ScrollRect sr = this.GetComponent<ScrollRect>(); //改变内容的大小 具体可以拖动多少 都是根据它的尺寸来的 //sr.content.sizeDelta = new Vector2(200, 200); sr.normalizedPosition = new Vector2(0, 0.5f); 

监听事件的两种方式
1.拖脚本

 public void ChangeValue(Vector2 v) { 
    print(v); } 

2.代码添加

sr.onValueChanged.AddListener((vec) => { 
    print(vec); }); 

Dropdown下拉列表控件

DropDown是什么
DropDown是下拉列表（下拉选单）组件
是UGUI中用于处理下拉列表相关交互的关键组件

Dropdown dd = this.GetComponent<Dropdown>(); print(dd.value); print(dd.options[dd.value].text); dd.options.Add(new Dropdown.OptionData("")); 

监听事件的两种方式
1.拖脚本

 public void ChangeValue(int value) { 
    print(value); } 

2.代码添加

dd.onValueChanged.AddListener((index) => { 
    print(index); }); 

UGUI基础——图集制作

Enabled For Builds（Legacy Sprite Packer）：Unity仅在构建时打包图集，在编辑模式下不会打包图集
Always Enabled（Legacy Sprite Packer）：Unity在构建时打包图集，在编辑模式下运行前会打包图集

Legacy Sprite Packer传统打包模式 相对下面两种模式来说 多了一个设置图片之间的间隔距离
Padding Power:选择打包算法在计算打包的精灵之间以及精灵与生成的图集边缘之间的间隔距离
这里的数字 代表2的n次方

Enabled For Build：Unity进在构建时打包图集，在编辑器模式下不会打包
Always Enabled：Unity在构建时打包图集，在编辑模式下运行前会打包图集
参数相关
在UI中，建议不要勾选

代码加载

//加载图集 注意：需要引用命名空间 SpriteAtlas sa = Resources.Load<SpriteAtlas>("MyAlas"); //从图集中加载指定名字的小图 sa.GetSprite("bk"); 

UGUI进阶

UI事件监听接口

事件接口是用来解决什么问题的
目前所有的控件都只提供了常用的事件监听列表
如果想做一些类似长按，双击，拖拽等功能是无法制作的
或者想让Image和Text，RawImage三大基础控件能够响应玩家输入也是无法制作的

IBeginDragHandler - OnBeginDrag – 即将开始拖动时在拖动对象上调用 （开始拖拽）
IDragHandler - OnDrag – 发生拖动时在拖动对象上调用 （拖拽中）
IEndDragHandler - OnEndDrag – 拖动完成时在拖动对象上调用 （结束拖拽）
不常用事件接口 了解即可
IInitializePotentialDragHandler - OnInitializePotentialDrag – 在找到拖动目标时调用，可用于初始化值
IDropHandler - OnDrop – 在拖动目标对象上调用
IScrollHandler - OnScroll – 当鼠标滚轮滚动时调用
IUpdateSelectedHandler - OnUpdateSelected – 每次勾选时在选定对象上调用

ISelectHandler - OnSelect – 当对象成为选定对象时调用
IDeselectHandler - OnDeselect – 取消选择选定对象时调用

导航相关 IMoveHandler – OnMove- 发生移动事件（上、下、左、右等）时调用 ``ISubmitHandler - OnSubmit– 按下 Submit 按钮时调用
ICancelHandler - OnCancel – 按下 Cancel 按钮时调用
使用事件接口
1.继承MonoBehavior的脚本继承对应的事件接口，引用命名空间
2.实现接口中的内容

pointerId： 鼠标左右中键点击鼠标的ID 通过它可以判断右键点击
position：当前指针位置（屏幕坐标系）
pressPosition：按下的时候指针的位置
delta：指针移动增量
clickCount：连击次数
clickTime：点击时间

pressEventCamera：最后一个OnPointerPress按下事件关联的摄像机
enterEvetnCamera：最后一个OnPointerEnter进入事件关联的摄像机

EventTrigger事件触发器

事件触发器是什么
事件触发器是EventTrigger组件
它是一个集成了上节课中学习的所有事件接口的脚本
它可以让我们更方便的为控件添加事件监听
如何使用事件触发器
1.拖曳脚本进行关联

2.代码添加

 //申明一个希望监听的事件对象 EventTrigger.Entry entry = new EventTrigger.Entry(); //申明 事件的类型 entry.eventID = EventTriggerType.Drag; //监听函数关联 entry.callback.AddListener((data) => { 
    print("抬起"); }); //把申明好的 事件对象 加入到 EventTrigger当中 et.triggers.Add(entry); 

屏幕坐标转UI相对坐标

RectTransformUtility类
RectTransformUtility 公共类是一个RectTransform的辅助类
主要用于进行一些 坐标的转换等等操作
其中对于我们目前来说 最重要的函数是 将屏幕空间上的点，转换成UI本地坐标下的点
将屏幕坐标转换为UI本地坐标系下的点
方法：
RectTransformUtility.ScreenPointToLocalPointInRectangle
//参数一：相对父对象
//参数二：屏幕点
//参数三：摄像机
//参数四：最终得到的点
//一般配合拖拽事件使用

public void OnDrag(PointerEventData eventData) { 
    Vector2 nowPos; RectTransformUtility.ScreenPointToLocalPointInRectangle( parent, eventData.position, eventData.enterEventCamera, out nowPos ); this.transform.localPosition = nowPos; //this.transform.position += new Vector3(eventData.delta.x, eventData.delta.y, 0); } 

Mask遮罩

遮罩是什么
在不改变图片的情况下
让图片在游戏中只显示其中的一部分
遮罩如何使用
实现遮罩效果的关键组件时Mask组件
通过在父对象上添加Mask组件即可遮罩其子对象

模型和粒子显示在UI之前

模型显示在UI之前

方法一：直接用摄像机渲染3D物体
Canvas的渲染模式要不是覆盖模式
摄像机模式 和 世界(3D)模式都可以让模型显示在UI之前（Z轴在UI元素之前即可）

粒子特效的显示和3D物体类似

异形按钮

什么是异形按钮
图片形状不是传统矩形的按钮
如何让异形按钮能够准确点击

方法一 通过添加子对象的形式
按钮之所以能够响应点击，主要是根据图片矩形范围进行判断的
它的范围判断是自下而上的，意思是如果有子对象图片，子对象图片的范围也会算为可点击范围
那么我们就可以用多个透明图拼凑不规则图形作为按钮子对象用于进行射线检测
方法二 通过代码改变图片的透明度响应阈值
1.第一步：修改图片参数 开启Read/Write Enabled开关
2.第二步：通过代码修改图片的响应阈值

public Image img; img.alphaHitTestMinimumThreshold = 0.1f; 

自动布局组件

自动布局是什么
虽然UGUI的RectTransform已经非常方便的可以帮助我们快速布局
但UGUI中还提供了很多可以帮助我们对UI控件进行自动布局的组件
他们可以帮助我们自动的设置UI控件的位置和大小等

Preferred width：在分配额外可用宽度之前，此布局元素应具有的宽度
Preferred height：在分配额外可用高度之前，此布局元素应具有的高度。

Flexible width：此布局元素应相对于其同级而填充的额外可用宽度的相对量
Flexible height：此布局元素应相对于其同级而填充的额外可用宽度的相对量

在进行自动布局时 都会通过计算布局元素中的这6个属性得到控件的大小位置

组件名：Horizontal Layout Group 和 Vertical Layout Group
参数相关：
Padding：左右上下边缘偏移位置
Spacing:子对象之间的间距

ChildAlignment:九宫格对其方式
Control Child Size：是否控制子对象的宽高
Use Child Scale：在设置子对象大小和布局时，是否考虑子对象的缩放
Child Force Expand：是否强制子对象拓展以填充额外可用空间
网格布局组件
将子对象当成一个个的格子设置他们的大小和位置

组件名：Grid Layout Group
参数相关：
Padding：左右上下边缘偏移位置
Cell Size：每个格子的大小
Spacing：格子间隔
Start Corner:第一个元素所在位置（4个角）
Start Axis：沿哪个轴放置元素；Horizontal水平放置满换行，Vertical竖直放置满换列
Child Alignment：格子对其方式（9宫格）
Constraint：行列约束

• Flexible：灵活模式，根据容器大小自动适应
• Fixed Column Count：固定列数
• Fixed Row Count：固定行数

内容大小适配器
它可以自动的调整RectTransform的长宽来让组件自动设置大小
一般在Text上使用 或者 配合其它布局组件一起使用

组件名：Content Size Fitter
参数相关
Horizontal Fit：如何控制宽度
Vertical Fit:如何控制高度

Unconstrained：不根据布局元素伸展
Min Size：根据布局元素的最小宽高度来伸展
Preferred Size：根据布局元素的偏好宽度来伸展宽度。

宽高比适配器
1.让布局元素按照一定比例来调整自己的大小
2.使布局元素在父对象内部根据父对象大小进行适配

• None：不让矩形适应宽高比
• Width Controls Height：根据宽度自动调整高度
• Height Controls Width：根据高度自动调整宽度
• Fit In Parent：自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比，会出现“黑边”
• Envelope Parent：自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比，会出现“裁剪”

Aspect Ratio：宽高比；宽除以高的比值

Canvas Group

问题：如何整体控制一个面板的淡入淡出等
如果我们想要整体控制一个面板的淡入淡出 或者 整体禁用
使用目前学习的知识点 是无法方便快捷的设置的
解决方案：Canvas Group
为面板父对象添加 CanvasGroup组件 即可整体控制