unity之UGUI基础

Canvas

Canvas（画布）是UI的基础，创建Canvas时也会自动创建一个EventSystem用于处理UI交互事件。

Canvas持有的组件如下：

Rect Transform

是Transform的特殊实现，用于所有UI元素。

image-20260224133628187
根组件：没有预制锚点，面板灰色无法控制。

image-20260224141123800
子组件：有预制锚地，面白正常可以控制。

  • Base：(会更具Anchors的设置而改变)

    • Pos X/Y/Z：局部坐标，等同于Transform的xyz。
    • Width/Height：定义矩形的宽度和高度。

  • Anchors(锚点)：子物体可以使用预制Anchors。

    • Min：确定锚点x/y值较小的位置。
    • Max：确地锚点x/y值较大的位置。

  • Pivot(旋转轴)：控制UI物件的旋转轴和中心，值代表百分比。UI物件的坐标点。

  • Rotation：控制物件选择角度

  • Scale：控制缩放

Anchors

特别的，Anchors是由四个小三角形组成的，用于锚定UI矩形相对其父物体的Transform。

image-20260224194037236

UI矩形的每个角对应一个“小三角形”，UI矩形每个角与其对于的小三角形距离恒定。

也就是说，当小三角形分开始，矩形会跟随父类物体的伸缩产生对于的伸缩。可以认为Anchors将UI矩形映射到一个父物体的矩形（线/点）上。

Base

注：Unity官方对于rect transform没有base的说法。这里便于表述，我起了这个名字。

Base信息是物体的pivot相对物体的Anchors的距离。但Anchors可以分开，（分开后不基于pivot计算，而是基于UI边界）因此Base信息存在四种情况：

  1. 锚点合为一体：PosX/Y和width/Height。
  2. 当MinX ≠ MaxX：PosX -> Left（UI左边界相对左锚点偏移量），width -> Right（相对右锚点偏移量）两者共同控制宽度。
  3. 当MinY ≠ MaxY：PosY -> Top（UI上边界相对上锚点偏移量），height -> Bottom（相对下锚点偏移量）两者共同控制宽度。

Canvas

image-20260301215848150

Canvas组件用于修改画布设置。

Render Mode

渲染模式有以下：

  • Screen Space - Overlay（屏幕空间-叠加）：将UI元素直接渲染在屏幕上，可以随屏幕大小自动调整。
  • Screen Space - Camera（屏幕空间-摄像）：将UI放置在摄像机前，可与 3D 物体产生深度遮挡关系，因此受摄像机设置的影响。
  • World Space（世界空间）：画布像场景物体一样处于世界空间中，作为物体渲染。

Pixel Perfect：勾选后，UI元素可与屏幕像素严格对齐。但高分辨率或非整数倍缩放，可能导致UI位置偏移。

Sort Order：用于控制多个Canvas的渲染前后顺序，数值越小，越先渲染（在更下层）。

Target Display：指定Canvas渲染的目标显示器。

Additional Shader Channels

为 UI 着色器提供额外的顶点数据通道，例如用于自定义特效、顶点动画等。

  • Nothing

Vertex Color Always In Gamma Color Space

顶点颜色始终在伽马色彩空间

勾选后，顶点颜色会始终以 Gamma 空间处理，避免在 Linear 色彩空间项目中出现颜色偏差。