本文为Google Translate英译中结果，DrGraph在此基础上加了一些校正。英文原版页面：

Your first 2D game — Godot Engine (stable) documentation in English

第一个 2D 游戏¶

在这个循序渐进的教程系列中，您将使用 Godot 创建您的第一个完整的 2D 游戏。到本系列结束时，您将拥有自己的一个简单而完整的游戏，如下图所示。

您将了解 Godot 编辑器的工作原理、构建项目以及构建 2D 游戏的方法。

注：这个项目是对 Godot 引擎的介绍。它假设您已经有一些编程经验。如果您完全不熟悉编程，您应该从这里开始：脚本语言。

游戏名为“Dodge the Creeps!”。您的角色必须移动并尽可能长时间地避开敌人。

您将学习：

使用 Godot 编辑器创建完整的 2D 游戏。
构建一个简单的游戏项目。
移动玩家角色并改变其精灵。
生成随机敌人。
计算分数。

和更多。

你会发现另一个系列，你将在其中创建一个类似的游戏，但在 3D 中。不过，我们建议您从这个开始。

为什么从二维开始？

如果您是游戏开发新手或不熟悉 Godot，我们建议您从 2D 游戏开始。这将使您在处理往往更复杂的 3D 游戏之前对两者都感到满意。

您可以在此位置找到此项目的完整版本：

https://github.com/godotengine/godot-demo-projects

先决条件¶

本分步教程适用于遵循完整入门指南的初学者。

如果您是一位经验丰富的程序员，您可以在此处找到完整演示的源代码：Godot 演示项目。

我们准备了一些您需要下载的游戏资源，以便我们可以直接跳转到代码。

您可以通过单击下面的链接下载它们。

dodge_the_creeps_2d_assets.zip。

设置项目¶

在这简短的第一部分中，我们将设置和组织项目。

启动 Godot 并创建一个新项目。

创建新项目时，您只需要选择一个有效的项目路径。您可以保留其他默认设置。

GDScript

下载dodge_the_creeps_2d_assets.zip。本压缩文件包含您将用于制作游戏的图像和声音。提取存档并将art/ 和fonts/目录移动到您的项目目录。

您的项目文件夹应如下所示。

这个游戏是为纵向模式设计的，所以我们需要调整游戏窗口的大小。单击“项目”->“项目设置”打开项目设置窗口，然后在左侧栏中打开“显示”->“窗口”选项卡。在那里，将“视口宽度”设置为480，将“视口高度”设置为720。

此外，在“拉伸”选项下，将“模式”设置为“canvas_items长宽比” 。这确保了游戏在不同尺寸的屏幕上一致地缩放。keep

组织项目¶

在这个项目中，我们将制作 3 个独立的场景：Player、Mob和 HUD，【最终】我们会将它们组合到游戏Main场景中。

在较大的项目中，创建文件夹来保存各种场景及其脚本可能很有用，但对于这个相对较小的游戏，您可以将场景和脚本保存在项目的根文件夹中，由res://. 您可以在左下角的文件系统停靠栏中看到您的项目文件夹：

有了项目，我们就可以在下一课中设计玩家场景了。

创建玩家场景¶

项目设置就绪后，我们就可以开始处理玩家控制的角色了。

第一个场景将定义Player对象。创建单独的 Player 场景的好处之一是我们可以单独测试它，甚至在我们创建游戏的其他部分之前。

节点结构¶

首先，我们需要为玩家对象选择一个根节点。作为一般规则，场景的根节点应该反映对象所需的功能——对象是什么。单击“其他节点”按钮并向场景添加一个Area2D节点。

Godot 将在场景树中的节点旁边显示一个警告图标。你现在可以忽略它。我们稍后会解决。

我们Area2D可以检测重叠或撞到玩家的物体。通过双击将节点名称更改为Player。现在我们已经设置了场景的根节点，我们可以添加额外的节点来赋予它更多的功能。

