首页/ 第 13 章 · 2D 游戏开发/ 第 219 课
LESSON 219 · 2D 游戏开发

2D HUD 与计分系统

HUD 与计分完成。下一课做 2D 存档读档。

⏱ 约 14 分钟📊 难度:入门🗂 第 13 章 · 2D 游戏开发📍 第 219 / 300 课
课程进度
219 / 300

🎯本节学习目标

  • 实现 HUD 显示
  • 实现计分规则
  • 实现数据联动

🚀课程导读

屏幕上的分数、金币、血量是 2D 游戏的“仪表盘”。本课做完整 HUD 与计分。

HUD 布局

左上角信息区。

  1. 【创建】Canvas(Overlay + Scaler,第 146 课)。
  2. 【分数】左上 TMP:分数:0。
  3. 【金币】分数旁 TMP + 金币图标(Image)。
  4. 【血量】左上角血条(第 160 课 Filled 血条)或爱心图标一排。
  5. 【锚点】所有信息锚点左上、顶部居中。
  6. 【结构】一个 HUD 空对象下挂各元素,统一管理。
  7. 【命名】HUD_Score、HUD_Coins、HUD_HP。
  8. 【参考】参考屏 1920x1080,注意小屏安全区(第 158 课)。
  9. 【注意】HUD 在 UI 层,遮挡 2D 画面没问题(Overlay 最上)。
💡
HUD = 左上角“仪表盘”:分数、金币、血量三件套。

计分与联动

数据驱动 UI。

  1. 【GameManager(单例)】
  2. public class GameManager : MonoBehaviour {
  3. public static GameManager Instance;
  4. public int score; public int coins;
  5. public TMP_Text scoreText, coinText;
  6. void Awake() { Instance = this; }
  7. public void AddScore(int n) { score += n; scoreText.text = "分数:" + score; }
  8. public void AddCoin(int n) { coins += n; coinText.text = "金币:" + coins; }
  9. }
  10. 【调用】金币脚本:GameManager.Instance.AddCoin(1);(第 212 课)。
  11. 【血量联动】PlayerController 里 hp 变化时调用 UIManager 更新血条。
  12. 【刷新方式】数据变化 → 直接更新对应 TMP(简单可靠,第 167 课)。
  13. 【进阶】事件驱动(OnScoreChanged)。
  14. 【暂停】HUD 上的暂停按钮(第 162 课)。
  15. 【计时】屏幕上方倒计时(第 167 课)。
  16. 【验证】加分、捡金币、扣血,HUD 全联动。
  17. 【注意】切场景后 GameManager 用 DontDestroyOnLoad 延续(第 172 课)或用场景内静态。
  18. 【完成】HUD“活了”!
计分 = 单例 GameManager 存数据 + 数据变化更新 TMP。一行调用全局联动。

常见错误与排查

错误:切场景后分数丢了?
原因:GameManager 没跨场景
解决:GameManager 用 DontDestroyOnLoad(第 172 课),UI 引用在场景内重建。

动手练习

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

  • 搭 HUD(分数/金币/血条)
  • 实现加分/金币/扣血联动
  • 做暂停按钮

本节小结

HUD 与计分完成。下一课做 2D 存档读档。

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

← 上一课2D 关卡设计