当前位置：首页 > news >正文

【Unity UGUI Canvas(画布)（1）】

news 2025/9/4 8:55:06

Unity UGUI 中Canvas组件三种渲染模式

引言

在 Unity UGUI 系统中，Canvas（画布） 是所有 UI 元素渲染的基石与容器。任何 UGUI 控件（如按钮、文本、滑块）都必须直接或间接地位于某个 Canvas 之下方能显示。Canvas 的核心职责是管理 UI 元素的渲染顺序、处理屏幕坐标转换，并最终决定 UI 以何种方式呈现在玩家面前。
官方手册是很好学习资料，这里贴参考画布组件介绍、设计多种分辨率的UI

壹—— Cnavas UI 元素渲染的基石与容器

Unity 为 Canvas 提供了三种不同的渲染模式（Render Mode），以适应从传统 2D 界面到沉浸式 3D 应用的不同需求。理解这三种模式的工作原理和适用场景，是构建高效、美观 UI 的关键。

Canvas渲染模式对比

一、屏幕空间 - 覆盖 (Screen Space - Overlay)

屏幕空间-覆盖模式是最常用且性能最优的模式。在此模式下，UI 将绘制在屏幕的最顶层，完全独立于任何场景摄像机。

特点

顶层渲染：UI 会覆盖在游戏画面之上，无视场景中的 3D 物体。
自动适配：Canvas 自动匹配屏幕分辨率，UI 元素根据设置的缩放策略自动调整大小。
无交互：UI 无法与 3D 场景产生遮挡或被光照影响。

机制与参数

渲染流程跳过常规的摄像机投影计算，直接由 GPU 绘制到帧缓冲区，效率极高。通过 Sort Order 参数控制多个 Canvas 的叠加顺序，值越大则显示在越上层。

关键参数	说明与建议
Pixel Perfect	消除边缘锯齿。注意：可能导致动态元素的平滑移动产生"跳跃感"。
Sort Order	设置渲染优先级（如主界面为 `10`，弹窗为 `20`）。
Target Display	多显示器设备上指定渲染目标。

适用场景

✅ 传统 2D UI：菜单、HUD、设置界面。
✅ 静态信息：分数、金币数、常驻提示图标。
❌ 需与 3D 场景交互的 UI。

性能优化

减少网格重建：避免频繁更新文本，采用事件驱动更新。
禁用冗余射线检测：对非交互元素取消勾选 Raycast Target。
动静分离：将动态与静态元素分属不同 Canvas，以减少重绘范围。
合并绘制：使用 Sprite Atlas 打包碎图，促进动态合批。

二、屏幕空间 - 摄像机 (Screen Space - Camera)

此模式是功能与性能的完美平衡点。Canvas 被渲染到一个由指定摄像机生成的、与摄像机保持固定距离（Plane Distance）的虚拟平面上。

特点

与场景交互：位于此平面前后的 3D 物体可以与 UI 产生自然的遮挡关系。
受摄像机影响：UI 会受指定的 Render Camera 的投影模式、光照和后期处理效果（如 Bloom）影响。
屏幕自适应：UI 依然会保持屏幕自适应，但其位置和深度由摄像机控制。

参数与应用

参数	说明
Render Camera	（必需）指定用于渲染此 UI 的摄像机。
Plane Distance	定义 UI 平面与摄像机的距离，直接影响遮挡关系。
Sorting Layer/Order in Layer	精细控制画布间的渲染顺序。

与摄像机投影模式的关系：

正交模式 (Orthographic)：推荐组合。UI 无透视变形，交互精准，适用于需融入场景又需保真交互的 UI。
透视模式 (Perspective)：UI 会产生透视变形，可能导致交互错位。适用于 VR 或需要强透视感的特殊 3D UI。

适用场景

✅ 需光影效果的 UI：让技能栏、血条等接受场景光照和后期处理，提升沉浸感。
✅ 需简单遮挡的 UI：实现"角色走到提示板后面"的效果。
✅ VR/AR 应用：UI 必须持续正对玩家双眼且能融入环境，是该领域的标准模式。

三、世界空间 (World Space)

