首页/ 第 14 章 · 3D 游戏进阶/ 第 247 课
LESSON 247 · 3D 游戏进阶

3D 交互界面(HUD 与互动 UI)

3D 交互界面完成。下一课 3D 章综合练习:完整小型 3D 游戏。

⏱ 约 14 分钟📊 难度:入门🗂 第 14 章 · 3D 游戏进阶📍 第 247 / 300 课
课程进度
247 / 300

🎯本节学习目标

  • 实现 3D HUD
  • 实现世界空间 UI
  • 实现瞄准 UI

🚀课程导读

3D 游戏的”仪表盘“:屏幕 HUD + 敌人头顶血条 + 准星。本课整合 UI 进 3D。

3D HUD 与准星

屏幕层信息。

  1. 【HUD】Canvas(Overlay)显示血量、弹药、分数(第 160/219 课)。
  2. 【准星】Canvas 中心 Image 小十字/圆点,用 UI 做。
  3. 【准星反馈】命中时准星变大/变色(代码改 Image 属性)。
  4. 【动态准星】(进阶)移动时准星扩散(更改 RectTransform size)。
  5. 【弹药】右下角 TMP:弹药数。
  6. 【伤害指示】(进阶)受伤方向红弧(第 196 课全屏特效)。
  7. 【交互提示】屏幕中心”按 E“提示(第 169 课)。
  8. 【数据联动】GameManager/PlayerController → UI 更新(第 167 课)。
  9. 【完成】3D 屏幕 UI 就绪。
  10. 【注意】Overlay Canvas 不受 3D 影响,永远最前。
💡
3D HUD = Overlay Canvas 装血量/弹药/准星。屏幕信息全套。

世界空间 UI

飘在 3D 世界里。

  1. 【敌人血条】World Space Canvas(第 160 课)在敌人头顶,面向相机。
  2. 【交互标签】可交互物上方显示名字/提示(World Space Canvas)。
  3. 【伤害飘字】命中时在命中点弹出”20“(World Space TMP 上浮淡出):
  4. public void ShowDamageText(Vector3 pos, int dmg) {
  5. GameObject t = Instantiate(dmgTextPrefab, pos, Quaternion.identity);
  6. t.GetComponent<DamageText>().Init(dmg);
  7. }
  8. DamageText 脚本:上移+淡出+销毁(协程)。
  9. 【3D 世界空间 UI 注意】Canvas Scale 调小、面向相机(第 160 课)。
  10. 【性能】世界空间 UI 别太多;用图集/对象池。
  11. 【完成】3D 世界”处处有信息“。
  12. 【应用】血条、名字、伤害、任务点。
  13. 【注意】世界空间 UI 有排序与遮挡问题(进阶用 Sorting 或 shader ztest)。
世界空间 UI = WorldSpace Canvas 放 3D 位置 + 面向相机 + 生命周期。信息”贴“在世界。

常见错误与排查

错误:头顶血条巨大?
原因:WorldSpace Canvas 缩放没调
解决:Canvas RectTransform Scale 调小(0.005-0.01)并放对位置。

动手练习

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

  • 做 3D HUD(血量/弹药/准星)
  • 做敌人头顶血条
  • 做伤害飘字

本节小结

3D 交互界面完成。下一课 3D 章综合练习:完整小型 3D 游戏。

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

← 上一课3D 存档系统(多场景)