Unity UI（用户界面）是 Unity 引擎中用于创建游戏和应用中的交互式界面的系统。它允许开发者设计、构建和管理 2D 和 3D 游戏内的菜单、HUD（抬头显示）、按钮、滑块、文本框等元素。

Unity UI 的主要组成部分

Canvas（画布）

Canvas 是所有 UI 元素的容器。你可以有多个 Canvas，每个 Canvas 可以有自己的渲染模式（Screen Space-Overlay, Screen Space-Camera 或 World Space）和相机设置。画布 使用 EventSystem 对象来协助消息系统。

元素绘制顺序

画布中的 UI 元素按照它们在 Hierarchy 中显示的顺序绘制。如果两个 UI 元素重叠，则后一个元素将显示在前一个元素之上。

要更改元素的显示顺序，只需在 Hierarchy 中拖动元素进行重新排序。也可以通过在变换组件上使用以下方法从脚本控制顺序：SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex。

渲染模式

  • Screen Space-Overlay：UI 元素直接渲染到屏幕之上，不受到任何相机的影响。
  • Screen Space-Camera：UI 元素相对于特定的相机进行渲染。
  • World Space：UI 元素作为场景中的 3D 对象存在，可以被任何相机渲染。

组件参数

Canvas

Canvas

  • Pixel Perfect（仅限 Screen Space 模式） 是否应该无锯齿精确渲染 UI？
  • Render Camera（仅限 Screen Space - Camera 模式） 应该将 UI 渲染到的摄像机。
  • Plane Distance（仅限 Screen Space - Camera 模式） UI 平面在摄像机前方的距离。
  • Event Camera（仅限 World Space 模式） 用于处理 UI 事件的摄像机。

Canvas Scaler

CanvasScaler

  • UI Scale Mode 确定画布中的 UI 元素的缩放方式。
    • Constant Pixel Size UI 元素都保持相同的像素大小。
    • Scale With Screen Size 跟随屏幕大小缩放。
    • Constant Physical Size UI 元素都保持相同的物理大小。

  1. Constant Pixel Size
    ConstantPixelSize

    • Scale Factor 按此系数缩放画布中的所有 UI 元素。
    • Reference Pixels Per Unit 如果精灵具有此“Pixels Per Unit”设置，则精灵中的每个像素将覆盖 UI 中的一个单位。

  2. Scale With Screen Size
    ScaleWithScreenSize

    • Reference Resolution UI 布局设计的目标分辨率。如果屏幕分辨率较大，则 UI 会放大，如果较小，则 UI 会缩小。
    • Screen Match Mode 在当前分辨率的宽高比不适应参考分辨率时，用于缩放画布区域的模式。
      • Match Width or Height 以宽度、高度或二者的某种平均值作为参考来缩放画布区域。
      • Expand 水平或垂直扩展画布区域，使画布不会小于参考。
      • Shrink 水平或垂直裁剪画布区域，使画布不会大于参考。
    • Match 确定是否以宽度、高度或二者的某种平均值作为参考进行缩放。
    • Reference Pixels Per Unit 如果精灵具有此“Pixels Per Unit”设置，则精灵中的每个像素将覆盖 UI 中的一个单位。

  3. Constant Physical Size
    ConstantPhysicalSize

Canvas Group

CanvasGroup

  • Alpha 此组中的 UI 元素的不透明度。该值介于 0 和 1 之间，其中 0 表示完全透明，1 表示完全不透明。注意，UI 元素也会保留自己的透明度，因此画布组的 Alpha 值将与各个元素的 Alpha 值彼此相乘。
  • Interactable 确定此组件是否接受输入。当设置为 false 时，禁用交互。
  • Block Raycasts 此组件是否作为射线投射的碰撞体？需要在连接到画布的图形射线投射器上调用 RayCast 函数。这不适用于 Physics.Raycast。
  • Ignore Parent Groups 此组还会受到游戏对象层级视图中更上层的画布组 (Canvas Group) 组件中的设置所影响，还是会忽略并因此覆盖这些设置？

画布组的典型用途为：

  • 通过在窗口的游戏对象上添加画布组并控制其 Alpha 属性来淡入或淡出整个窗口。
  • 通过将画布组添加到父游戏对象并将其 Interactable 属性设置为 false 来使整组控件不可交互（“灰显”）。
  • 通过在 UI 元素或其某个父元素上放置画布组 (Canvas Group) 组件并将其 Block Raycasts 属性设置为 false 来使一个或多个 UI 元素不阻止鼠标事件。

Canvas Renderer(画布渲染器)

**画布渲染器 (Canvas Renderer)**组件用于渲染画布中包含的图形 UI 对象。

UI 控件

Unity UI 提供了一系列预定义的控件，如 Button（按钮）、Text（文本）、Image（图像）、Slider（滑动条）、Toggle（切换开关）、Scrollbar（滚动条）、ScrollView(滚动视图)、InputFiled(输入框)、Dropdown (下拉框)等。

Layout（布局）

Unity UI 支持多种布局方式，如 Horizontal Layout Group（水平布局组）、Vertical Layout Group（垂直布局组）、Grid Layout Group（网格布局组），帮助自动排列 UI 元素。

在 Content 上添加 Content Size Fitter 和 Grid Layout Group,配置好参数就可以实现 ScrollView 的动态添加 Item.

Mask（遮罩）

Mask 可以用来限制 UI 元素的显示区域。
Mask

  • Show Mask Graphic: 在子对象上使用 Alpha 绘制遮罩（父）对象的图形

遮罩的常见用法是使用面板 (Panel) 对象作为“框架”显示大型图像的一小部分。为实现此目的，可先将图像设置为面板对象的子项。应调整图像的位置，使应该可见的区域直接位于面板区域的后面。然后，将一个遮罩组件添加到面板。面板外面的子图像区域将变得不可见，因为这些区域被面板的形状所掩盖。

RectMask2D
RectMask2D 是一个类似于遮罩 (Mask) 控件的遮罩控件。遮罩将子元素限制为父元素的矩形。与标准的遮罩控件不同，这种控件有一些限制，但也有许多性能优势。

Event System（事件系统）

用于处理用户输入，如鼠标点击或触摸屏幕，以及发送事件到 UI 元素。

Raycast Target（射线目标）

UI 元素是否接受射线投射的属性，这对于响应用户的输入很重要。