平视显示器

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

创建新场景,然后添加一个 CanvasLayer 节点并命名为 HUD。“HUD”是“heads-up display”(平视显示器)的缩写,是覆盖在游戏视图上用来显示信息的显示器。

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”的字体文件。 使用此字体需要执行以下操作:

  1. Under Theme overrides > Fonts click on the empty box and select "New DynamicFont"

../../_images/custom_font1.png
  1. Click on the "DynamicFont" you added, and under Font > FontData, choose "Load" and select the "Xolonium-Regular.ttf" file.

../../_images/custom_font2.png

Set the "Size" property under Settings, 64 works well.

../../_images/custom_font3.png

Once you've done this on the ScoreLabel, you can click the down arrow next to the Font property and choose "Copy", then "Paste" it in the same place on the other two Control nodes.

备注

锚点和边距:Control 节点具有位置和大小,但它也有锚点(Anchor)和边距(Margin)。锚点定义的是原点——节点边缘的参考点。移动或调整控件节点大小时,边距会自动更新。边距表示的是控件节点的边缘与锚点的距离。

按如下图所示排列节点。点击“布局”按钮以设置 Control 节点的布局:

../../_images/ui_anchor.png

你可以拖动节点以手动放置它们,或者要进行更精确的放置,请使用以下设置:

ScoreLabel

  • 布局:“顶部全幅”

  • Text0

  • Align:“Center”

Message

  • 布局:“水平居中全幅”

  • TextDodge the Creeps!

  • Align:“Center”

  • Autowrap:“启用”

StartButton

  • TextStart

  • 布局:“底部居中”

  • Margin

    • Top:-200

    • Bottom:-100

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

现将这个脚本添加到 HUD

extends CanvasLayer

signal start_game

start_game 信号通知 Main 节点,按钮已经被按下。

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

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

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

    $Message.text = "Dodge the\nCreeps!"
    $Message.show()
    # Make a one-shot timer and wait for it to finish.
    yield(get_tree().create_timer(1), "timeout")
    $StartButton.show()

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

备注

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

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

每当分数改变,这个函数会被 Main 调用。

连接 MessageTimertimeout() 信号和 StartButtonpressed() 信号并添加以下代码到新函数中:

func _on_StartButton_pressed():
    $StartButton.hide()
    emit_signal("start_game")

func _on_MessageTimer_timeout():
    $Message.hide()

将 HUD 场景连接到 Main 场景

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

../../_images/completed_main_scene.png

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

在节点选项卡中,通过在“连接信号”窗口的“接收方法”中键入 new_game,将 HUD 的 start_game 信号连接到主节点的 new_game() 函数。观察绿色的连接图标现在是否在脚本中的 func new_game() 左边出现。

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

$HUD.update_score(score)
$HUD.show_message("Get Ready")

game_over() 中我们需要调用相应的 HUD 函数:

$HUD.show_game_over()

最后,将下面的代码添加到 _on_ScoreTimer_timeout() 以保持不断变化的分数的同步显示:

$HUD.update_score(score)

现在你可以开始游戏了!点击“运行项目”按钮。将要求你选择一个主场景,因此选择 Main.tscn

删除旧的小怪

如果你一直玩到“游戏结束”,然后重新开始新游戏,上局游戏的小怪仍然显示在屏幕上。更好的做法是在新游戏开始时清除它们。我们需要一个同时让所有小怪删除它自己的方法,为此可以使用“分组”功能。

Mob 场景中,选择根节点,然后单击检查器旁边的“节点”选项卡(在该位置可以找到节点的信号)。 点击“信号”旁边的“分组”,然后可以输入新的组名称,点击“添加”。

../../_images/group_tab.png

现在,所有小怪都将属于“mobs”(小怪)分组。我们可以将以下行添加到 Main 中的 new_game() 函数中:

get_tree().call_group("mobs", "queue_free")

call_group() 函数调用组中每个节点上的删除函数——让每个怪物删除其自身。

游戏在这一点上大部分已经完成。在下一部分和最后一部分中,我们将通过添加背景,循环音乐和一些键盘快捷键来对其进行一些润色。