Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

游戏信息显示

我们的游戏最后还需要用户界面(User Interface,UI),显示分数、“游戏结束”信息、重启按钮。

Create a new scene, click the "Other Node" button and add a CanvasLayer node named HUD. "HUD" stands for "heads-up display", an informational display that appears as an overlay on top of the game view.

CanvasLayer 节点可以让我们在游戏的其他部分的上一层绘制 UI 元素,这样它所显示的信息就不会被任何游戏元素(如玩家或敌人)所覆盖。

HUD 中需要显示以下信息:

  • 得分,由 ScoreTimer 更改。

  • 消息,例如“Game Over”或“Get Ready!”

  • “Start”按钮来开始游戏。

UI 元素的基本节点是 Control 。要创建 UI,我们需使用 Control 下的两种节点:LabelButton

创建以下节点作为 HUD 的子节点:

  • 名为分数标签 ScoreLabelLabel

  • 名为消息 MessageLabel

  • 名为开始按钮 StartButtonButton

  • 名为信息计数器 MessageTimerTimer

点击 ScoreLabel 并在“检查器”的 Text 字段中键入一个数字。 Control 节点的默认字体很小,不能很好地缩放。游戏资产包中有一个叫作“Xolonium-Regular.ttf”的字体文件。 使用此字体需要执行以下操作:

在“Theme Overrides > Fonts”(主题覆盖 > 字体)中选择“加载”,然后选中“Xolonium-Regular.ttf”文件。

../../_images/custom_font_load_font.webp

字体尺寸仍然太小,请在“Theme Overrides > Font Sizes”(主题覆盖 > 字体大小)下将其增加到 64。当 ScoreLabel 完成此操作后,请重复对 MessageStartButton 节点做同样的修改。

../../_images/custom_font_size.webp

备注

锚点:Control 节点具有位置和大小,但它也有锚点(Anchor)。锚点定义的是原点——节点边缘的参考点。

请将节点如下图排列。拖动节点可以手动放置,也可以使用“锚点预设(Anchor Preset)”进行更精确的定位。

../../_images/ui_anchor.webp

ScoreLabel

  1. 添加文本 0

  2. 将“Horizontal Alignment”和“Vertical Alignment”设置为 Center

  3. 为“Anchor Preset”选择 Center Top

Message

  1. Add the text Dodge the Creeps!.

  2. 将“Horizontal Alignment”和“Vertical Alignment”设置为 Center

  3. 将“Autowrap Mode”设置为 Word,否则标签只会有一行。

  4. 在“Control - Layout/Transform”中将“Size X”设置为 480,使用屏幕的完整宽度。

  5. 为“Anchor Preset”选择 Center

StartButton

  1. 添加文本 Start

  2. 在“Control - Layout/Transform”中将“Size X”设置为 200、“Size Y”设置为 100,在边框和文本之间添加间距。

  3. 为“Anchor Preset”选择 Center Bottom

  4. 在“Control - Layout/Transform”中将“Position Y”设置为 580

MessageTimer 中,将 Wait Time 设置为 2 并将 One Shot 属性设置为“启用”。

现将这个脚本添加到 HUD

extends CanvasLayer

# Notifies `Main` node that the button has been pressed
signal start_game

当想显示一条临时消息时,比如“Get Ready”,就会调用这个函数

func show_message(text):
    $Message.text = text
    $Message.show()
    $MessageTimer.start()

我们还需要处理玩家死亡的情况。以下代码会显示 2 秒“Game Over”,然后返回标题屏幕,暂停一会儿之后再显示“Start”按钮。

func show_game_over():
    show_message("Game Over")
    # Wait until the MessageTimer has counted down.
    await $MessageTimer.timeout

    $Message.text = "Dodge the Creeps!"
    $Message.show()
    # Make a one-shot timer and wait for it to finish.
    await get_tree().create_timer(1.0).timeout
    $StartButton.show()

当玩家死亡时调用这个函数。将显示“Game Over”2 秒,然后返回标题屏幕并显示“Start”按钮。

备注

当你需要暂停片刻时,可以使用场景树的 get_tree().create_timer(2) 函数替代使用 Timer 节点。这对于延迟非常有用,例如在上述代码中,在这里我们需要在显示“开始”按钮前等待片刻。

将以下更新分数代码添加到 HUD

func update_score(score):
    $ScoreLabel.text = str(score)

连接 MessageTimertimeout() 信号和 StartButtonpressed() 信号,然后在新函数中添加以下代码:

func _on_start_button_pressed():
    $StartButton.hide()
    start_game.emit()

func _on_message_timer_timeout():
    $Message.hide()

将 HUD 场景连接到 Main 场景

现在我们完成了 HUD 场景,保存并返回 Main 场景。和 Player 场景的做法一样,在 Main 场景中实例化 HUD 场景。如果你没有错过任何东西,完整的场景树应该像这样:

../../_images/completed_main_scene.webp

现在我们需要将 HUD 功能与我们的 Main 脚本连接起来。这需要在 Main 场景中添加一些内容:

在“节点”选项卡中,点击“连接信号”窗口中的“选取”按钮,选择 new_game() 方法或在窗口的“接收方法”下面输入“new_game”,将 HUD 的 start_game 信号连接到 Main 节点的 new_game() 函数。请确认脚本中 func new_game() 的旁边出现了一个绿色的连接图标。

new_game() 函数中,更新分数显示并显示“Get Ready”消息: