UI 系统

UGUI

一、什么是 UI

UI 是 User Interface（用户界面） 的简称。

在游戏开发中，UI 就是玩家能直接看到并交互的界面，例如：

登录 / 注册界面
主菜单、设置界面
背包、商店、任务面板
血条、小地图、提示弹窗

二、UI 系统主要学习内容

模块	说明
UI 控件的使用	六大基础控件及常用组件
UI 的事件响应	点击、拖拽、输入等交互
UI 的分辨率自适应	不同屏幕尺寸下的布局适配

补充说明：
UGUI：Unity 运行时 UI 系统，用于游戏界面开发。
UIElements：常用于 Unity Editor 扩展开发；UGUI 不能用于 Unity Editor 窗口开发，Editor 开发应使用 UIElements / IMGUI。

三、UI 场景中的两大核心对象

1. Canvas（画布）对象

Canvas 对象上通常依附以下组件：

组件	作用
Canvas	画布组件，负责渲染所有 UI 子对象
Canvas Scaler	画布缩放组件，负责分辨率自适应
Graphic Raycaster	图形射线检测组件，负责 UI 点击/交互检测
RectTransform	UI 专用 Transform，控制位置、大小、锚点、对齐

2. EventSystem（事件系统）对象

EventSystem 对象上通常依附：

组件	作用
Event System	事件系统，统一管理 UI 输入事件
Standalone Input Module	独立输入模块，监听鼠标、触摸、键盘等玩家操作

场景中 只需一个 EventSystem，多个 Canvas 可共用。

四、Canvas（画布）组件详解

4.1 基本作用

Canvas 负责渲染其下所有 UI 子对象。没有 Canvas，UI 元素无法正常显示。

4.2 三种渲染模式 Render Mode（渲染模式）

（1）Screen Space - Overlay（屏幕空间 - 覆盖模式）【最常用】

UI 直接绘制在屏幕最上层，不依赖摄像机
性能较好，适合 HUD、弹窗、普通界面
缺点： 无法自然地把 3D 物体插入 UI 层级之间

（2）Screen Space - Camera（屏幕空间 - 摄像机模式）

UI 由指定 Render Camera 渲染到屏幕上
Plane Distance：控制 Canvas 平面与摄像机的距离
Sorting Layer / Order in Layer：控制 UI 与 3D 物体的渲染层级

适用场景： 人物展示界面、3D 模型与 UI 同屏显示

典型实现方案（人物展示界面）：

1
2
3
4
5
6
1. 新建专用 UI 摄像机（不要用主摄像机）
2. Canvas 设为 Screen Space - Camera，Render Camera 指向该 UI 摄像机
3. UI 摄像机 Clear Flags 设为 Depth Only（只清深度，背景透明）
4. UI 摄像机只渲染 UI 层（Culling Mask 勾选 UI）
5. 主摄像机剔除 UI 层，只渲染 3D 场景
6. 3D 角色放在 UI 摄像机与 Canvas 之间，或单独 Layer，由 UI 摄像机一并渲染

效果：

UI 摄像机 Depth Only 时，无物体区域透明
3D 角色可渲染在 UI 元素之上或之下（通过 Sorting Layer、Z 轴、Render Queue 控制）
主摄像机负责背景 3D 场景，UI 摄像机负责 UI + 展示模型，实现「背景场景 + 前景 UI + 中间 3D 人物」的分层效果

（3）World Space（世界空间）

Canvas 作为 3D 世界中的物体存在（如血条、3D 菜单牌）
可随物体移动、旋转、缩放
常用于 VR、AR 或 3D 世界内 UI

五、RectTransform（矩形变换）要点

替代普通 Transform，专用于 UI
Anchors（锚点）：相对父节点定位
Pivot（轴心）：自身旋转/缩放中心
Stretch（拉伸）：四边锚点分离时可做自适应布局

常用锚点预设：左上、居中、拉伸全屏等。

六、UGUI 六大基础控件

控件	主要用途	常用组件
Text（TextMeshPro 推荐）	显示文字	Text / TextMeshProUGUI
Image	显示图片、图标、背景	Image
Button	可点击按钮	Button + Image + Text
Toggle	开关、单选组选项	Toggle + Image
Slider	滑动条（音量、进度）	Slider + Image
Input Field	文本输入框	InputField / TMP_InputField

6.1 Text（文本）/ TextMeshPro（高级文本）

显示静态或动态文字
新项目建议用 TextMeshPro（TMP），效果更好、功能更强

6.2 Image（图片）

Source Image：图片资源
Image Type：Simple / Sliced（九宫格）/ Tiled / Filled（进度条填充）

6.3 Button（按钮）

通过 OnClick() 事件绑定方法
可配合 Transition（Color / Sprite / Animation）做按下反馈

6.4 Toggle（开关）

isOn 表示开关状态
多个 Toggle 可加入 Toggle Group 实现单选

6.5 Slider（滑动条）

minValue / maxValue / value
监听 OnValueChanged 做音量、血量等联动

6.6 Input Field（输入框）

接收玩家文字输入
可设置字符限制、密码模式、占位符等

七、UI 事件响应

7.1 事件接口（常用）

接口	触发时机
`IPointerClickHandler`	点击
`IPointerDownHandler` / `IPointerUpHandler`	按下 / 抬起
`IDragHandler` / `IBeginDragHandler` / `IEndDragHandler`	拖拽
`IPointerEnterHandler` / `IPointerExitHandler`	鼠标进入 / 离开

7.2 事件流程简述

1
玩家输入 → Standalone Input Module → EventSystem → Graphic Raycaster 射线检测 → 目标 UI 响应事件

八、分辨率自适应 Canvas Scaler（画布缩放器）

常用 UI Scale Mode（UI 缩放模式）

模式	说明
Constant Pixel Size	UI 像素大小不变，屏幕越大显示越小
Scale With Screen Size	按参考分辨率缩放【最常用】
Constant Physical Size	按物理尺寸（DPI）缩放

Scale With Screen Size（按屏幕尺寸缩放）关键参数

Reference Resolution：设计参考分辨率（如 1920×1080）
Screen Match Mode：Match Width Or Height / Expand / Shrink
Match：宽高匹配权重（0 偏宽，1 偏高，0.5 折中）

配合 RectTransform 锚点 做不同屏幕下的布局适配。