画布 Canvas

画布 Canvas 是一块包含了所有 UI 元素的区域。画布 Canvas 是一个带有 Canvas 组件的游戏对象,所有的 UI 元素都必须是 Canvas 对象的子对象。

新建一个 UI 元素,例如通过菜单 GameObject > UI > Image 创建一个图像,如果场景中不存在 Canvas 对象,将自动创建一个。UI 元素作为 Canvas 的子对象被创建。

Canvas 区域在场景视图中显示为一个矩形。这样可以很容易地定位 UI 元素,而不需要(不依赖)一直显示游戏视图。

画布 Canvas 使用 EventSystem 对象来通知 Messaging System。

元素绘制顺序

画布 Canvas 中的 UI 元素的绘制顺序与它们在层级视图中显示的顺序相同。首先绘制第一个子对象,然后是第二个子对象,以此类推。如果两个 UI 元素发生重叠,后一个将显示在前一个之上。

要使某个元素显示在其他元素之上,只需要在层级视图中通过拖动重新排序元素。也可以在脚本中通过 Transform 组件上的这些方法来控制顺序:SetAsFirstSiblingSetAsLastSiblingSetSiblingIndex

渲染模式

画布 Canvas 具有一个 渲染模式 Render Mode 设置,可以用于控制是在场景空间还是世界空间中渲染。

场景空间 - 叠加

该渲染模式放置 UI 元素到屏幕上,位于场景的顶部。如果屏幕调整大小或改变分辨率,画布 Canvas 将自动改变大小,以匹配屏幕。

UI in screen space overlay canvas

UI,场景空间与画布叠加

场景空间 - 摄像机

该渲染模式类似于 场景空间 - 叠加,但是该模式的画布 Canvas 被放置在特定 摄像机 Camera 前方给定距离的位置上,这意味着摄像机 Camera 的设置会影响 UI 的外观。如果摄像机 Camera 被设置为 透视 Perspective,UI 元素将以透视方式渲染,透视变形程度可以用摄像机 Camera 的 视野 Field of View 控制。如果屏幕调整大小、改变分辨率或者摄像机 Camera 视锥发生变化,画布 Canvas 也将自动改变大小,以匹配屏幕。

UI in screen space camera canvas

UI,场景空间 - 摄像机 - 画布

世界空间

在该渲染模式下,画布 Canvas 的行为与场景中的任意其他对象一样。通过矩形变换组件 Rect Transform 可以手动调整画布 Canvas 的大小,UI 元素将基于 3D 位置被渲染在场景中其他对象的后面。这意味着,UI 成为了世界的一部分。这种模式也被成为『剧情界面』。

UI in world space canvas

UI,世界空间 - 画布