Unity中的UI系统之UGUI

概述

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对象位置锚点控制组件,主要用于控制位置和对其方式

2、EventSystem对象上依附的:
玩家输入事件响应系统和独立输入模块组件,主要用于监听玩家操作
①EventSystem
②Standalone Input Module

Canvas画布组件

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

如果UI控件对象不是Canvas的子对象,那么控件将不能被渲染
我们可以通过修改Canvas组件上的参数修改渲染方式
场景中可以有多个Canvas对象
场景中允许有多个Canvas对象
可以分别管理不同画布的渲染方式,分辨率适应方式等等参数

如果没有特殊需求
一般情况场景上一个Canvas即可
Canvas的三种渲染方式
1、Screen Space- Overlay:屏幕空间,覆盖模式,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组件负责

它主要提供了三种用于分辨率自适应的模式
我们可以选择符合我们项目需求的方式进行分辨率自适应
屏幕分辨率

画布大小和缩放系数
选中Canvas对象后在RectTransform组件中看到的宽高和缩放
宽高*缩放系数=屏幕分辨率
参考分辨率（Reference Resolution）
在缩放模式的宽高模式中出现的参数,参与分辨率自适应的计算
CanvasScaler的三种适配模式
Constant Pixel Size(恒定像素模式):无论屏幕大小如何,UI始终保持相同像素大小
Scale With Screen Size(缩放模式):根据屏幕尺寸进行缩放,随着屏幕尺寸放大缩小
Constant Physical Size(恒定物理模式):无论屏幕大小和分辨率如何,UI元素始终保持相
同物理大小

恒定像素模式

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输入事件的射线发射器

它主要负责通过射线检测玩家和UI元素的交互
判断是否点击到了UI元素
参数相关
Ignore Reversed Graphics:是否忽略反转图形
Blocking Objects:射线被哪些类型的碰撞器阻挡(在覆盖渲染模式下无效)
Blocking Mask:射线被哪些层级的碰撞器阻挡(在覆盖渲染模式下无效)

EventSystem和Standalone Input Module

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

如果没有它,所有点击 拖曳等等行为都不会被响应
EventSystem组件参数
First Selected:首先选择的游戏对象,可以设置游戏一开始的默认选择
Send Navigation Events:是否允许导航事件(移动/按下/取消)
Drag Threshold:拖拽操作的阈值(移动多少像素算拖拽)
Standalone Input Module组件用来干啥的
独立输入模块
它主要针对
处理鼠标/键盘/控制器/触屏(新版Unity)的输入
输入的事件通过EventSystem进行分发
它依赖于EventSystem组件,他们两缺一不可
Standalone Input Module组件用来干啥的
Horizontal Axis:水平轴按钮对应的热键名(该名字对应Input管理器)
Vertical Axis:垂直轴按钮对应的热键名(该名字对应Input管理器)
Submit Button:提交(确定)按钮对应的热建名(该名字对应Input管理器)
Cancel Button: 取消按钮对应的热建名(该名字对应Input管理器)
Input Actions Per Second: 每秒允许键盘/控制器输入的数量
Repeat Delay:每秒输入操作重复率生效前的延迟时间
ForceModule Active:是否强制模块处于激活状态

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

阴影组件 Shadow
代码控制

Text txt = this.GetComponent<