Unity UGUI基础

2022-05-23

基础知识

UGUI是Unity自带的，一套成熟的UI系统，UGUI所有的UI组件都要作为Canvas的子物体而存在。

Canvas（画布）：

渲染顺序：和层次结构中的显示顺序相同，也可由相机的深度、Layer级别决定（需要在子物体上单独添加Canvas组件）

渲染方式：屏幕空间、相机空间和世界空间。

交互方面：Canvas使用EventSystem对象来帮助消息传递系统。

Canvas Scaler（画布定标器）：

用于规范和调整画布上UI元素的整体缩放比例和像素密度。

UI Scale Mode（UI缩放模式）：
1. constant pixel size：UI元素一直保持相同的像素大小，简而言之就是不会自适应
2. scale with screen size：UI元素会根据屏幕进行自适应
3. constant physical size：UI元素一直保持相同的物理尺寸

EventSystem（事件系统）：

一个场景内只有拥有一个EventSystem组件，它负责射线投射，处理输入，发送事件。
StandaloneInputModule和TouchInputModule组件是系统提供的标准输入模块和触摸输入模块，我们可以通过继承BaseInputModule实现自己的输入模块。

要实现交互，还需要一个射线检测组件——Graph Raycaster，凡是继承了Graph类的UI，都能通过该组件进行射线检测，实现交互。
值得一提的是，EventSystem同样可以作用于3D物体，不过需要的射线检测组件是Physics Raycaster，一般将它挂载在Camera上，然后只需要在3D物体上挂载实现了交互接口的脚本，就可以实现交互控制。

Rect Transform：

~~借鉴参考~~抄袭了该文章的内容：Unity——RectTransform详解

Anchor：
当anchorMax与anchorMin相等时，Anchor呈现为一个点，称为锚点。
当anchorMax与anchorMin不相等时，Anchor呈现为一个框，姑且称为锚框。

绝对布局（即锚点状态）下：
无论分辨率是多少，父物体多大，该UI元素的大小是恒定的。
PosX,PosY,PosZ表征的就是Pivot到锚点的距离。
相对布局（即锚框状态下）：
此时，RectTransform的属性变为Left,Top,Right,Bottom,PosZ，表示UI元素的每一条边距离父物体的每一条边的距离。

Pivot：
Pivot中心点，就是UI元素旋转缩放的中心点，左下角为(0,0)右上角为(1,1)。

Offset：
OffsetMax：就是UI元素的右上角的坐标，减去AnchorMax的值，得到一个从AnchorMax指向元素右上角的向量(vector2类型)。
OffsetMin：就是UI元素的左上角的坐标，减去AnchorMin的值，得到一个从AnchorMin指向元素左上角的向量(vector2类型)。
sizeDelta：
sizeDelta的值就是OffsetMax-OffsetMin的值。
rect：
rect中的属性，不与UI元素所在的位置有关，只和其自身属性相关，所以其中的rect.width和rect.height属性就可以让我们在任何情况下取得元素的大小。
anchoredPosition：
在使用锚点的情况下，anchoredPosition表征的是元素Pivot到Anchor的距离。
在使用锚框的情况下，anchoredPosition表征的是元素Pivot到锚框中心点的距离。
BluePrintMode：
在蓝图模式下，RectTransforms 的矩形句柄（就是包裹UI组件的那个框）会忽略本地旋转和缩放。
Raw edit Mode：
轴心点和锚点是自由的。

UGUI运作机制

UGUI是在3D网格下建立起来的UI系统，它的每个可显示的元素都是以3D模型网格的形式来构建起来的。当UI被实例化时，UGUI首先要做的事就是构建网格。

也就是说当Unity3D制作一个图元，或者一个按钮，或者一个背景时，都会先构建一个方形网格，再将图片放入网格中。可以理解为制造了一个3D模型，用一个网格绑定一个材质球，材质球里存放了要显示的图片。

UGUI在这方面做了优化，它将一部分相同类型的图片都集合起来合成一个张图，然后将拥有相同图片相同shader的材质球合并成一个材质球，并且把分散开的模型网格也一起合并了，这样就生成了几个大网格和几个材质球，以及少许整张的图集。节省了很多材质球，图片，网格的渲染，UI的效率更高了很多，游戏在进行时才会顺畅。这就是我们常常在UI制作中提到的图集的概念，它把很多张图片都放置在一张图集上，导致大量的图片和材质球不需要重复的绘制，只要改变模型顶点上的uv即可。