首页/ 第 10 章 · UI 界面系统/ 第 170 课
LESSON 170 · UI 界面系统

综合练习:完整游戏主界面

完整主界面完成!UI 章毕业。下一章进入音频系统,给游戏“加上声音”。

⏱ 约 30 分钟📊 难度:入门🗂 第 10 章 · UI 界面系统📍 第 170 / 300 课
课程进度
170 / 300

🎯本节学习目标

  • 综合运用 UI 章全部知识
  • 搭建完整界面体系
  • 体验“游戏外壳”开发

🚀课程导读

把 UI 章所有能力整合成一套“游戏外壳”:主菜单、HUD、暂停、设置、结束画面齐全。UI 章毕业项目!

整体架构

一个 Canvas 还是多个。

  1. 【场景规划】主菜单场景 MainMenu + 游戏场景 Game。
  2. 【UI 模块】游戏场景里用多个 Canvas(或一个 Canvas 分面板):
  3. ① HUD:分数/血量/时间(左上角等)。
  4. ② PausePanel:暂停菜单。
  5. ③ SettingsPanel:设置(音量滑块等)。
  6. ④ WinPanel / LosePanel:结束画面。
  7. ⑤ HintText:中心提示。
  8. 【组织】建一个空对象 UIManager 挂 UIManager 脚本统一管理所有面板引用。
  9. 【原则】各面板默认隐藏,按需 Show/Hide。
  10. 【命名】按规范:HUD_Score、PausePanel 等。
💡
先规划好“有哪些界面、何时出现”,再逐个搭,比边做边想高效。

搭建各模块

逐个实现。

  1. 【HUD】左上分数 TMP + 血条(第 160 课)+ 顶部倒计时。
  2. 【设置面板】音量 Slider + 灵敏度 Slider + 关闭按钮(第 151 课)。
  3. 【暂停】Esc 弹出(第 162 课)。
  4. 【结束】死亡/胜利面板(第 163 课)。
  5. 【提示】中心提示系统(第 169 课)。
  6. 【主菜单】标题 + 开始/设置/退出(第 161 课)。
  7. 【测试数据】脚本里模拟:加分、扣血、死亡,看 UI 联动。
  8. 【交互】所有按钮都绑定功能:开始游戏、继续、重开、返回。
  9. 【完成】一套能“装进任何游戏”的 UI 外壳完工!
这套 UI 外壳可复用到你未来所有项目——好好保存这个场景。

验证与收尾

全链路测试。

  1. 播放测试完整流程:主菜单 → 开始游戏 → HUD 显示 → Esc 暂停 → 设置调音量 → 死亡弹出结束 → 重开。
  2. 切换多种分辨率验证 UI 不散(第 158 课)。
  3. 检查 Console 无报错无警告。
  4. 清理无用引用、规范命名。
  5. 保存场景与项目。
  6. 【复盘】这次练习用到:Canvas、锚点、布局、Slider、Button、Text、Image、CanvasGroup、事件系统、Time.timeScale……UI 章全覆盖。
  7. 【延伸】把血条换成头顶血条、加入背包按钮等。
  8. UI 章毕业!
💡
UI 系统是“游戏的脸”,做完这套你已具备任何游戏的界面能力。

常见错误与排查

错误:切场景后 UI 引用丢失?
原因:UI 引用是当前场景的
解决:把 UIManager 及 UI 放在对应场景;跨场景数据用单例/PlayerPrefs(第 238 课)。

动手练习

课后小任务(做出来才算真的学会)

  • 完成主菜单+HUD+暂停+设置+结束的完整界面
  • 全流程联调测试
  • (进阶)把设置保存到 PlayerPrefs

本节小结

完整主界面完成!UI 章毕业。下一章进入音频系统,给游戏“加上声音”。

完成打卡后,主站会实时更新你的学习进度 🎯

← 上一课屏幕提示与对话气泡