在我们向Player节点添加任何子节点之前，我们要确保我们不会通过单击不小心移动它们或调整它们的大小。选择节点并单击锁右侧的图标。它的工具提示【为】“使选定节点的子节点不可选”。

保存场景。单击场景 -> 保存，或在 Windows/Linux上按Ctrl + S 或macOS 上按Cmd + S

注：对于这个项目，我们将遵循 Godot 命名约定。

GDScript：类（节点）使用 PascalCase，变量和函数使用 snake_case，常量使用 ALL_CAPS（参见 GDScript 风格指南）。
C#：类、导出变量和方法使用 PascalCase，私有字段使用 _camelCase，局部变量和参数使用 camelCase（参见C# 风格指南）。连接信号时，请小心准确地键入方法名称。

精灵动画¶

单击Player节点并添加 (Ctrl + A ) 子节点AnimatedSprite2D。【AnimatedSprite2D】将为我们的播放器处理外观和动画。请注意，节点旁边有一个警告符号。【AnimatedSprite2D 】需要一个SpriteFrames资源，这是它可以显示的动画列表。若要创建一个，请在检查器的Animation选项卡下找到该属性【Sprite Frames】，然后单击“[empty]”->“New SpriteFrames”。再次点击打开“SpriteFrames”面板【在底部】：

左边是动画列表。单击“默认【default】”并将其重命名为“行走【walk】”。然后单击“添加动画”按钮创建第二个名为“向上”的动画。在“文件系统【FileSystem】”选项卡中找到播放器图像 - 它们位于您之前解压缩的art文件夹中。将每个动画的两个图像（名为 playerGrey_up[1/2]和playerGrey_walk[1/2]）拖到相应动画面板的“动画帧”一侧：

玩家图像对于游戏窗口来说有点太大，所以我们需要缩小它们。单击该AnimatedSprite2D节点并将Scale属性设置为(0.5, 0.5)。您可以在Node2D标题下的检查器中找到它【Scale属性在Node2D类中声明定义】。

最后，添加一个CollisionShape2D作为Player的子项。这将决定Player的“碰撞箱”，或碰撞区域的边界。对于这个角色，最适合用一个CapsuleShape2D节点来确定碰撞区域形状，所以在 Inspector 中的“Shape”旁边，单击“[empty]”->“New CapsuleShape2D”。使用两个尺寸手柄，调整形状的大小以覆盖精灵：

完成后，您的Player场景应如下所示：

确保在这些更改后再次保存场景。

在下一部分中，我们将向播放器节点添加一个脚本来移动它并为其设置动画。然后，我们设置碰撞检测以了解玩家何时会被某物击中。

Player编码¶

在本课中，我们将添加player的移动、动画代码，并进行检测碰撞设置。

为此，我们需要添加一些无法从内置节点获得的功能，因此我们将添加一个脚本。单击该Player节点并单击“附加脚本”按钮：

在脚本设置窗口中，您可以保留默认设置。只需点击“创建”：

注：如果您正在创建 C# 脚本或其他语言，请在点击创建之前从语言下拉菜单中选择语言。

注：如果这是您第一次接触 GDScript，请在继续之前阅读 脚本语言。

首先声明这个对象需要的成员变量：

GDScript

extends Area2D

@export var speed = 400 # How fast the player will move (pixels/sec).
var screen_size # Size of the game window.

在第一个speed变量上使用关键字export，其作用是允许我们后续在检查器中设置它的值。这对于您希望能够像节点的内置属性一样进行调整的值非常方便。单击该Player 节点，您将看到该属性现在出现在检查器的“脚本变量”部分中。请记住，如果您更改此处的值，它将覆盖脚本中写入的值。

注：如果您使用的是 C#，则无论何时您想要查看新的导出变量或信号，都需要（重新）构建项目程序集。可以通过单击编辑器右上角的“构建”按钮手动触发此构建。

也可以从 MSBuild 面板触发手动构建。单击编辑器窗口底部的“MSBuild”一词以显示 MSBuild 面板，然后单击“生成”按钮。

