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
A message, such as "Game Over" or "Get Ready!"
A "Start" button to begin the game.
Create the following as children of the
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 "Custom Fonts", choose "New Font"
Click on the "Font" you added, and under "Font/Data/0", 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 "Custom Font Size" property of the
ScoreLabel. A setting of
64 works well.
Anchors and Margins:
Control nodes have a position and size,
but they also have anchors and margins. Anchors define the origin -
the reference point for the edges of the node. Margins update
automatically when you move or resize a control node. They represent
the distance from the control node's edges to its anchor.
Arrange the nodes as shown below. Click the "Layout" button to set a Control node's layout:
You can drag the nodes to place them manually, or for more precise placement, use the following settings:
Layout : "Top Wide"
Align : "Center"
Layout : "HCenter Wide"
Dodge the Creeps!
Align : "Center"
Autowrap : "On"
Connecting HUD to Main¶
Now that we're done creating the
HUD scene, go back to
HUD scene in
Main like you did the
Player scene. The scene tree
should look like this, so make sure you didn't miss anything:
Now we need to connect the
HUD functionality to our
Main script. This
requires a few additions to the
In the Node tab, connect the HUD's
start_game signal to the
function of the Main node by typing "new_game" in the "Receiver Method" in the
"Connect a Signal" window. Verify that the green connection icon now appears
func new_game() in the script.
new_game(), update the score display and show the "Get Ready" message:
game_over() we need to call the corresponding
Finally, add this to
_on_ScoreTimer_timeout() to keep the display in sync
with the changing score:
Now you're ready to play! Click the "Play the Project" button. You will be asked
to select a main scene, so choose
Removing old creeps¶
If you play until "Game Over" and then start a new game right away, the creeps from the previous game may still be on the screen. It would be better if they all disappeared at the start of a new game. We just need a way to tell all the mobs to remove themselves. We can do this with the "group" feature.
Mob scene, select the root node and click the "Node" tab next to the
Inspector (the same place where you find the node's signals). Next to "Signals",
click "Groups" and you can type a new group name and click "Add".
Now all mobs will be in the "mobs" group. We can then add the following line to
new_game() function in
call_group() function calls the named function on every node in a
group - in this case we are telling every mob to delete itself.
The game's mostly done at this point. In the next and last part, we'll polish it a bit by adding a background, looping music, and some keyboard shortcuts.