这是功能最强大、最自由的模式。Canvas 完全变为场景中的一个普通 3D 对象，其显示与否、大小、角度完全由它在世界空间中的 Transform 决定。

特点

完全的 3D 对象：拥有真实的位置、旋转和缩放，像任何 3D 模型一样。
完全的交互：与场景环境深度交互，自然地被遮挡、产生透视变形。
手动管理：需要手动调整其位置和大小以适应场景。

与摄像机的关系

Canvas 的视觉表现完全取决于观察它的摄像机：

透视摄像机：UI 会呈现"近大远小"的透视效果，角度不正时会梯形畸变。
正交摄像机：UI 无透视变形，大小恒定，非常适合 2D 游戏或需要固定大小的世界 UI。

设置与注意事项

添加 Graphic Raycaster：必须确保有此组件，UI 才能响应点击事件。
调整初始缩放：Canvas 初始尺寸极大，通常需将 Scale 设置为 (0.001, 0.001, 0.001) 再调整。
注意性能：这是性能开销最高的模式，每个 World Space Canvas 都会产生独立的 Draw Call，应谨慎使用。
解决深度冲突：微调 Z 轴位置或使用 Sorting Layer 避免 UI 与场景几何体闪烁。

适用场景

✅ VR/AR 界面：将 UI 放置在虚拟或真实空间的特定位置。
✅ 游戏内实体 UI：车载显示屏、控制台 hologram、角色手中的地图。
✅ 叙事性 UI (Diegetic UI)：UI 本身就是游戏世界的一部分。

总结与选择

三种模式在性能开销、功能灵活性和与场景的交互性上形成了清晰的梯度：

特性	Screen Space - Overlay	Screen Space - Camera	World Space
性能开销	✅✅✅ 低	✅✅ 中	✅ 高
配置复杂度	✅✅✅ 简单	✅✅ 中等	✅ 复杂
与场景交互	❌ 无	✅ 部分 (基于平面)	✅✅✅ 完全
典型应用	传统 2D UI、HUD	需光影、遮挡的精致 UI、VR	游戏内实体屏幕、VR/AR

选择：

在这里插入图片描述

选择原则：在满足项目需求的前提下，始终选择更简单、开销更低的模式。 绝大多数情况应优先使用 Overlay，确有交互需求时再考虑 Camera 模式，World Space 则应仅用于那些必须完全融入3D世界的UI元素。

Canvas Scaler 与 Graphic Raycaster

在深入理解 Canvas 的三种渲染模式后，还有两个至关重要的组件共同构成了 UGUI 的渲染与交互体系：Canvas Scaler（画布缩放器） 和 Graphic Raycaster（图形射线投射器）。它们一个负责控制 UI 的“视觉尺寸”，一个负责处理 UI 的“触觉交互”。

贰——Canvas Scaler：UI 的缩放遥控器

Canvas Scaler 就像是 UI 的“缩放遥控器”。它的核心职责是：确保你在不同分辨率、不同尺寸的屏幕上，看到的 UI 布局和大小都符合你的设计预期。 没有它，你的 UI 在高分辨率设备上可能小得看不清，在低分辨率设备上又大得超出屏幕。

一、三种缩放模式

Canvas Scaler 提供了三种主要的缩放策略，你可以根据项目类型进行选择。

缩放模式	工作方式	好比是…	适用场景
Constant Pixel Size（恒定像素大小）	UI 元素永远保持相同的像素值。屏幕分辨率越高，UI 看起来越小。	“绝对标尺”。一个 100x100 像素的图片，在任何屏幕上都是 100 像素，但它在 4K 屏幕上看起来就会比在 1080P 屏幕上小得多。	主要用于桌面端游戏或应用，因为PC显示器分辨率相对固定，且用户期望UI元素像素精准。
Scale With Screen Size（随屏幕大小缩放）	（最常用）设定一个参考分辨率（如 1920x1080）。Scaler 会根据当前屏幕分辨率与参考分辨率的比例，对整个 Canvas 进行缩放。	“等比缩放模型”。你做了一个 1:100 的飞机模型（参考分辨率），现在要把它放进不同大小的盒子（屏幕）里。为了填满盒子，你会按比例将模型放大或缩小，但模型本身的比例不变。	绝大多数移动端和全平台游戏的首选。能保证 UI 在不同宽高比的屏幕上都能较好地自适应。
Constant Physical Size（恒定物理大小）	尝试让 UI 元素在不同DPI（每英寸像素数）的屏幕上保持相同的物理尺寸（如英寸、厘米）。	“现实标尺”。希望一个按钮在手机上和平板上的实际物理长度都是 1 厘米，尽管它们的分辨率和DPI完全不同。	较少使用，通常用于对物理尺寸有严格要求的特定应用或AR/VR中。