当一个节点进入场景树时调用该_ready()函数，这是找到【获取】游戏窗口大小的好时机：

GDScript

func _ready():
    screen_size = get_viewport_rect().size

现在我们可以使用该_process()函数来定义玩家将要做什么。每帧都会被调用_process()，因此我们将使用它来更新游戏的元素，我们预计这些元素会经常更改。对于播放器，我们需要做以下事情：

检查输入。
向给定的方向移动。
播放适当的动画。

首先，我们需要检查输入——玩家是否按下了一个键？对于这个游戏，我们有 4 个方向输入要检查。输入操作在“输入映射”下的项目设置中定义。在这里，您可以定义自定义事件并为其分配不同的键、鼠标事件或其他输入。对于这个游戏，我们将箭头键映射到四个方向。

单击项目 -> 项目设置以打开项目设置窗口，然后单击顶部的输入地图选项卡。在顶部栏中键入“move_right”，然后单击“添加”按钮添加move_right操作。

我们需要为此操作分配一个键。单击右侧的“+”图标，打开事件管理器窗口。

应自动选择“侦听输入...”字段。按键盘上的“右”键，菜单现在应该如下所示。

选择“确定”按钮。“右”键现在与move_right操作相关联。

重复这些步骤以添加另外三个映射：

move_left映射到左箭头键。
move_up映射到向上箭头键。
move_down映射到向下箭头键。

您的输入地图选项卡应如下所示：

单击“关闭”按钮关闭项目设置。

注：我们只将一个键映射到每个输入操作，但您可以将多个键、操纵杆按钮或鼠标按钮映射到相同的输入操作。

【DrGraph】：Godot这里有点过度设计，感觉直接用键值常量作为参数调用更为快捷，代码更易读。

您可以使用Input.is_action_pressed()检测某个键是否被按下，如果它被按下就返回true，它【未被按下】就会返回false。

GDScript

func _process(delta):
    var velocity = Vector2.ZERO # The player's movement vector.
    if Input.is_action_pressed("move_right"):
        velocity.x += 1
    if Input.is_action_pressed("move_left"):
        velocity.x -= 1
    if Input.is_action_pressed("move_down"):
        velocity.y += 1
    if Input.is_action_pressed("move_up"):
        velocity.y -= 1

    if velocity.length() > 0:
        velocity = velocity.normalized() * speed
        $AnimatedSprite2D.play()
    else:
        $AnimatedSprite2D.stop()

我们首先设置velocity为(0, 0)，表示默认情况下，玩家不应移动。然后我们检查每个输入并从velocity中添加/减去以获得总方向。例如，如果您同时按住right和down，则生成的velocity向量将为(1, 1). 在这种情况下，由于我们添加了水平和垂直移动，玩家沿对角线移动的速度会比仅水平移动更快。

如果我们对速度（velocity）进行归一化，这意味着我们将其长度设置为1，然后乘以所需的速度，我们就可以防止这种情况发生。这意味着不再有快速的对角线移动。

注：如果您以前从未使用过矢量数学，或者需要复习，您可以在Vector math上查看 Godot 中矢量用法的解释。【不过不用担心，矢量数学知识】对于本教程的其余部分来说不是必需的。

我们还检查玩家是否正在移动，以便我们可以在 AnimatedSprite2D 上调用play()或 stop()

注：$是get_node()的简写方式。所以在上面的代码中， $AnimatedSprite2D.play()与 get_node("AnimatedSprite2D").play()【是等价的】.

在 GDScript 中，$返回当前节点的相对路径处的节点，null如果未找到该节点则返回。由于 AnimatedSprite2D 是当前节点的子节点，我们可以使用 $AnimatedSprite2D.

现在我们有了移动方向，我们可以更新玩家的位置。我们也可以用来clamp()防止它离开屏幕。钳位值意味着将其限制在给定范围内。将以下内容添加到函数的底部_process（确保它没有在else下缩进）：

