Up to date
This page is up to date for Godot 4.0
.
If you still find outdated information, please open an issue.
Heads up display¶
The final piece our game needs is a User Interface (UI) to display things like score, a "game over" message, and a restart button.
Create a new scene, 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.
The CanvasLayer node lets us draw our UI elements on a layer above the rest of the game, so that the information it displays isn't covered up by any game elements like the player or mobs.
The HUD needs to display the following information:
Score, changed by
ScoreTimer
.A message, such as "Game Over" or "Get Ready!"
A "Start" button to begin the game.
The basic node for UI elements is Control. To create our UI, we'll use two types of Control nodes: Label and Button.
Create the following as children of the HUD
node:
Click on the ScoreLabel
and type a number into the Text
field in the
Inspector. The default font for Control
nodes is small and doesn't scale
well. There is a font file included in the game assets called
"Xolonium-Regular.ttf". To use this font, do the following:
Under "Theme Overrides > Fonts", choose "Load" and select the "Xolonium-Regular.ttf" file.

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.
Set the "Font Size" property of the ScoreLabel
under "Theme Overrides > Font Sizes".
A setting of 64
works well.

Note
Anchors: Control
nodes have a position and size,
but they also have anchors. Anchors define the origin -
the reference point for the edges of the node.
Arrange the nodes as shown below. You can drag the nodes to place them manually, or for more precise placement, use "Anchor Presets" with the following settings:

ScoreLabel¶
Layout :
Anchor Preset :
Center Top
Label settings :
Text :
0
Horizontal Alignment :
Center
Vertical Alignment :
Center
Message¶
Layout :
Anchor Preset :
Center
Label settings :
Text :
Dodge the Creeps!
Horizontal Alignment :
Center
Vertical Alignment :
Center
Autowrap Mode :
Word