Unity - UGUI

UI系统

1 UGUI是什么

它是基于Unity游戏对象的UI系统，只能用来做游戏UI功能，不能用于开发Unity编辑器中内置的用户界面。

2 UGUI六大基础组件

Canvas对象上依附的：

• Canvas：画布组件，主要用于渲染UI控件。
• Canvas Scaler：画布分辨率自适应组件，主要用于分辨率自适应。
• Graphic Raycaster：射线事件交互组件，主要用于控制射线响应有关。
• RectTransform：UI对象位置锚点控制组件，主要用于控制位置和对其方式。

EventSystem对象上依附的：

玩家输入事件响应系统和独立输入模块组件，主要用于监听玩家操作。

• EventSystem
• Standalone Input Module

3 Canvas

Canvas的意思是画布，它是UGUI中所有UI元素能够被显示的根本，它主要负责渲染自己的所有UI子对象。如果UI控件对象不是Canvas的子对象，那么控件将不能被渲染。

场景中允许有多个Canvas对象，可以分别管理不同画布的渲染方式，分辨率适应方式等等参数。

3.1 Canvas组件的3种渲染方式

Screen Space - Overlay：屏幕空间，覆盖模式，UI始终在前

Screen Space - Camera：屏幕控件，摄像机模式，3D物体可以显示在UI之前

World Space：世界空间，3D模式

3.1.1 Screen Space - Overlay

Pixel Perfect：是否开启无锯齿精确渲染（性能换效果）

SortOrder：排序层编号（用于控制多个Canvas时的渲染先后顺序），数字越小越先渲染

TargetDisplay：目标设备（在哪个显示设备上显示）【想一下任天堂的掌机】

Additional Shader Channels：其他着色器通道，决定着着色器可以读取哪些数据

3.1.2 Screen Space - Camera

RenderCamera：用于渲染UI的摄像机（如果不设置将类似于覆盖模式）

Plane Distance：UI平面在摄像机前方的距离，类似整体Z轴的感觉

Sorting Layer：所在排序层

Order in Layer：排序层的序号

基本上是不会将RenderCamera设置成场景中的Main Camera的，通常的做法，是在场景中再创建一个Camera，然后将其作为RenderCamera的值，为确保场景中的3D物体均出现在UI后面，此时要对Main Camera和Camera的Depth属性做设置，Main Camera的Depth设为-1，要求先渲染，再将Camera的Depth设为0，要求后渲染。此外，还要设置Main Camera和Camera的Culling Mask属性。

Culling Mask："Culling Mask"（剔除蒙版）属性用于确定相机在渲染场景时哪些图层（Layers）的对象应该被渲染，哪些应该被忽略。这个属性控制了相机的视锥体内可见的物体。

因为我们新增了一个Camera用于专门渲染UI，所以只需将Camera的Culling Mask设置为UI，并将Main Camera的Culling Mask的UI勾选去除，要做到分工明确。此外，考虑到有多个摄像机来绘制不同的游戏元素，我们其实希望UI始终位于3D场景、3D物体之前，所以还需要设置一下的Camera的Clear Flags属性，将其设置为Depth only。

Clear Flags：Determines which parts of the screen will be cleared. This is handy when using multiple Cameras to draw different game elements. "Clear Flags"（清除标志）属性用于控制相机在渲染新一帧之前如何清除屏幕上的内容。这个属性决定了相机在渲染时是否清除背景，并且如果需要清除，清除的方式是什么。

Unity官方文档，关于将Clear Flags属性设置为Depth only给了一个具体的应用场景，符合我们这里的需求。如果你想在不让玩家的枪支被环境剪裁的情况下绘制它，可以设置一个深度为0的相机来绘制环境，另一个深度为1的相机来单独绘制武器。将武器相机的"Clear Flags"设置为"仅深度"。这将保留环境的图形显示在屏幕上，但会丢弃关于每个物体在三维空间中的位置的所有信息。当绘制枪支时，不透明部分将完全覆盖任何绘制的东西，无论枪支离墙有多近。