GDScript：

position += velocity * delta
position.x = clamp(position.x, 0, screen_size.x)
position.y = clamp(position.y, 0, screen_size.y)

注：_process()函数中的delta参数指的是帧长度——前一帧完成所花费的时间。使用此值可确保即使帧速率发生变化，您的动作也能保持一致。

单击“播放场景”（F6，在 macOS 上Cmd + R）并确认您可以在屏幕上向各个方向移动播放器。

警告：如果您在“调试器”面板中收到错误消息[Attempt to call function 'play' in base 'null instance' on a null instance]这可能意味着您拼错了 AnimatedSprite2D 节点的名称。节点名称区分大小写，并且$NodeName必须与您在场景树中看到的名称相匹配。

选择动画¶

现在玩家可以移动了，我们需要根据动画的方向更改 AnimatedSprite2D 正在播放的动画。我们有“行走”动画，显示玩家向右行走。flip_h应使用左移属性水平翻转此动画。我们还有“向上”动画，它应该垂直翻转flip_v以向下移动。让我们把这段代码放在函数的末尾_process()：

GDScript

if velocity.x != 0:
    $AnimatedSprite2D.animation = "walk"
    $AnimatedSprite2D.flip_v = false
    # See the note below about boolean assignment.
    $AnimatedSprite2D.flip_h = velocity.x < 0
elif velocity.y != 0:
    $AnimatedSprite2D.animation = "up"
    $AnimatedSprite2D.flip_v = velocity.y > 0

注：上面代码中的布尔赋值是程序员常用的简写形式。由于我们正在进行比较测试（布尔值）并且还分配了一个布尔值，因此我们可以同时进行这两项操作。考虑这段代码与上面的单行布尔赋值：

GDScript

if velocity.x < 0:
    $AnimatedSprite2D.flip_h = true
else:
    $AnimatedSprite2D.flip_h = false

再次播放场景并检查每个方向的动画是否正确。

注：这里的一个常见错误是输入错误的动画名称。SpriteFrames 面板中的动画名称必须与您在代码中键入的名称相匹配。如果您为动画命名"Walk"，则还必须在代码中使用大写的“W”。

当您确定移动工作正常时，将此行添加到 _ready()，这样玩家将在游戏开始时隐藏：

GDScript

hide()

为碰撞做准备¶

我们想Player检测它何时被敌人击中，但我们还没有制造任何敌人！没关系，因为我们将使用 Godot 的信号功能来使其工作。

在脚本顶部添加以下内容。如果您使用的是 GDScript，请在extends Area2D之后 . 如果您使用的是 C#，请将其添加到public partial class Player : Area2D之后

GDScript

signal hit

这定义了一个名为“hit”的自定义信号，我们将让我们的玩家在与敌人碰撞时发出（发送）。我们将使用它Area2D来检测碰撞。选择Player节点并单击检查器选项卡旁边的“节点”选项卡以查看播放器可以发出的信号列表：

请注意我们的自定义“命中”信号也在那里！由于我们的敌人将成为RigidBody2D节点【程序设计时就已经系统考虑各角色的特征】，因此我们需要【处理Area2D与RigidBody2D碰撞时发出的】body_entered(body: Node2D)信号。当身体接触玩家时会发出此信号。单击“Connect..”，出现“Connect a Signal”窗口。我们不需要更改任何这些设置，因此再次单击“连接”。Godot 会自动在您的播放器脚本中创建一个函数。

请注意绿色图标表示信号已连接到此功能。将此代码添加到函数中：

GD脚本C＃C++

func _on_body_entered(body):
    hide() # Player disappears after being hit.
    hit.emit()
    # Must be deferred as we can't change physics properties on a physics callback.
    $CollisionShape2D.set_deferred("disabled", true)

每次敌人击中玩家时，都会发出信号。我们需要禁用玩家的碰撞，这样我们就不会hit多次触发信号。