Screen Match Mode 只有三种：

Match Width Or Height
Expand
Shrink

下面逐个讲清楚，再重点解释 Match Width Or Height 里的 Match 滑条（0~1） 到底在干什么，并给具体例子。

1) Match Width Or Height（最常用）

原理

Unity 先把当前屏幕宽高和**参考分辨率（Reference Resolution）**做比值，得到两条缩放因子：

scaleW = 当前宽 / 参考宽
scaleH = 当前高 / 参考高

然后用一个插值系数 Match 把这两条因子合成一条最终缩放因子：

scale = scaleW * (1-Match) + scaleH * Match

Match = 0 → 100 % 按宽度缩放
Match = 1 → 100 % 按高度缩放
Match = 0.5 → 宽度、高度各取一半权重

例子

参考分辨率	实际屏幕	Match	缩放因子计算	结果说明
1920×1080	1280×720	0	1280/1920 = 0.667	完全按宽度做 0.667 倍缩放，高度留白/裁剪
1920×1080	1280×720	1	720/1080 = 0.667	完全按高度做 0.667 倍缩放，宽度留白/裁剪
1920×1080	2280×1080（19:9 手机）	0	2280/1920 = 1.187	画面被横向撑大，上下被裁剪
1920×1080	2280×1080	0.5	0.5×1.187 + 0.5×1 = 1.093	横向略大，纵向略大，兼顾两边

2) Expand（“撑开”）

永远选较小的那条缩放因子，保证 整个参考分辨率能完整塞进屏幕。
结果：UI 不会超出屏幕，但可能在左右或上下出现黑边 / 空白。

例子

参考分辨率	实际屏幕	计算	结果
1000×500	800×600	`min(800/1000, 600/500) = 0.8`	整个画布缩小到 0.8 倍，左右出现黑边

3) Shrink（“裁切”）

永远选较大的那条缩放因子，保证 屏幕被画布完全覆盖。
结果：UI 可能超出屏幕，需要额外处理 SafeArea。

例子

参考分辨率	实际屏幕	计算	结果
1000×500	800×600	`max(800/1000, 600/500) = 1.2`	整个画布放大到 1.2 倍，上下被裁剪

一句话总结

Match Width Or Height 用 Match 滑条决定“听宽的还是听高的”，0 全听宽，1 全听高，中间值混合。
Expand 保证 UI 全看见，可能留黑边。
Shrink 保证不留黑边，可能被裁剪。

二、与渲染模式的关系

Canvas Scaler 的工作与渲染模式深度耦合，但其重要性因模式而异：

Screen Space - Overlay / Camera：
- 至关重要。在这两种模式下，Canvas 的尺寸直接由 Scaler 驱动，以匹配屏幕或摄像机的视口。
- 你设定的 “参考分辨率” 就是在 Scale With Screen Size 模式下的设计基准。
- 比喻：就像是你先画好了一张标准的设计图（参考分辨率），Scaler 负责把它精准地投影到不同大小和距离的幕布（屏幕或摄像机平面）上。
World Space：
- 几乎无用。在此模式下，Canvas 的尺寸完全由它在 3D 世界中的 Transform.Scale 决定。
- Canvas Scaler 组件会被忽略，UI 元素的大小和布局不再与屏幕分辨率有关，只取决于它作为 3D 物体的大小。
- 比喻：World Space 模式下的 UI 就像一个真实的广告牌。它的物理尺寸是固定的（比如 10米 x 5米）。你离它远，它在你的视野里就小；离它近，就大。这个大小和你手机的分辨率没关系，只和你的“观看距离”（摄像机位置）有关。

