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 特性 / 规则原生 OnGUI最早内置 UI 绘制方案无可视化编辑运行在 OnGUI 生命周期帧调用频率极高性能差现代项目完全弃用NGUI第三方付费 UI 插件99 美元UGUI 前身原作者被 Unity 官方收购后开发内置 UGUIUGUIUnity2017 后内置原生 UI 系统无需付费、可视化编辑现阶段项目标准 UI 方案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 UGUIOnGUI原生无插件无可视化高频渲染性能差仅做调试弹窗NGUI第三方付费插件可视化已淘汰仅老项目遗留UGUI官方内置免费可视化编辑自适应完善新项目统一标准。5 模块拓展企业开发分工新人入职优先负责 UI 模块战斗、物理逻辑属于进阶开发内容TMP 适合大型项目字体优化初学阶段避免增加学习成本。二、Canvas 画布核心组件1 概念画布是所有 UI 物体的承载容器所有 Image、Text、Button 必须作为 Canvas 子物体才能正常渲染无画布 UI 无法显示包含三种渲染模式适配不同 UI 需求。2 特性 / 规则Screen Space-Overlay2D 界面专用UI 永远渲染在所有游戏物体最上层无相机距离弹窗、背包、主界面使用Screen Space-Camera绑定专用 UI 相机UI 与场景物体存在深度层级可在 UI 前后穿插特效、模型World Space3D 世界 UIUI 作为场景 3D 物体渲染血条、NPC 头顶文字、场景交互面板使用Sort Order 控制多画布层级数值越大画布越靠前渲染Target Display 支持多屏幕分屏渲染Render Camera 可单独指定 UI 专用相机。3 语法 代码片段多相机分层架构行业标准配置仅逻辑说明无运行代码主相机渲染 3D 场景角色地形UI 相机仅渲染 Overlay / 相机模式 UI特效相机独立渲染界面特效。4 相关知识点对比三种 Canvas 渲染模式适用场景区分Overlay纯 2D 交互 UI层级置顶Screen CameraUI 穿插粒子、模型特效World Space场景内 3D 悬浮 UI血条、名称。5 模块拓展大型项目画布拆分逻辑弹窗单独画布、常驻 UI 单独画布、3D 世界 UI 独立画布通过 SortOrder 管理层级减少界面刷新开销。三、Canvas Scaler 分辨率自适应1 概念画布缩放控制器解决不同手机、显示器分辨率下 UI 拉伸、错位、大小异常问题提供三种缩放模式游戏开发主流使用 Scale With Screen Size。2 特性 / 规则Constant Pixel Size固定像素尺寸分辨率越高 UI 显示越小无自适应项目不使用Scale With Screen Size参考分辨率自适应开发基准统一 1920*1080分宽优先 / 高优先适配横 / 竖屏游戏Constant Physical Size物理厘米 / 英寸单位尺寸夸张手游、端游几乎不用横屏游戏匹配宽度竖屏游戏匹配高度开发前期固定基准分辨率后期无法大规模修改。3 语法 代码片段无运行代码全编辑器配置Reference Resolution 填 1920,1080Screen Match Mode 选 Match Width Or Height。4 相关知识点对比三种缩放模式优缺点固定像素适配差大屏 UI 缩小屏幕自适应完美多分辨率适配项目标准物理尺寸单位过大不适配电子屏幕。5 模块拓展平板视野差异原理同基准分辨率下平板屏幕物理尺寸更大UI 等比例放大视野更广属于硬件层面差异无法代码消除。四、RectTransform 锚点与轴心1 概念UI 专属变换组件替代普通 Transform新增锚点、轴心、宽高参数控制 UI 在不同分辨率下的位置与尺寸是 UI 自适应核心。2 特性 / 规则锚点取值范围 0~1对应画布四个角如同钉子固定 UI 基准点九种预设锚布局九宫定点布局左上 / 居中 / 右下等用于固定位置四边拉伸锚用于全屏背景Pivot 轴心UI 自身旋转、坐标计算基准点0,0 为左下角0.5,0.5 为中心1,1 右上角RectTransform 坐标计算基于锚点 轴心分辨率变化时锚点固定位置不变。3 语法 代码片段代码修改锚点、轴心示例片段RectTransform rt GetComponentRectTransform(); // 设置锚点固定左上角 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 特性 / 规则Ignore Reversed Graphics忽略 UI 背面检测3D World Space UI 开启2D Overlay 界面关闭Layer Mask 过滤指定层级忽略不需要点击的 UI 图层减少射线计算开销组件依附 Canvas 存在删除画布自动失效。3 语法 代码片段代码关闭画布射线交互片段GraphicRaycaster ray GetComponentGraphicRaycaster(); ray.enabled false; // 画布所有UI无法点击4 相关知识点对比GraphicRaycaster UI 射线 VS Physics.Raycast 场景射线UI 射线仅检测 Canvas 内 Graphic 组件用于按钮交互物理射线检测 3D 碰撞体用于地面、物体拾取。5 模块拓展弹窗屏蔽底层点击弹窗单独创建画布开启 Raycaster 自动拦截下层 UI 点击无需额外代码判断。六、EventSystem 事件系统1 概念全局 UI 事件管理器处理鼠标点击、触屏、按键选中、输入交互所有按钮、输入框、拖拽 UI 依赖该组件场景有且只能存在一个。2 特性 / 规则场景多 EventSystem 会造成点击冲突、交互失效删除后全部 UI 无法点击Standalone Input Module 适配键盘、鼠标移动端自动适配触屏输入First Selected Object 用于 PC 端默认选中按钮开始游戏按钮。3 语法 代码片段代码修改默认选中 UI 物体片段EventSystem ev EventSystem.current; ev.firstSelectedGameObject btnStart;4 相关知识点对比有无 EventSystem 场景差异存在按钮点击、拖拽、输入框正常交互删除全部 UI 交互功能直接瘫痪。5 模块拓展项目规范新建场景自动检查 EventSystem缺失时手动创建禁止随意删除、复制生成多个事件系统。七、Panel 基础认知1 概念Panel 本质是带 Image 组件的空 UI 容器作为界面容器分组管理大量按钮、文字、图片用于弹窗、面板、分页分组。2 特性 / 规则作为父物体批量隐藏 / 显示整套界面简化界面开关逻辑可设置纯色背景遮挡底层 UI搭配射线检测实现弹窗遮罩无独立专属组件底层依托 Image 渲染纯色矩形。3 语法 代码片段代码显示隐藏面板容器片段GameObject panelBag; panelBag.SetActive(true); // 打开背包面板 panelBag.SetActive(false); // 关闭背包面板4 相关知识点对比Panel 容器 VS 普通空 GameObjectPanel自带 Image 可做遮罩背景直接承载 UI 视觉空物体无渲染仅做层级分组不能作为弹窗遮罩。5 模块拓展弹窗标准结构Panel 遮罩底层 子 Panel 弹窗主体遮罩开启射线屏蔽底层界面点击。拓展UI 整体开发流程规范新建项目统一 1920*1080 参考分辨率画布默认 Overlay 模式所有 UI 物体规范设置锚点弹窗独立画布管理避免界面互相干扰。性能优化要点多界面拆分多画布降低渲染刷新范围不需要交互的 UI 关闭 Graphic Raycaster减少射线检测消耗大量静态 UI 合理合并图集。高频 Bug 排查方案按钮点不动优先检查 EventSystem 是否存在、GraphicRaycaster 是否启用、UI 是否被其他遮挡UI 分辨率错位检查 Canvas Scaler 模式与锚点配置3D UI 背面无法点击开启 Ignore Reversed Graphics。进阶拓展学习方向后续学习 Image 九宫拉伸、Button 点击事件、InputField 输入、ScrollView 滚动列表、UI 动画、图集打包优化。行业开发工作流新人入职优先承接背包、设置、弹窗等基础 UI 功能熟练掌握锚点、自适应、点击交互后再接触战斗血条、3D 世界 UI 等复杂界面。