注：如果禁用区域的碰撞形状发生在引擎的碰撞处理过程中，可能会导致错误。使用set_deferred()告诉 Godot 等待disable形状，直到这样做是安全的。

【DrGraph】：因为Godot Engine的物理引擎使用了多线程来提高效率，因此发生碰撞时（调用_on_body_entered函数）,CollisionShape2D的disabled属性会被线程锁定，无法通过set_disabled来修改，这时需要使用set_deferred()来延迟调用【相当于加到队列中，可以修改的时候再处理】

最后一部分是添加一个函数，我们可以在开始新游戏时调用该函数来重置玩家。

GDScript

func start(pos):
    position = pos
    show()
    $CollisionShape2D.disabled = false

随着玩家的工作，我们将在下一课中处理敌人。

制造敌人¶

现在是时候让我们的玩家必须躲避敌人了。它们的行为不会很复杂：生物会在屏幕边缘随机生成，选择随机方向，并沿直线移动。

我们将创建一个Mob场景，然后我们可以实例化以在游戏中创建任意数量的独立生物。

节点设置¶

单击顶部菜单中的 Scene -> New Scene 并添加以下节点：

RigidBody2D（已命名Mob）
- 动画精灵2D
- CollisionShape2D
- VisibleOnScreenNotifier2D

不要忘记设置子节点，使他们无法被选中，就像您在 Player 场景中所做的那样。

在RigidBody2D属性中，设置Gravity Scale为0，这样生物就不会向下掉落。此外，在 CollisionObject2D部分下，取消选中属性Mask中的1。这将确保生物不会相互碰撞。

像为播放器所做的那样设置AnimatedSprite2D 。这次，我们有 3 个动画：fly、swim和walk。art 文件夹中的每个动画都有两个图像。

必须为每个单独的动画设置Animation Speed属性。将所有 3 个动画的属性值均调整为。3

您可以使用输入字段Animation Speed右侧的“播放动画”按钮来预览动画。

我们将随机选择其中一种动画，这样生物就会有一些变化。

与玩家图像一样，这些生物图像也需要按比例缩小。将 AnimatedSprite2D的Scale属性设置为(0.75, 0.75)

类似于Player场景，MOD场景也需要为碰撞添加一个CapsuleShape2D。要将形状与图像对齐，您需要将Rotation属性设置为Degrees90（在检查器的“变换(Transform)”下）。

保存场景。

敌人脚本¶

像这样添加一个脚本Mob：

GDScript

extends RigidBody2D

现在让我们看看脚本的其余部分。在_ready()我们播放动画并随机选择三种动画类型之一：

GD脚本C＃C++

func _ready():
    var mob_types = $AnimatedSprite2D.sprite_frames.get_animation_names()
    $AnimatedSprite2D.play(mob_types[randi() % mob_types.size()])

首先，我们从 AnimatedSprite2D 的属性中获取动画名称列表frames 。这将返回一个包含所有三个动画名称的数组：["walk", "swim", "fly"]

然后我们需要【在0~2之间】选择一个随机数，并从列表中选择这些名称之一（数组索引从0开始）。randi() % n选择一个介于0和n-1之间的随机整数。

最后一块是让小怪在离开屏幕时删除自己。将VisibleOnScreenNotifier2D节点的screen_exited()信号连接到Mob并添加以下代码：

GDScript

func _on_visible_on_screen_notifier_2d_screen_exited():
    queue_free()

这样就完成了Mob场景。

准备好玩家和敌人后，在下一部分中，我们将把他们放在一个新场景中。我们会让敌人在游戏板周围随机生成并向前移动，将我们的项目变成一个可玩的游戏。

主要游戏场景¶

现在是时候将我们所做的一切整合到一个可玩的游戏场景中了。

创建一个新场景并添加一个名为Main的节点【Node】。（我们使用 Node 而不是 Node2D 的原因是因为这个节点将成为处理游戏逻辑的容器。它本身不需要 2D 功能。）

