UGUI(Unity New UI System)使用注意点

重要学习资源

不看本文的所有内容，都要去unity ui官方视频教程看一下。

RectTransform

Anchor的简单理解

出现在教学视频UI RECT TRANSFORM4分45秒处。不看本文都要去看一下。

矩形的原点都在左下角。
3个重要的矩形：实在存在的父矩形、用于辅助的anchor矩形、实在存在的子矩形（当前矩形）。
父矩形内部包含了anchor矩形和子矩形。

下列图中，外框表示父矩形、“四叶花瓣尖”组成anchor矩形、蓝点表示子矩形。

图：子矩形四角跟anchor矩形四角一一对应。对应的两个角之间的距离固定。比如图中左上蓝点跟左上花瓣的距离总是80像素宽、30像素高。注意到，图中anchor矩形四角聚在一起。

图：子矩形四角跟anchor矩形四角一一对应。对应的两个角之间的距离固定。比如图中左上蓝点跟左上花瓣的距离总是40像素宽、20像素高。注意到，图中anchor矩形四角各自分开。

图：anchor矩形四角跟父矩形四角一一对应。对应的两个角之间的归一化距离（即距离占父矩形宽或高的比例）固定。比如图中左上花瓣跟左上角距离总是50%宽、60%高。注意到，图中anchor矩形四角聚在一起。

图：anchor矩形四角跟父矩形四角一一对应。对应的两个角之间的归一化距离（即距离占父矩形宽或高的比例）固定。比如图中左上花瓣跟左上角距离总是10%宽、50%高。注意到，图中anchor矩形四角各自分开。

总之，子矩形四角跟anchor矩形四角一一对应。对应的两个角之间的距离固定。anchor矩形四角跟父矩形四角一一对应。对应的两个角之间的归一化距离（即距离占父矩形宽或高的比例）固定。

通过这样的关系，就可以实现各种不同的适配方案。比如以下这些。

图：当四花瓣聚在一起时，父矩形改变大小，子矩形都大小不会改变，位置会锁定在归一化距离。

图：当四花瓣格子分开时，父矩形改变大小，子矩形大小会相应改变，位置会锁定在归一化距离。

RectTransform类成员解释

图：RectTransform通过脚本访问时的变量和方法。

• anchorMin和anchorMax定义了anchor矩形在父矩形中的位置和形状：
  • anchorMin是anchor矩形的左下角在父矩形中的归一化位置
  • anchorMax是anchor矩形的右上角在父矩形中的归一化位置

• sizeDelta，在父矩形中，子矩形比anchor矩形横向改变绝对距离多少、纵向改变绝对距离多少。注意距离可以是正数也可以是负数。

至此，父矩形、anchorMin、anchorMax和sizeDelta，4者定义了子矩形的形状。

• pivot，同时描述两点：子矩形的pivot点和anchor矩形的pivot点。这两个pivot点都是归一化位置点。
  • 比如pivot为(0.1, 0.7)，
    • 它既指anchor矩形的pivot点处于anchor矩形原点的右面10%、上面70%位置；
    • 它也指子矩形的pivot点处于子矩形原点的右面10%、上面70%位置。
  • 子矩形的旋转、缩放都是以子矩形的pivot点为中心。

• anchoredPosition，在父矩形中，子矩形pivot点相对于anchor矩形pivot点的绝对位置差。

至此，父矩形、pivot和anchoredPosition，3者定义了子矩形的位置。

• offsetMax、offsetMin和 rect现暂不讨论。

RectTransform组件使用解释

图：Inspector处于正常模式时的RectTransoform

图：Inspector处于Debug模式时的RectTransoform

从上图可以看出，RectTransform组件在Inspector正常模式下，并非暴露了上面提到比较难懂的类成员变量，Unity而是显示了更加人性化的属性面板。
当这些人性化的属性在Inspector面板修改后、或者在Scene里用鼠标拖拽后，Unity都将其“转换成”上面提到的类成员变量。
其实所谓人性化，即在编辑这些属性的时候，Unity会保持子矩形的位置不改变。

具体设置方法如下列图及其注释所示：

图：可以点击Anchor Preset来快速采用预设的常用anchor方案

图：按住shift来选择方案，会把pivot点也设置到对应的位置。留意图中每个方案的蓝点即pivot。

图：按住alt来选择方案，会把子矩形的位置也设置到对应的位置。留意图中每个方案的小白框即子矩形的位置。

图：当然也可以单独调整anchor、pivot的数值。

图：当一个轴（比如上图的X轴）的anchor是聚在一起的时候，可以调整子矩形的位置值（比如上图的Pos X）和子矩形的大小值（比如上图的Width）；当一个轴（比如上图的Y轴）的anchor是分开的，可以调整其子矩形边缘相距父矩形边缘的距离值（比如上图的Top和Bottom）

图：可以点击“R”开启“Raw”编辑模式（原始编辑模式）。即编辑anchor和pivot的时候，Unity将直接将这些值赋给上面提到的RectTransform成员变量，而不经过“人性化”的转换处理

图：可以点击“b”开启“Blueprint”编辑模式（蓝图编辑模式）。即编辑时忽略当前子矩形的旋转缩放，来进行对齐。

UGUI的Camera/Cavas注意点

为什么要注意这些

目的：美术同事在世界坐标系制作UI特效，能够原汁原味地在UGUI里进行呈现。

原因

• 假设基准分辨率为iPhone5/5s的1136×640。
• Canvas使用Screen Space - Overlay是很难和普通UI特效混用的，所以必须使用Camera来渲染Canvas；
• 2D图片纹理采取默认参数是100像素1米 ；
• 也就是，分辨率为640在世界中大小默认为6.4米；
• UGUI为了让Canvas填充Camera，Canvas的大小是随着Camera的投影平面改变而大小改变的；
• 所以，为了在世界坐标系里，让Canvas大小和2D图片默认大小一致（比如说这里是高度都是6.4米，酱才方便美术在制作UI特效时，进行位置、大小对比）；
• 所以，Camera的投影屏幕的高度在这里也必须是6.4米；
• 而Camera是正交投影时，“size”指的是投影平面高度的二分之一；
• 所以，Camera在正交投影时，“size”必须是3.2米。
• 另，当使用透视投影的Camera时，通过调节Camera的FOV和Canvas的Plane Dinstance，满足上面的条件为了在世界坐标系里，让Canvas大小和2D图片默认大小一致即可。

结论

在一般项目中，为了更好地应用传统特效，Canvas的Render Mode必须为Screen Space - Camera；为了让美术能更好地制作特效资源，Camera可选正交投影，这时，Camera的size必须是适配高度/100/2.

You Mean There's More?

是的，本文之后将持续更新。比如Bitmap Font、UI间前后关系、UI脚本逻辑组织结构等，都将讨论。
未完待续。