全面理解 Unity UI 系统

随着 Unity 4.6 发布，新 UI 系统终于与大家见面了。 RectTransform Unity UI 系统使用 RectTransform 实现基本的布局和层次控制。RectTransform 继承于 Transform，所以 Transform 的所有特征 RectTransform 同样拥有。在 Transform 基础上，RectTransform 增加了 轴心（pivot）、锚点（实际上是用 anchorMin、anchorMax 两个点定义的矩形区域）、和 尺寸变化量（sizeDelta）。 轴心：表示UI元素的中心，使用相对于自身矩形范围的百分比表示的点位置，这会影响定位、缩放和旋转。 锚点：相对于父级矩形的子矩形区域，这个矩形各个边界值使用百分比表示。 尺寸变化量：相对锚点定义的子矩形的大小变化量，与锚点定义的子矩形合并后的区域才是最终的UI矩形。 在 Inspector 界面上，为了更方便的调节 RectTransform 的属性，锚点的两个点重合时会显示位置和宽高（直接调节位置和sizeDelta），否则显示相对锚点矩形边界的偏移量（通过计算后再赋值给位置和sizeDelta）。在程序中，RectTransform 添加了 anchoredPosition 和 rect 属性来更方便的编程。 RectTransform 组件同样负责组织 GameObject 的层级关系。在 UI 系统中，子级 UI 对象总是覆盖显示在父级 UI 对象上；层级相同的 UI 对象，下方的 UI 对象总是覆盖显示在上方的 UI 对象上。这样的设计避免了繁琐的深度设置。在程序中，Transform 添加了 SetSiblingIndex、GetSiblingIndex、SetAsFirstSibling、SetAsLastSibling 这些方法来方便的修改物体的层级顺序。 EventSystem 如果你使用 UI 系统，那么 EventSystem 对象会自动创建。这个对象负责监听用户输入。默认情况下，在电脑上可以使用键盘和鼠标输入，在移动设备上可以使用触摸输入。但是如果你要为surface这样的设备开发，你也可以同时启用两种输入。当需要屏蔽用户输入时，将此对象关闭即可。UnityEngine.EventSystems.EventSystem.current 保存了当前活动的 EventSystem 对象。 Canvas Canvas 是其他所有 UI 对象的根。在一个场景里 Canvas 数量和层级都没有限制。子 Canvas 使用与父 Canvas 相同的渲染模式。一个 Canvas 有三种渲染模式： Screen Space - Overlay：UI元素相对于屏幕空间，以2D方式显示在任何相机画面的上面。这是非常标准的 UI 风格。典型例子：大量窗口、文本和按钮的策略游戏。 Screen Space - Camera：UI元素相对于屏幕空间，由指定的相机负责显示，相机的参数影响显示的结果。你可以把 Canvas 理解为相机的子物体。典型例子：射击游戏屏幕上的 3D HUD。 World Space：UI元素相对于世界空间，和其他场景里的物体一样有世界位置、遮挡关系。通常用来做非常创新的 UI 设计。例子：游戏内的手机屏幕、与场景绑定的游戏指导等。 CanvasScaler 这个组件负责屏幕适配。UI 系统使用 RectTransform 来计算 UI 的位置和大小，但这还不够。如何让设计的 UI 可以适配不同的分辨率、宽高比和 DPI？这个组件给出了以下3种适配方法，注意任何一种适配方法都不会改变UI的宽高比和相对定位。 Constant Pixel Size：通过调节 Canvas 像素大小来维持缩放不变。它的意思是在任何屏幕上不改变 Canvas 的缩放系数（Scale Factor），而是调节 Canvas 的像素大小与屏幕保持一致。你可以手动或通过代码调节 Canvas 的缩放系数。这是 UI 系统默认的适配方案。如下图两种分辨率下相同的UI显示的不同之处，虽然不同屏幕下UI元素定位、大小没有发生变化（图中两个白色元素定位分别为屏幕左上角和右下角），但是较小的屏幕上UI元素占用了大部分屏幕空间，显得更拥挤。这就是这种适配方式的缺点，小屏幕太拥挤、大屏幕太空旷，没有考虑到屏幕的分辨率和DPI。但是这种模式的好处是UI元素可以保持设计时的细节（因为没有缩放）。这种模式可能适用于：你希望UI在一定范围内按原始大小显示，这样既可以让UI显示的尽可能清晰、又可以让屏幕较大的玩家拥有更广阔的视野，但是在太小或太大的屏幕上，你可以通过程序来调节缩放系数，不至于小屏幕被UI占满、大屏幕找不到UI。 Scale With Screen Size：根据屏幕分辨率缩放。这可能是大部分游戏最方便的适配方法。在这种模式下，你需要指定一种设计分辨率，然后指定缩放的算法。无论哪种缩放算法，如果实际宽高比与设计宽高比相同，UI 都会被等比缩放。实际上，Canvas 只是保持自己的大小和设计分辨率一致。如果实际宽高比与设计宽高比不同，这时缩放算法才会影响显示结果。缩放算法有三种：扩展、收缩 和 匹配宽高。扩展算法的逻辑是，扩大 Canvas （在宽高比上）较短的一边，使得 Canvas 宽高比与屏幕一致。如下左图，设计分辨率宽高比为1：1（红色线框），实际屏幕更宽所以 Canvas 的 width 增加以匹配屏幕。这样的算法在宽高比不同的屏幕上将始终导致UI更“开阔”。收缩算法的逻辑是，收缩 Canvas （在宽高比上）较长的一边，使得 Canvas 宽高比与屏幕一致。如下中图，设计分辨率宽高比为1：1（红色线框），实际屏幕更窄所以 Canvas 的 height 减小以匹配屏幕。这样的算法在宽高比不同的屏幕上将始终导致UI更“紧凑”。匹配宽高的算法逻辑是，根据指定的权重，同时调节 Canvas 的宽和高，使得 Canvas 宽高比与屏幕一致。如下右图，设计分辨率为红色线框，设定宽度和高度的权重相等（0.5），实际屏幕上 Canvas 的宽和高都被调整以匹配屏幕。这样的算法目的是，通过可调节的宽高权重，尽可能的保持UI的原始设计。   Constant Physical Size：通过调节 Canvas 物理大小来维持缩放不变。它的意思是在任何屏幕上不改变 Canvas 的 DPI，而是调节 Canvas 的物理大小总是与屏幕保持一致。这种说法可能比 Constant Pixel Size 更难以理解，实际上他们本质是一样的，只不过 Constant Pixel Size 通过逻辑像素大小调节来维持缩放，而 Constant Physical Size 通过物理大小调节来维持缩放。使用这种模式必须指定一个像素转换物理大小的因数（填写96方便在windows上进行开发）。运行时通过具体设备报告的dpi计算 Canvas 像素大小和缩放系数。这种模式从设计的意图来看，是为了在开发时使用物理单位而非像素单位，这只会让程序和美术的工作变得复杂，实际使用价值并不高。因为开发