单击实例按钮（由链接图标表示）并选择您保存的 player.tscn.

现在，将以下节点添加为的子节点Main，并如图所示命名它们（值以秒为单位）：

计时器（名称MobTimer）- 控制暴徒产生的频率
计时器（名称ScoreTimer） - 每秒递增分数
计时器（名称StartTimer）- 在开始前延迟
Marker2D (名称StartPosition) - 指示玩家的起始位置

设置每个Timer节点的Wait Time属性如下：

MobTimer:0.5
ScoreTimer:1
StartTimer:2

此外，将StartTimer的One Shot属性设置为“On”并将StartPosition节点的Position设置为(240, 450)

生成生物¶

主节点将生成新的生物，我们希望它们出现在屏幕边缘的随机位置。添加一个Path2D节点，命名MobPath为Main的子节点。选择时Path2D，您会在编辑器顶部看到一些新按钮：

选择中间的一个（“添加点”）并通过单击以在显示的角处添加点来绘制路径。要使点捕捉到网格，请确保同时选择了“使用网格捕捉”和“使用智能捕捉”。这些选项可以在“锁定”按钮的左侧找到，分别显示为一些点和相交线旁边的磁铁。

重要提示：按顺时针顺序画出路径，否则你的生物生成时会指向外而不是指向内！

在图像中放置4点后，单击“关闭曲线”按钮，您的曲线将完成。

现在路径已定义，添加一个PathFollow2D 节点作为MobPath的子节点并将其命名为MobSpawnLocation。该节点在移动时会自动旋转并跟随路径，因此我们可以使用它来选择沿路径的随机位置和方向。

你的场景应该是这样的：

主脚本¶

添加一个脚本到Main. 在脚本的顶部，我们使用@export var mob_scene: PackedScene允许我们选择我们想要实例化的 Mob 场景。

GDScript

extends Node

@export var mob_scene: PackedScene
var score

单击Main节点，您将在“脚本变量”下的检查器中Main看到该Mob Scene属性。

您可以通过两种方式分配此属性的值：

从“文件系统”停靠栏拖放mob.tscn到Mob Scene 属性中。
单击“[空]”旁边的向下箭头并选择“加载”。选择mob.tscn。

接下来，在场景面板中选择Main节点下的Player场景实例，并访问侧边栏上的 Node面板。确保在 Node面板中选择了 Signals 选项卡。

您应该看到Player节点的信号列表。在列表中找到并双击hit信号（或右键单击它并选择“连接...”）。这将打开信号连接对话框。我们想创建一个名为game_over的新函数，它将处理游戏结束时需要发生的事情。在信号连接对话框底部的“Receiver Method”框中键入“game_over”，然后单击“Connect”。您的目标是让Player中发出hit信号并在Main脚本中进行处理。将以下代码添加到新函数，以及一个new_game函数，用于为新游戏设置所有内容：

GDScript

func game_over():
    $ScoreTimer.stop()
    $MobTimer.stop()

func new_game():
    score = 0
    $Player.start($StartPosition.position)
    $StartTimer.start()

现在将每个定时器节点（StartTimer、 ScoreTimer和MobTimer）的timeout()信号连接到主脚本。StartTimer将启动其他两个计时器。ScoreTimer将使分数增加 1。

GDScript

func _on_score_timer_timeout():
    score += 1

func _on_start_timer_timeout():
    $MobTimer.start()
    $ScoreTimer.start()

在中_on_mob_timer_timeout()，我们将创建一个生物实例，沿Path2D随机选择一个起始位置，然后让生物开始运动。节点 PathFollow2D会随着路径自动旋转，因此我们将使用它来选择生物的方向及其位置。当我们生成一个生物时，我们将在150.0和250.0之间选择一个随机值作为每个生物移动的速度（如果它们都以相同的速度移动会很无聊）。

请注意，必须使用add_child()将新实例添加到场景中。

GDScript

