Unity 3D 笔记（七）UGUI核心交互组件与协程应用

本篇核心知识点UGUI 常用交互组件 Text/Image/RawImage/Button/Toggle/Dropdown/InputField/Slider/Scrollbar、协程序列帧、嵌套协程实战、Text 文本组件属性与描边阴影、富文本、Image 四种图片模式、九宫格切图、RawImage 区别、Button 三种交互模式、代码动态绑定按钮事件、Toggle 互斥分组、Dropdown 下拉菜单、InputField 输入限制与回调、Slider 进度条、Scrollbar 滚动条一、协程复盘1 概念通过协程解决逐帧循环瞬间执行完毕问题同时掌握协程嵌套实现多组分段延时输出逻辑理解协程中断等待核心价值。2 特性 / 规则Update 内普通 for 循环会一帧遍历完所有贴图无停留动画效果必须使用协程 yield 等待协程嵌套在一个协程内部开启新协程实现分段、分组延时逻辑索引循环播放贴图使用取模运算防止数组越界延时统一使用 WaitForSeconds游戏暂停会同步暂停动画。3 语法 代码片段序列帧基础协程片段IEnumerator PlayFrame(){ int index 0; while(true){ img.sprite spriteArr[index]; index (index 1) % spriteArr.Length; yield return new WaitForSeconds(0.1f); } }嵌套协程片段IEnumerator GroupPrint(){ for(int i 1; i 5; i){ Debug.Log($第一组第{i}次); yield return new WaitForSeconds(1); } yield return StartCoroutine(SecondGroup()); } IEnumerator SecondGroup(){ for(int i 1; i 5; i){ Debug.Log($第二组第{i}次); yield return new WaitForSeconds(1); } }4 相关知识点对比Update 循环遍历 VS 协程分段执行普通 for 循环一帧执行完全部逻辑无停顿无法实现逐帧间隔动画协程 yield每切换一帧 / 等待指定时间再执行下一段完美实现滚动、打字机动画。5 模块拓展简历拓展课余可独立完成 2D 小游戏 demo丰富项目经验提升求职薪资上限。二、Text 文本组件1 概念UGUI 文字显示核心组件用于界面文字、提示、数值展示支持字号、对齐、富文本、描边、阴影拓展效果。2 特性 / 规则代码修改文字需引入using UnityEngine.UI命名空间字号超过文本框尺寸时开启水平 / 垂直溢出才能完整显示富文本开启后可通过标记修改单字颜色会覆盖组件基础颜色立体效果二选一Outline 描边 / Shadow 阴影不能同时挂载Mathf.PingPong 可实现文字颜色循环流光效果。3 语法 代码片段文本赋值、颜色渐变片段using UnityEngine.UI; private Text txt; void Start(){ txt GetComponentText(); txt.text 测试文字; } void Update(){ float t Mathf.PingPong(Time.time, 1); txt.color Color.Lerp(Color.red, Color.blue, t); }4 相关知识点对比Outline 描边 VS Shadow 阴影Outline文字外围纯色边框立体感更强适合标题大字Shadow文字后方偏移阴影柔和适合小字提示。5 模块拓展课后作业 1实时滚动显示系统时间文本课后作业 2打字机逐字输出文字协程 Text 逐字符赋值。三、Image 与 RawImage1 概念Image 用于 UI 图集 Sprite 图片支持九宫格、填充模式RawImage 原生渲染纹理不限制图片格式多用于 3D 贴图、小地图、CG 序列图。2 特性 / 规则Image 规则图片导入类型必须设为 Sprite 才能赋值给 Image四种渲染模式Simple 普通、Sliced 九宫格、Tiled 平铺、Filled 填充血条 / CD九宫格需安装 2D Sprite 包裁切四角固定、中间拉伸Filled 支持 360 / 水平 / 垂直填充用于技能冷却、血量条。RawImage 规则不限制图片导入格式可直接加载 Texture无九宫格、填充、自适应尺寸功能仅基础 UV 渲染多用于小地图、3D 模型实时贴图、CG 动画背景。3 语法 代码片段动态切换图片、填充进度片段private Image skillImg; // 切换贴图 skillImg.sprite newSprite; // 修改填充进度实现CD skill.fillAmount cdTimer / totalCd;4 相关知识点对比Image VS RawImageImage适配 UI 图集九宫格 / 填充 / 自适应齐全背包、按钮、界面图片首选RawImage无 UI 专用优化仅特殊贴图、小地图场景使用。5 模块拓展九宫格实战弹窗、对话框边框拉伸不变形填充模式制作技能冷却遮罩。四、Button 按钮组件1 概念UGUI 标准交互组件处理鼠标 / 触屏点击提供颜色、图片、动画三种切换状态支持代码动态绑定点击回调。2 特性 / 规则Interactable 勾选控制按钮是否可点击取消后完全无交互三种状态切换模式ColorTint 颜色、SpriteSwap 贴图、Animation 动画Navigation 导航仅 PC 键盘上下左右选中按钮手游项目几乎不用拖拽绑定仅做了解工程统一使用代码动态注册事件原生 UnityAction 委托无参数传参需嵌套匿名函数封装。3 语法 代码片段代码绑定按钮无参 / 带参private Button btn; void Start(){ // 无参绑定 btn.onClick.AddListener(ClickFunc); // 带参封装 btn.onClick.AddListener(()ClickWithArg(10)); } void ClickFunc(){ Debug.Log(点击按钮); } void ClickWithArg(int num){ Debug.Log(参数num); }4 相关知识点对比拖拽赋值绑定 VS 代码动态绑定拖拽编辑器手动绑定多人协作易丢失引用工程禁用代码绑定自动化管理预制体 / 动态生成物体通用项目标准写法。5 模块拓展课后作业制作技能 CD 按钮结合 Image 填充 Text 倒计时同步显示冷却剩余时间。五、Toggle 复选框组件1 概念单选 / 多选框用于设置勾选、筛选分类搭配 ToggleGroup 实现同组互斥只能选中一个。2 特性 / 规则isOn 布尔值控制勾选状态状态切换触发 onValueChanged 回调ToggleGroup 分组后组内 Toggle 互斥取消 “Allow Switch Off” 则至少保留一个选中常用于音量开关、画质选项、背包分页切换。3 语法 代码片段private Toggle toggle; void Start(){ toggle.onValueChanged.AddListener(OnToggleChange); } void OnToggleChange(bool isSelect){ if(isSelect) Debug.Log(已勾选); }4 相关知识点对比独立 Toggle VS ToggleGroup 分组 Toggle独立可同时多选设置勾选、静音开关分组互斥单选分页、画质档位切换专用。5 模块拓展背包分页系统多 Toggle 分组切换装备 / 药品 / 材料界面。六、Dropdown 下拉菜单1 概念下拉选择组件展开多个选项选中后返回索引用于物品排序、筛选功能。2 特性 / 规则Template 为下拉选项模板运行自动克隆生成选项onValueChanged 回调返回选中选项 int 索引同一索引重复点击不会重复触发回调。3 语法 代码片段下拉选项监听private Dropdown drop; void Start(){ drop.onValueChanged.AddListener(SelectItem); } void Select(int index){ switch(index){ case 0: 按等级排序; break; case 1: 按金币排序; break; } }4 相关知识点对比Dropdown VS Toggle 分组Dropdown收起节省界面空间选项多使用Toggle全部选项平铺展示选项少、需要快速切换使用。5 模块拓展商城筛选、背包物品分类排序功能开发。七、InputField 输入框1 概念接收玩家文字 / 数字输入用于登录、聊天、商城数量输入支持输入类型限制、占位提示、多类回调。2 特性 / 规则ContentType 限制输入类型数字、邮箱、密码、姓名等Placeholder 为未输入时灰色提示文字三大回调onValueChanged 每输入字符触发、onEndEdit 失去焦点触发、onSubmit 回车提交密码模式界面显示 *程序内文本明文项目需加密传输。3 语法 代码片段获取输入文本private InputField input; void Start(){ input.onEndEdit.AddListener(InputFinish); } void InputFinish(string content){ Debug.Log(输入内容content); }4 相关知识点对比onValueChanged VS onEndEditonValueChanged输入任意字符立即触发实时校验onEndEdit点击空白 / 回车后触发聊天、登录提交首选。5 模块拓展登录账号密码输入、聊天发送框、商城购买数量输入。八、Slider 滑动进度条 Scrollbar 滚动条1 概念Slider 可调数值进度条血量、加载、音量Scrollbar 搭配 ScrollRect 实现面板滚动。2 特性 / 规则Slider 可自定义最大最小值onValueChanged 监听数值变化Scrollbar 取值固定 0~1Number Of Steps 控制滑动阶梯游戏加载进度条视觉均为假资源加载完成才会跳转场景。3 语法 代码片段Slider 数值监听private Slider slider; void Start(){ slider.onValueChanged.AddListener(ChangeValue); } void Change(float val){ Debug.Log(当前数值val); }4 相关知识点对比Slider VS ScrollbarSlider自定义数值区间音量、加载、血量Scrollbar固定 0~1仅用于滚动视图配套。5 模块拓展游戏加载界面、音量调节滑动条。综合拓展UI 组件开发规范界面交互逻辑全部代码动态绑定禁止编辑器拖拽赋值图片统一使用 Sprite 类型界面背景使用九宫格适配多分辨率。性能优化要点静态无交互 UI 关闭 Raycaster大量滚动列表使用对象池复用 Item不需要实时更新文本减少每帧赋值。高频 Bug 排查方案按钮点不动检查 Interactable 与 EventSystem图片不显示检查 Sprite 导入类型输入无法输入核对 ContentType 限制。进阶拓展学习方向ScrollRect 滚动视图、UI 动画、图集打包、TMP 高性能文本、UI 事件传递遮罩。