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
Page updated
Google Sites
Report abuse