func _on_mob_timer_timeout():
    # Create a new instance of the Mob scene.
    var mob = mob_scene.instantiate()

    # Choose a random location on Path2D.
    var mob_spawn_location = get_node("MobPath/MobSpawnLocation")
    mob_spawn_location.progress_ratio = randf()

    # Set the mob's direction perpendicular to the path direction.
    var direction = mob_spawn_location.rotation + PI / 2

    # Set the mob's position to a random location.
    mob.position = mob_spawn_location.position

    # Add some randomness to the direction.
    direction += randf_range(-PI / 4, PI / 4)
    mob.rotation = direction

    # Choose the velocity for the mob.
    var velocity = Vector2(randf_range(150.0, 250.0), 0.0)
    mob.linear_velocity = velocity.rotated(direction)

    # Spawn the mob by adding it to the Main scene.
    add_child(mob)

重要提示：为什么用PI？在需要角度的函数中，Godot 使用弧度而不是度数。Pi 以弧度表示半圈，约 3.1415（也有TAU等于2 * PI）。如果您更习惯使用度数，则需要使用deg_to_rad()和rad_to_deg()函数在两者之间进行转换。

测试场景¶

让我们测试场景以确保一切正常。将此new_game 调用添加到_ready()：

GDScript

func _ready():
    new_game()

让我们也指定Main为我们的“主场景”——游戏启动时自动运行的场景。按“播放”按钮并main.tscn在出现提示时选择。

注：如果您已经将另一个场景设置为“主场景”，则可以右键单击main.tscn文件系统停靠栏并选择“设置为主场景”。

您应该能够移动玩家，看到怪物生成，并看到玩家在被怪物击中时消失。

当您确定一切正常时，在_ready()中删除对new_game()的调用。

我们的游戏缺少什么？一些用户界面。在下一课中，我们将添加一个标题屏幕并显示玩家的得分。

顶层屏幕¶

我们的游戏需要的最后一块是用户界面 (UI)，用于显示得分、“游戏结束”消息和重启按钮等内容。

创建一个新场景，并添加一个名为HUD的CanvasLayer节点。“HUD”代表“顶层屏幕”，一种信息显示叠加层，显示在游戏视图顶部。

CanvasLayer节点让我们可以在游戏其余部分之上的层上绘制 UI 元素，这样它显示的信息就不会被任何游戏元素（例如玩家或生物）覆盖。

HUD需要显示以下信息：

得分，由ScoreTimer.
消息，例如“游戏结束”或“准备好！”
一个“开始”按钮开始游戏。

UI 元素的基本节点是Control。要创建我们的 UI，我们将使用两种类型的Control节点：Label和Button。

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

标签名为ScoreLabel。
标签名为Message。
名为StartButton的按钮。
定时器名为MessageTimer.

单击ScoreLabel并在检查器的Text字段中键入一个数字。Control节点的默认字体很小并且不能很好地缩放。游戏资源中包含一个名为“Xolonium-Regular.ttf”的字体文件。要使用此字体，请执行以下操作：

在“主题覆盖 > 字体”下，选择“加载”并选择“Xolonium-Regular.ttf”文件。

在ScoreLabel上完成此操作后，您可以单击 Font 属性旁边的向下箭头并选择“复制”，然后将其“粘贴”到其他两个 Control 节点上的相同位置。设置ScoreLabel“主题覆盖 > 字体大小”下的“字体大小”属性。设置为64的效果就很好。

注：锚点： Control节点有位置和大小，但它们也有锚点。锚点定义原点——节点边缘的参考点。

如下图所示排列节点。您可以拖动节点以手动放置它们，或者为了更精确地放置它们，请使用具有以下设置的“锚点预设”：

Score标签¶

布局：

锚预设：Center Top

标签设置：

文本：0
水平对齐：Center
垂直对齐：Center

信息¶

布局：

锚预设：Center

标签设置：

文本：Dodge the Creeps!
水平对齐：Center
垂直对齐：Center
自动换行模式：Word

