Unity 3D 基础笔记（六）UGUI 基础画布与自适应

本篇核心知识点：Unity UI 发展历史、GUI/NGUI/UGUI 区别、Canvas 画布三种渲染模式、Canvas Scaler 分辨率自适应、RectTransform 锚点与轴心、Graphic Raycaster 射线检测、EventSystem 事件系统、Panel 基础认知

一、Unity UI 发展历史

1 概念

梳理 Unity 三代 UI 渲染方案演变，理清 GUI、NGUI、UGUI 三者渊源与淘汰原因，了解行业开发迭代历程。

2 特性 / 规则

1. 原生 OnGUI：最早内置 UI 绘制方案，无可视化编辑，运行在 OnGUI 生命周期，帧调用频率极高，性能差，现代项目完全弃用；

2. NGUI：第三方付费 UI 插件（99 美元），UGUI 前身，原作者被 Unity 官方收购后开发内置 UGUI；

3. UGUI：Unity2017 后内置原生 UI 系统，无需付费、可视化编辑，现阶段项目标准 UI 方案；

4. TMP 文本属于增强型 UI 组件，初学阶段不接触，优先使用基础 Text/Image/Button/RawImage。

3 语法 & 代码片段

OnGUI 老旧绘制代码（仅作了解，禁止项目使用）=-0

// 老式GUI绘制文本，性能差无可视化 void OnGUI(){ GUI.Label(new Rect(10,10,200,30),"老式UI文字"); }

4 相关知识点对比

OnGUI VS NGUI VS UGUI

OnGUI：原生无插件，无可视化，高频渲染性能差，仅做调试弹窗；

NGUI：第三方付费插件，可视化，已淘汰，仅老项目遗留；

UGUI：官方内置免费，可视化编辑，自适应完善，新项目统一标准。

5 模块拓展

企业开发分工：新人入职优先负责 UI 模块，战斗、物理逻辑属于进阶开发内容；TMP 适合大型项目字体优化，初学阶段避免增加学习成本。

二、Canvas 画布核心组件

1 概念

画布是所有 UI 物体的承载容器，所有 Image、Text、Button 必须作为 Canvas 子物体才能正常渲染，无画布 UI 无法显示，包含三种渲染模式适配不同 UI 需求。

2 特性 / 规则

1. Screen Space-Overlay：2D 界面专用，UI 永远渲染在所有游戏物体最上层，无相机距离，弹窗、背包、主界面使用；

2. Screen Space-Camera：绑定专用 UI 相机，UI 与场景物体存在深度层级，可在 UI 前后穿插特效、模型；

3. World Space：3D 世界 UI，UI 作为场景 3D 物体渲染，血条、NPC 头顶文字、场景交互面板使用；

4. Sort Order 控制多画布层级，数值越大画布越靠前渲染；

5. Target Display 支持多屏幕分屏渲染，Render Camera 可单独指定 UI 专用相机。

3 语法 & 代码片段

多相机分层架构行业标准配置（仅逻辑说明，无运行代码）

主相机：渲染 3D 场景角色地形；UI 相机：仅渲染 Overlay / 相机模式 UI；特效相机：独立渲染界面特效。

4 相关知识点对比

三种 Canvas 渲染模式适用场景区分

Overlay：纯 2D 交互 UI，层级置顶；

Screen Camera：UI 穿插粒子、模型特效；

World Space：场景内 3D 悬浮 UI（血条、名称）。

5 模块拓展

大型项目画布拆分逻辑：弹窗单独画布、常驻 UI 单独画布、3D 世界 UI 独立画布，通过 SortOrder 管理层级，减少界面刷新开销。

三、Canvas Scaler 分辨率自适应

1 概念

画布缩放控制器，解决不同手机、显示器分辨率下 UI 拉伸、错位、大小异常问题，提供三种缩放模式，游戏开发主流使用 Scale With Screen Size。

2 特性 / 规则

1. Constant Pixel Size：固定像素尺寸，分辨率越高 UI 显示越小，无自适应，项目不使用；

2. Scale With Screen Size：参考分辨率自适应，开发基准统一 1920*1080，分宽优先 / 高优先适配横 / 竖屏游戏；

3. Constant Physical Size：物理厘米 / 英寸单位，尺寸夸张，手游、端游几乎不用；

4. 横屏游戏匹配宽度，竖屏游戏匹配高度，开发前期固定基准分辨率，后期无法大规模修改。

3 语法 & 代码片段

无运行代码，全编辑器配置：Reference Resolution 填 1920,1080，Screen Match Mode 选 Match Width Or Height。

4 相关知识点对比

三种缩放模式优缺点

固定像素：适配差，大屏 UI 缩小；

屏幕自适应：完美多分辨率适配，项目标准；

物理尺寸：单位过大，不适配电子屏幕。

5 模块拓展

平板视野差异原理：同基准分辨率下平板屏幕物理尺寸更大，UI 等比例放大，视野更广，属于硬件层面差异，无法代码消除。

四、RectTransform 锚点与轴心

1 概念

UI 专属变换组件，替代普通 Transform，新增锚点、轴心、宽高参数，控制 UI 在不同分辨率下的位置与尺寸，是 UI 自适应核心。

2 特性 / 规则

1. 锚点取值范围 0~1，对应画布四个角，如同钉子固定 UI 基准点；

2. 九种预设锚布局：九宫定点布局（左上 / 居中 / 右下等）用于固定位置；四边拉伸锚用于全屏背景；

