第 27 课 · 得分系统与 HUD 界面

⏱ 预计时长 35 分钟📊 难度入门📚 模块 第 3 部分 · 2D 游戏开发实战

🎯 本课学习目标

理解 HUD（游戏内界面）概念
用 Label 显示分数并实时更新
实现加分与 UI 更新解耦

游戏得有个分数显示。本课实现得分系统，并让 HUD 界面实时更新。

📖 详细教学步骤

创建 HUD 场景搭建

新建场景，根节点 CanvasLayer，命名 HUD，保存 hud.tscn
CanvasLayer 让 UI 永远显示在游戏画面之上（不被世界物体遮挡）
添加子节点 Label，命名 ScoreLabel，放在左上角

UI 场景常用做法概念

UI（用户界面）建议用独立场景 + CanvasLayer：

UI 与游戏逻辑分离，互不干扰
CanvasLayer 保证 UI 永远在最上层
改 UI 不影响游戏场景

用代码更新分数显示代码

HUD 脚本提供公开方法：

GDSCRIPTextends CanvasLayer

@onready var score_label: Label = $ScoreLabel

var score: int = 0

func add_score(points: int):
    score += points
    update_display()

func update_display():
    score_label.text = "得分: " + str(score)

Game 根节点集成集成

把 HUD 实例放入主场景，游戏逻辑调用它的方法：

GDSCRIPTextends Node2D

@onready var hud = $HUD

func _on_coin_collected(points: int):
    hud.add_score(points)   # 调用 HUD 加分方法

金币被吃到就加分（完整闭环）实战

金币 Area2D 被玩家碰到时：加分 + 播放声音（声音第 44 课）+ 删除：

GDSCRIPT# coin.gd
@onready var hud = get_node("/root/Main/HUD")  # 或第67课用单例

func _on_body_entered(body):
    if body.is_in_group("player"):
        hud.add_score(10)
        queue_free()

HUD 字体与样式美化

选中 Label → 检查器 Theme Overrides → Font Sizes → Font Size 调大（如 28）
Colors → Font Color 改成白色或亮色
可用 Outline 加描边让文字清晰

💡 每个控件都能独立覆盖主题样式，后面第 38 课系统讲。

⚠️

UI 跑到游戏画面下面去了？

把 HUD 根节点用 CanvasLayer（而不是 Node2D），它保证 UI 永远在最上层。

⚠️

分数不更新？

确认 add_score 后调用了 update_display()，且 label 引用正确（$ScoreLabel 拼写一致）。

🧪 动手试一试

🏋️ 课后练习

做 3 个金币，每个加 10 分，全部吃完显示总分 30，并把分数 Label 的字体调大到 30 并加描边。

HUD 用 CanvasLayer + Label；金币 body_entered 加分。

💡

UI 用独立 HUD 场景管理，项目后期会非常清晰。

💡

CanvasLayer 是 UI 最佳实践的根基，务必理解。

🎓 本课小结

HUD = CanvasLayer + Label 组成的 UI 场景；通过公开方法（add_score）与游戏逻辑解耦；金币吃到 → 加分 → 更新显示。