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

开始菜单制作

开始菜单完成。下一课做暂停菜单。

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

🎯本节学习目标

  • 搭建开始菜单结构
  • 添加菜单动画
  • 实现进入游戏

🚀课程导读

游戏的第一印象就是主菜单。本课做一个专业感十足的开始菜单。

搭建菜单结构

标题 + 按钮 + 背景。

  1. 新建场景 MainMenu。
  2. 创建 Canvas(Overlay + Scale With Screen Size 1920x1080)。
  3. 【背景】Image 全屏(锚点拉伸),放一张游戏截图/渐变图作为背景。
  4. 【标题】TMP 文本“我的游戏”(大号、居中、霓虹/描边效果),锚点中上。
  5. 【副标题】TMP 小字“版本 1.0”。
  6. 【按钮组】创建空对象 MenuButtons,用 Vertical Layout Group 垂直排列 3 个按钮:开始游戏 / 设置 / 退出。
  7. 【按钮样式】圆角九宫格背景 + TMP 文字(第 149-150 课)。
  8. 【版本信息】右下角小字。
  9. 【命名规范】按第 45 课规范命名所有 UI。
  10. 【事件系统】确认 Canvas 下有 EventSystem。
💡
开始菜单是“UI 全家桶”的第一次完整应用:背景、文字、按钮、布局全用上。

入场动画与交互

让菜单“活”起来。

  1. 【标题动画】给标题 TMP 加 Animator:从上方滑入 + 放大 + 淡入(第 159 课技巧或动画窗口)。
  2. 【按钮动画】按钮 hover 放大(IPointerEnter 改 scale,第 147 课)。
  3. 【背景动画】背景图缓慢流动(UV 偏移或整体缓动移动)。
  4. 【按钮功能】创建 UIManager 脚本:
  5. public void StartGame() { SceneManager.LoadScene("Level1"); }
  6. public void OpenSettings() { settingsPanel.SetActive(true); }
  7. public void QuitGame() { Application.Quit(); }
  8. 把按钮 On Click 绑定对应方法。
  9. 【退出提示】QuitGame 在编辑器里不生效(无窗口退出),可先打印验证。
  10. 【场景切换】记得把场景加入 Build Settings(第 235 课)。
  11. 【测试】播放:点开始进入游戏场景、点设置打开面板、点退出。
  12. 【注意】切场景后 Canvas 是当前场景的,脚本引用要当前场景内存在。
开始菜单 = 结构(背景/标题/按钮)+ 动画(入场/悬停)+ 交互(切场景)。三件套。

常见错误与排查

错误:点开始没切换场景?
原因:场景未加入 Build Settings 或 SceneManager 报错
解决:File → Build Settings 把游戏场景加入列表;确认场景名与代码一致。

动手练习

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

  • 完成开始菜单(背景/标题/三按钮)
  • 加标题入场动画与按钮悬停效果
  • 绑定开始/设置/退出三个功能

本节小结

开始菜单完成。下一课做暂停菜单。

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

← 上一课生命值血条实现