Sorting Layer和Order in Layer主要用于确定多个Canvas间渲染的先后关系。

判定渲染的先后关系时，先依据所在的Layer来判断，Layer越靠前越先渲染，如果两个canvas处于同一个Layer，则再看Order in Layer，Order in Layer的值越小越先渲染。

如果确实需要3D模型在UI前显示，则可以将3D物体作为UI Image的子元素进行创建，主要调整下缩放。

3.1.3 World Space

3D模式，可以把UI对象像3D物体一样处理，常用于VR或者AR。

Event Camera：用于处理UI事件的摄像机（如果不设置，不能正常注册UI事件），关联场景中的Main Camera即可，因为往往使用这种世界模式的时候，就希望用主摄像机和其他3D物体来进行交互。

4 CanvasScaler

CanvasScaler是画布缩放控制器，它是用于分辨率自适应的组件。

它主要负责在不同分辨率下UI控件大小自适应。它并不负责位置，位置由之后的RectTransform组件负责。

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

4.1 背景知识

屏幕分辨率：Game窗口中的Stats统计数据窗口看到的当前“屏幕”分辨率会参与分辨率自适应的计算。

画布大小和缩放系数：选中Canvas对象后在RectTransform组件中看到的宽高和缩放，宽高 \(\times\) 缩放系数 \(=\) 屏幕分辨率

参考分辨率：在缩放模式的宽高模式中出现的参数，参与分辨率自适应的计算

汇总：

• 屏幕分辨率——当前设备的分辨率，编辑器下Game窗口中可以查看到
• 参考分辨率——在其中一种适配模式中出现的关键参数，参与分辨率自适应的计算
• 画布宽高和缩放系数——分辨率自适应会改变的参数，通过屏幕分辨率和参考分辨率计算而来
• 分辨率大小自适应——通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数，该结果会影响所有UI控件的缩放大小

4.2 CanvasScaler的三种适配模式

• Constant Pixel Size（恒定像素模式）：无论屏幕大小如何，UI始终保持相同像素大小
• Scale With Screen Size（缩放模式）：根据屏幕尺寸进行缩放，随着屏幕尺寸放大缩小
• Constant Physical Size（恒定物理模式）：无论屏幕大小和分辨率如何，UI元素始终保持相同物理大小

4.2.1 Constant Pixel Size

Scale Factor：缩放系数，按此系数缩放画布中的所有UI元素。

Reference Pixels Per Unit：单位参考像素，多少像素对应Unity中的一个单位（默认一个单位为100像素），图片设置中的Pixels Per Unit设置，会和该参数一起参与计算。

恒定像素模式计算公式：UI原始尺寸\(=\)图片大小（像素）\(/\) （Pixels Per Unit \(/\) Reference Pixels Per Unit）

个人感觉唐老狮这一块还是有点讲的云里雾里，我在这里继续补充一个别人写的博客来帮助理解。PPU & RPPU讲解

世界坐标系中对PPU的理解：在世界坐标系中使用PPU，PPU指的就是1个单位能放下多少个图片像素。如果PPU设置为100，那么假设你导入一个\(500\times 200\)的图片，那么导入后，按照默认的100PPU来算，实际在世界坐标系中的unity单位尺寸就是\(5\times2\)个单位。如果你不希望通过缩放来调整图片显示的尺寸，就可以用PPU来做。

对于RPPU而言，我们看上面的恒定像素模式计算公式也可以知道，在不改变RPPU的情况下，导入图片后默认PPU是100的情况下，UI大小是等于原图的，如果你将PPU改的越小，那么UI大小就会成倍变大，比如PPU改为25，那么原图就会在UI中放大4倍。

总结：恒定像素模式，它不会让UI控件进行分辨率大小自适应，会让UI控件始终保持设置的尺寸大小显示。

未完待续...

参考资料

[1] 张佑飞.帮你理清Unity中的Pixels Per Unit.https://developer.unity.cn/projects/609773eeedbc2a0021af70fa.