开始按钮¶

布局：

锚预设：Center Bottom

按钮设置：

文本：Start
Y 位置：580（控制 - 布局/转换）

在MessageTimer上，将Wait Time设置为2并将One Shot属性设置为“开”。

现在将此脚本添加到HUD：

GDScript

extends CanvasLayer

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

我们现在想临时显示一条消息，比如“Get Ready”，所以我们添加如下代码

GDScript

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

我们还需要处理当玩家输了时发生的事情。下面的代码将显示“游戏结束”2 秒，然后返回到标题屏幕，并在短暂的暂停后显示“开始”按钮。

GDScript

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

    $Message.text = "Dodge the\nCreeps!"
    $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”按钮。

注：当您需要短暂暂停时，使用 SceneTree 的create_timer()函数是使用 Timer 节点的替代方法。这对于添加延迟非常有用，例如在上面的代码中，我们希望在显示“开始”按钮之前等待一段时间。

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

GDScript

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

连接MessageTimer的timeout()信号和StartButton 的pressed()信号，在新函数中添加如下代码：

GDScript

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

func _on_message_timer_timeout():
    $Message.hide()

将 HUD 连接到 Main¶

现在我们已经完成了HUD场景的创建，回到Main. 像你做Player场景一样，在Main中实例化HUD场景。场景树应该是这样的，所以【你要检查一下】确保没有遗漏任何东西：

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

在“节点”选项卡中，通过单击“连接信号”窗口中的“选择”按钮并选择new_game()方法或在窗口中的“接收器方法”下方键入“new_game”，将 HUD 的start_game信号连接到主节点的【new_game()函数】。确认【在脚本界面中】，绿色连接图标现在出现func new_game()的旁边。

请记得从_ready()中删除对new_game()的调用。

在new_game()中，更新分数显示并显示“准备好”消息：

GDScript

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

在game_over()我们需要调用相应的HUD函数：

GDScript

$HUD.show_game_over()

提醒一下：我们不想自动开始新游戏，所以如果您还没有，请删除_ready()中对new_game()的调用。

最后，将此添加到_on_score_timer_timeout()以更新显示与不断变化的分数同步：

GDScript

$HUD.update_score(score)

现在你可以玩了！单击“播放项目”按钮。你会被要求选择一个主场景，可选择main.tscn。

移除旧的 creeps¶

如果您一直玩到“Game Over”，然后立即开始新游戏，则前一游戏的小兵可能仍会出现在屏幕上。如果他们在新游戏开始时全部消失会更好。我们只需要一种方法来告诉所有的暴徒自己离开。我们可以使用“组”功能来做到这一点。

在Mob场景中，选择根节点并单击检查器旁边的“节点”选项卡（与您找到节点信号的位置相同）。在“信号”旁边，单击“组”，您可以输入新的组名称【mobs】并单击“添加”。

现在所有的生物都将在“mobs组中。然后我们可以将以下行添加到Main的函数new_game()中：

GDScript

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

该call_group()函数在组中的每个节点上调用命名函数 - 在这种情况下，我们告诉每个mob【mobs组中的所有对象】删除自己。

至此游戏基本完成。在下一部分和最后一部分中，我们将通过添加背景、循环音乐和一些键盘快捷键来对其进行一些润色。

整理¶

我们现在已经完成了游戏的所有功能。以下是添加更多“果汁【小细节】”以改善游戏体验的一些剩余步骤。

随意用自己的想法扩展游戏玩法。

背景¶

默认的灰色背景不是很吸引人，所以让我们改变它的颜色。一种方法是使用ColorRect节点。使它成为下面的第一个节点，Main这样它就会被绘制在其他节点的后面。 ColorRect只有一个属性：Color. 选择您喜欢的颜色，然后在视口顶部的工具栏或检查器中选择“布局”->“锚点预设”->“全矩形”，使其覆盖屏幕。

如果有的话，您也可以通过使用节点来添加背景图像 TextureRect。