3. Pivot 轴心：UI 自身旋转、坐标计算基准点，0,0 为左下角，0.5,0.5 为中心，1,1 右上角；

4. RectTransform 坐标计算基于锚点 + 轴心，分辨率变化时锚点固定位置不变。

3 语法 & 代码片段

代码修改锚点、轴心示例片段

RectTransform rt = GetComponent<RectTransform>(); // 设置锚点固定左上角 rt.anchorMin = new Vector2(0,1); rt.anchorMax = new Vector2(0,1); // 轴心设为中心 rt.pivot = new Vector2(0.5f,0.5f);

4 相关知识点对比

定点锚点 VS 拉伸锚点

定点锚：固定 UI 位置（头像、按钮、文字），尺寸不变；

拉伸锚：四边全部锚定，背景图铺满任意分辨率屏幕。

5 模块拓展

批量 UI 自适应规范：所有界面背景使用拉伸锚，按钮图标使用九宫定点锚，开发前期统一锚点规范，避免后期批量修改。

五、Graphic Raycaster UI 射线检测

1 概念

画布自带射线检测组件，负责鼠标、触屏点击 UI 判定，底层和 3D 物理射线逻辑一致，关闭后按钮、输入框无法响应点击。

2 特性 / 规则

1. Ignore Reversed Graphics：忽略 UI 背面检测，3D World Space UI 开启，2D Overlay 界面关闭；

2. Layer Mask 过滤指定层级，忽略不需要点击的 UI 图层，减少射线计算开销；

3. 组件依附 Canvas 存在，删除画布自动失效。

3 语法 & 代码片段

代码关闭画布射线交互片段

GraphicRaycaster ray = GetComponent<GraphicRaycaster>(); ray.enabled = false; // 画布所有UI无法点击

4 相关知识点对比

GraphicRaycaster UI 射线 VS Physics.Raycast 场景射线

UI 射线：仅检测 Canvas 内 Graphic 组件，用于按钮交互；

物理射线：检测 3D 碰撞体，用于地面、物体拾取。

5 模块拓展

弹窗屏蔽底层点击：弹窗单独创建画布，开启 Raycaster 自动拦截下层 UI 点击，无需额外代码判断。

六、EventSystem 事件系统

1 概念

全局 UI 事件管理器，处理鼠标点击、触屏、按键选中、输入交互，所有按钮、输入框、拖拽 UI 依赖该组件，场景有且只能存在一个。

2 特性 / 规则

1. 场景多 EventSystem 会造成点击冲突、交互失效，删除后全部 UI 无法点击；

2. Standalone Input Module 适配键盘、鼠标，移动端自动适配触屏输入；

3. First Selected Object 用于 PC 端默认选中按钮（开始游戏按钮）。

3 语法 & 代码片段

代码修改默认选中 UI 物体片段

EventSystem ev = EventSystem.current; ev.firstSelectedGameObject = btnStart;

4 相关知识点对比

有无 EventSystem 场景差异

存在：按钮点击、拖拽、输入框正常交互；

删除：全部 UI 交互功能直接瘫痪。

5 模块拓展

项目规范：新建场景自动检查 EventSystem，缺失时手动创建，禁止随意删除、复制生成多个事件系统。

七、Panel 基础认知

1 概念

Panel 本质是带 Image 组件的空 UI 容器，作为界面容器分组管理大量按钮、文字、图片，用于弹窗、面板、分页分组。

2 特性 / 规则

1. 作为父物体批量隐藏 / 显示整套界面，简化界面开关逻辑；

2. 可设置纯色背景遮挡底层 UI，搭配射线检测实现弹窗遮罩；

3. 无独立专属组件，底层依托 Image 渲染纯色矩形。

3 语法 & 代码片段

代码显示隐藏面板容器片段

GameObject panelBag; panelBag.SetActive(true); // 打开背包面板 panelBag.SetActive(false); // 关闭背包面板

4 相关知识点对比

Panel 容器 VS 普通空 GameObject

Panel：自带 Image 可做遮罩背景，直接承载 UI 视觉；

空物体：无渲染，仅做层级分组，不能作为弹窗遮罩。

5 模块拓展

弹窗标准结构：Panel 遮罩底层 + 子 Panel 弹窗主体，遮罩开启射线屏蔽底层界面点击。

拓展

1. UI 整体开发流程规范：新建项目统一 1920*1080 参考分辨率，画布默认 Overlay 模式，所有 UI 物体规范设置锚点，弹窗独立画布管理，避免界面互相干扰。

2. 性能优化要点：多界面拆分多画布降低渲染刷新范围，不需要交互的 UI 关闭 Graphic Raycaster，减少射线检测消耗，大量静态 UI 合理合并图集。

3. 高频 Bug 排查方案：按钮点不动优先检查 EventSystem 是否存在、GraphicRaycaster 是否启用、UI 是否被其他遮挡；UI 分辨率错位检查 Canvas Scaler 模式与锚点配置；3D UI 背面无法点击开启 Ignore Reversed Graphics。

4. 进阶拓展学习方向：后续学习 Image 九宫拉伸、Button 点击事件、InputField 输入、ScrollView 滚动列表、UI 动画、图集打包优化。

5. 行业开发工作流：新人入职优先承接背包、设置、弹窗等基础 UI 功能，熟练掌握锚点、自适应、点击交互后，再接触战斗血条、3D 世界 UI 等复杂界面。