叁——Graphic Raycaster

Graphic Raycaster 是 UI 能够“被点击”、“被触摸”的根源。它就像是 UI 的 “触觉神经” ，负责从用户的点击（鼠标或触摸）发射一条射线，去检测这条射线是否击中了某个带有 Raycast Target 属性的 UI 元素。

一、工作机制

发射射线：当用户点击屏幕时，Raycaster 会根据当前 Canvas 的渲染模式，从相应位置发射一条检测射线。
检测碰撞：这条射线会与 Canvas 内所有启用了 Raycast Target 的 Graphic 组件（如 Image, Text, RawImage）进行碰撞检测。
返回结果：将所有被击中的UI元素按深度排序后，返回给事件系统（EventSystem），最终触发 OnClick, OnDrag 等事件。

二、与渲染模式的关系（区别）

Graphic Raycaster 的射线发射方式完全取决于 Canvas 的渲染模式，这是理解关键！

渲染模式	射线发射原理	好比是…	注意事项
Screen Space - Overlay	直接从屏幕点击坐标发射一条垂直于屏幕的射线。不依赖任何摄像机。	“点击屏幕玻璃”。你点击的是屏幕这个二维平面上的一个绝对坐标点，Raycaster 直接去找这个坐标点上有哪些UI。	最直接，最不容易出错。
Screen Space - Camera	从渲染该Canvas的摄像机出发，根据屏幕点击坐标发射一条世界空间中的射线。这条射线会与位于 `Plane Distance` 处的 Canvas 平面相交。	“用手电筒照玻璃板”。你的点击位置决定了手电筒（摄像机）照射的角度，光线（射线）最终会打在固定距离外的玻璃板（Canvas）上某个点。	如果摄像机是透视模式，由于UI有透视变形，可能导致视觉上的按钮和实际可点击的碰撞区不重合，造成点击错位。
World Space	从主摄像机（或 `World Camera`）出发，根据屏幕点击坐标发射一条标准的3D 射线。这条射线会与作为3D物体的 Canvas 进行碰撞检测。	“用激光笔照射广告牌”。你拿着激光笔（摄像机）照射真实的广告牌（Canvas），激光点落在广告牌的哪个位置，就触发哪个按钮。	必须保证 Canvas 上有 `Graphic Raycaster` 组件！可能被3D物体阻挡：如果场景中有3D物体（如一个盒子）挡在 Canvas 前面，射线会被盒子拦截，导致无法点击到后面的UI。

三、参数与性能优化

Ignore Reversed Graphics：一定要勾选。这会忽略掉那些背对着摄像机的UI元素（比如在World Space模式下旋转了180度的UI）的点击事件，符合直觉且提升性能。
Blocking Objects / Blocking Mask（World Space 特有）：极其重要！ 用于解决上述“3D物体阻挡点击”的问题。
- Blocking Objects：指定哪些类型的3D物体会阻挡射线（如选择 3D Physics，则所有带有Collider的3D物体都会阻挡）。
- Blocking Mask：更进一步，通过Layer指定具体哪些层的3D物体会阻挡。
性能优化：
- 取消非交互元素的 Raycast Target：这是最重要的优化手段。对于背景图、装饰性图片等不需要点击响应的元素，务必取消勾选此选项，能极大减少射线检测的计算量。
- 避免过深的UI层级：Raycaster 需要遍历所有子物体，层级过深会增加遍历时间。

总结与关系梳理

为了让您更好地复习和理解，以下是这两个组件与三种渲染模式关系的终极总结表：

记忆：

Canvas Scaler 是 “视觉” 的管家，它在 Overlay 和 Screen Space - Camera 模式下忙前忙后，但在 World Space 模式下就“下岗”了。
Graphic Raycaster 是 “交互” 的枢纽，它在三种模式下都工作，但工作原理完全不同：
- Overlay：最简单，直接对应屏幕坐标。
- Camera：依赖指定摄像机，小心透视畸变！
- World Space：最复杂，完全3D物理射线，小心前方遮挡！