Create a new scene with CanvasLayer as the root node
Create a new scene with CanvasLayer as the root node
Rename it to HUD
Rename it to HUD
Save the scene as hud.tscn
Save the scene as hud.tscn
Embedded Files
What is a CanvasLayer?
What is a CanvasLayer?
Think of a CanvasLayer as a clear sheet of glass laid right over the top of your game screen.
Think of a CanvasLayer as a clear sheet of glass laid right over the top of your game screen.
Normally, every 2D node in your scene lives in the same shared world space—if a giant asteroid drifts across the middle of the screen, or if a camera pans away, standard nodes move with the world or can get covered up by gameplay objects.
Normally, every 2D node in your scene lives in the same shared world space—if a giant asteroid drifts across the middle of the screen, or if a camera pans away, standard nodes move with the world or can get covered up by gameplay objects.
Placing your UI nodes (like your Play button, score labels, and health bars) inside a CanvasLayer solves two major problems automatically:
Placing your UI nodes (like your Play button, score labels, and health bars) inside a CanvasLayer solves two major problems automatically:
- Always on Top: By default, a CanvasLayer renders on layer 1 (above your main game world on layer 0). No matter how many lasers, explosions, or space rocks fill the screen, your menu and HUD will always draw cleanly on top of the action.
- Locked to the Screen: A CanvasLayer ignores your game world's position and camera movement. Even if you add a scrolling camera or screen-shake later, anything inside the CanvasLayer stays pinned to the exact same spot on the player's monitor.
Add a Timer and MarginContainer as children
Add a Timer and MarginContainer as children
Select the MarginContainer
Select the MarginContainer
Set the Anchor to Top Wide
Set the Anchor to Top Wide
In Theme Overrides set margins to 20
In Theme Overrides set margins to 20
Select the Timer
Select the Timer
Turn One Shot ON
Turn One Shot ON
Set Wait Time to 2s
Set Wait Time to 2s
Add an HBoxContainer as a child of MarginContainer
Add an HBoxContainer as a child of MarginContainer
This will position the score on the left
This will position the score on the left
And the lives on the right
And the lives on the right
As children of HBoxContainer add
As children of HBoxContainer add
A Label renamed to ScoreLabel
A Label renamed to ScoreLabel
another HBoxContainer renamed to LivesCounter
another HBoxContainer renamed to LivesCounter
Select the ScoreLabel
Select the ScoreLabel
Set Text to 0
Set Text to 0
Set Horizontal size to Expand
Set Horizontal size to Expand
Select the ScoreLabel
Select the ScoreLabel
Add a New LabelSettings
Add a New LabelSettings
Expand
Expand
Add the kenvector font
Add the kenvector font
Set Size to 64
Set Size to 64
Select LivesCounter
Select LivesCounter
In Theme Overrides
In Theme Overrides
Set Separation to 20
Set Separation to 20
Add a TextureRect as a child of LivesCounter
Add a TextureRect as a child of LivesCounter
Rename it to L1
Rename it to L1
Set player_small.png as the Texture
Set player_small.png as the Texture
Set Stretch Mode to Keep Aspect Centered
Set Stretch Mode to Keep Aspect Centered
Select the L1 node and duplicate it twice
Select the L1 node and duplicate it twice
We will hide and show these nodes
We will hide and show these nodes
To display the number of player lives
To display the number of player lives
Add a VBoxContainer as a child of HUD
Add a VBoxContainer as a child of HUD
Inside the VBox add a Label named Message
Inside the VBox add a Label named Message
Add a TextureButton named StartButton
Add a TextureButton named StartButton
Set the Layout of VBoxContainer to Center Wide
Set the Layout of VBoxContainer to Center Wide
In Theme Overrides set Separation to 100
In Theme Overrides set Separation to 100
Select the StartButton
Select the StartButton
Use play_button.png for the Normal Texture
Use play_button.png for the Normal Texture
Use play_button_h.png for Hover Texture
Use play_button_h.png for Hover Texture
Set Horizontal size to Shrink Center
Set Horizontal size to Shrink Center
Select the Message node
Select the Message node
Set Text to SPACE ROCKS
Set Text to SPACE ROCKS
Add a New LabelSettings
Add a New LabelSettings
Expand
Expand
Add the kenvector font
Add the kenvector font
Set Size to 64
Set Size to 64
Set Horizontal Alignment to Center
Set Horizontal Alignment to Center
UI SCRIPT
UI SCRIPT
Add a script to the HUD node
Add a script to the HUD node
Add a custom signal to broadcast game start
Add a custom signal to broadcast game start
As your Scene Tree hierarchy grows deeper, referring to nodes using long path strings with the $ shortcut can become tedious and fragile. Furthermore, because a script runs before its child nodes are fully loaded into memory, trying to assign node references at the very top of a script will throw a null instance error.
As your Scene Tree hierarchy grows deeper, referring to nodes using long path strings with the $ shortcut can become tedious and fragile. Furthermore, because a script runs before its child nodes are fully loaded into memory, trying to assign node references at the very top of a script will throw a null instance error.
To solve both problems, we use the @onready annotation. This tells Godot: "Wait until this node and all its children have safely entered the scene tree before caching this reference into a variable."
To solve both problems, we use the @onready annotation. This tells Godot: "Wait until this node and all its children have safely entered the scene tree before caching this reference into a variable."
A shortcut for creating onready variables is to drag the node from the scene tree into the script and then hold down Ctrl as you release it.
A shortcut for creating onready variables is to drag the node from the scene tree into the script and then hold down Ctrl as you release it.
Add references to:
Add references to:
LivesCounter
LivesCounter
ScoreLabel
ScoreLabel
Message
Message
StartButton
StartButton
Create a function to show a message
Create a function to show a message
It will update the text
It will update the text
Show the message
Show the message
Start the timer
Start the timer
Create a function to
Create a function to
update the score
update the score
Create a function to update the lives
Create a function to update the lives
Create a game over function
Create a game over function
Create the pressed function
Create the pressed function
Create the timeout function
Create the timeout function
Connect the pressed and timout signals in code or the Inspector
Connect the pressed and timout signals in code or the Inspector
RETURN TO THE MAIN SCENE
RETURN TO THE MAIN SCENE
Add an instance of the HUD to the scene
Add an instance of the HUD to the scene
Add variables to the main script to track
Add variables to the main script to track
the level
the level
the score
the score
if playing
if playing
Add a function to setup a new game
Add a function to setup a new game
Note the $Player.reset() function
Note the $Player.reset() function
This doesn't exist yet!
This doesn't exist yet!
We will create this soon though...
We will create this soon though...
Create a function for new levels
Announce level number
Spawn number of rocks to match
Create a function for new levels
Announce level number
Spawn number of rocks to match
Dynamic Text Formatting with %s
Dynamic Text Formatting with %s
In your new_level() function, you used this line: $HUD.show_message("WAVE %s" % level)
In your new_level() function, you used this line: $HUD.show_message("WAVE %s" % level)
The %s acts as a placeholder (or "blank slot") inside a text string.
The %s acts as a placeholder (or "blank slot") inside a text string.
When Godot runs this line, it looks at the % level instruction at the end and injects the current numerical value of your level variable right into that placeholder. For example:
When Godot runs this line, it looks at the % level instruction at the end and injects the current numerical value of your level variable right into that placeholder. For example:
- If level is 1, it evaluates to "WAVE 1"
- If level is 2, it evaluates to "WAVE 2"
This is a clean, Python-inspired shortcut in GDScript. It is much easier to read and maintain than manual string conversion and concatenation (like "WAVE " + str(level)), especially when you need to format multiple variables into a single sentence.
This is a clean, Python-inspired shortcut in GDScript. It is much easier to read and maintain than manual string conversion and concatenation (like "WAVE " + str(level)), especially when you need to format multiple variables into a single sentence.
Remove the code that is spawning rocks in the ready function
Remove the code that is spawning rocks in the ready function
This was for testing and we don't need it anymore
This was for testing and we don't need it anymore
Add a check to count how many rocks are left
Add a check to count how many rocks are left
In the process function
In the process function
Connect the start_game signal of HUD to
Connect the start_game signal of HUD to
the new_game function in Main
the new_game function in Main
via code
via code
or
or
via the Inspector
via the Inspector
Add a game over function
Add a game over function
To main.gd
To main.gd
RETURN TO THE PLAYER SCENE
RETURN TO THE PLAYER SCENE
Add a signal for lives changed
Add a signal for lives changed
And a signal for dead to the
And a signal for dead to the
Player script
Player script
Add a variable to flag resetting the position of the player
Add a variable to flag resetting the position of the player
Add a setter variable for lives
Add a setter variable for lives
Automated Property Changes with Setter Functions
Automated Property Changes with Setter Functions
In Godot 4, a setter function is a special function that runs automatically behind the scenes whenever you change the value of a variable.
In Godot 4, a setter function is a special function that runs automatically behind the scenes whenever you change the value of a variable.
Normally, if a player loses a life, you would have to remember to manually write code to update the UI, emit signals, and check if the game is over every single time you change lives. If you forget in even one place, your game bugs out.
Normally, if a player loses a life, you would have to remember to manually write code to update the UI, emit signals, and check if the game is over every single time you change lives. If you forget in even one place, your game bugs out.
By attaching a setter to your variable, written like this: var lives = 3: set = _set_lives
By attaching a setter to your variable, written like this: var lives = 3: set = _set_lives
Whenever you write lives -= 1 anywhere in your script, Godot automatically interrupts and runs your setter function first. This guarantees that your health bars, UI labels, and state transitions always update instantly and cleanly, no matter where in your code the variable was modified.
Whenever you write lives -= 1 anywhere in your script, Godot automatically interrupts and runs your setter function first. This guarantees that your health bars, UI labels, and state transitions always update instantly and cleanly, no matter where in your code the variable was modified.
Add the reset function
Add the reset function
Called when a new game starts
Called when a new game starts
Reset the players position
Reset the players position
Back to the center of the screen
Back to the center of the screen
In the integrate forces function
In the integrate forces function
Page updated
Google Sites
Report abuse