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

发表于2015-10-28
评论0 3.9k浏览

重要学习资源

不看本文的所有内容,都要去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通过脚本访问时的变量和方法。

  • anchorMinanchorMax定义了anchor矩形在父矩形中的位置和形状:
    • anchorMin是anchor矩形的左下角在父矩形中的归一化位置
    • anchorMax是anchor矩形的右上角在父矩形中的归一化位置
  • sizeDelta,在父矩形中,子矩形比anchor矩形横向改变绝对距离多少、纵向改变绝对距离多少。注意距离可以是正数也可以是负数。

至此,父矩形、anchorMinanchorMaxsizeDelta,4者定义了子矩形的形状。

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

至此,父矩形、pivotanchoredPosition,3者定义了子矩形的位置。

  • offsetMaxoffsetMin 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脚本逻辑组织结构等,都将讨论。
未完待续。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引