The heads up display (HUD) will display info such as score, time remaining, game over messages and a start button.
The heads up display (HUD) will display info such as score, time remaining, game over messages and a start button.
Embedded Files
Create a new scene
Create a new scene
Add a CanvasLayer node and rename it to HUD
Add a CanvasLayer node and rename it to HUD
Save the scene as hud.tscn
Save the scene as hud.tscn
A CanvasLayer acts like a clear sheet of glass placed directly over your game screen. Any UI elements you place inside it (like scores, health bars, timers or buttons) will always stay glued to the screen in front of the action, completely unaffected by camera movement or player position.
A CanvasLayer acts like a clear sheet of glass placed directly over your game screen. Any UI elements you place inside it (like scores, health bars, timers or buttons) will always stay glued to the screen in front of the action, completely unaffected by camera movement or player position.
Add a Label node to the scene
Add a Label node to the scene
Rename it to GameStatusLabel
Rename it to GameStatusLabel
Set the Label's Anchor to
Set the Label's Anchor to
HCenter Wide
HCenter Wide
This ensures it occupies the full width of the screen
This ensures it occupies the full width of the screen
Now set both Horizontal Alignment and Vertical Alignment to Center
Now set both Horizontal Alignment and Vertical Alignment to Center
Finally set the text to Coin Grabber!
Finally set the text to Coin Grabber!
To use our own font
To use our own font
Click on Label Settings
Click on Label Settings
Select New Label Settings
Select New Label Settings
Click and Expand Label Settings
Click and Expand Label Settings
Drag the Kenney Bold.ttf font
Drag the Kenney Bold.ttf font
To the Font property
To the Font property
Set the size to 36
Set the size to 36
Experiment with shadows and outlines!
Experiment with shadows and outlines!
Add a MarginContainer node
Add a MarginContainer node
Duplicate the GameStatusLabel twice
Duplicate the GameStatusLabel twice
Rename the duplicates to ScoreLabel and TimeLabel
Rename the duplicates to ScoreLabel and TimeLabel
Set both their Text properties to 0
Set both their Text properties to 0
Drag them under the MarginContainer
Drag them under the MarginContainer
Set the Horizontal Alignment of ScoreLabel to Right
Set the Horizontal Alignment of ScoreLabel to Right
Set the Horizontal Alignment of TimeLabel to Left
Set the Horizontal Alignment of TimeLabel to Left
Add a Timer node as a child of HUD
Add a Timer node as a child of HUD
Set Wait Time to 2s and One Shot to On
Set Wait Time to 2s and One Shot to On
Add a Button Node to HUD
Add a Button Node to HUD
Rename it to StartButton
Rename it to StartButton
Set the Text property to START
Set the Text property to START
Set the Button Anchor to Center Bottom
Set the Button Anchor to Center Bottom
In Theme Overrides
In Theme Overrides
Right-click Font
Right-click Font
Choose Quick Load
Choose Quick Load
Select the font
Select the font
HUD SCRIPT
HUD SCRIPT
We now have a basic HUD
We now have a basic HUD
To make the components functional
To make the components functional
Attach a script to the HUD node
Attach a script to the HUD node
Create a custom signal to broadcast the start of the game
Create a custom signal to broadcast the start of the game
Previously we connected signals
Previously we connected signals
In the Inspector
In the Inspector
This time we will connect the signal using code
This time we will connect the signal using code
In the _ready function
In the _ready function
Connect the timout signal for the timer
Connect the timout signal for the timer
Connect the pressed signal for the button
Connect the pressed signal for the button
Create the two functions we are connecting to
Create the two functions we are connecting to
Create functions to:
Create functions to:
Update the score
Update the score
Update the timer
Update the timer
Finally, create a function
Finally, create a function
For when the game is lost
For when the game is lost
Return to the Main scene
Return to the Main scene
Add the HUD to the scene
Add the HUD to the scene
Connect the Timeout signal of GameTimer
Connect the Timeout signal of GameTimer
Either via code or the Inspector
Either via code or the Inspector
Code it to count down
Code it to count down
Create the game_over function
Create the game_over function
set playing to false
set playing to false
stop game timer
stop game timer
remove all coins
remove all coins
show game over message
show game over message
kill the player
kill the player
Select the HUD node
Select the HUD node
Connect its start_game() signal
Connect its start_game() signal
Via Inspector or code
Via Inspector or code
Remove the call to new_game from the ready function!
Remove the call to new_game from the ready function!
Select the Player node
Select the Player node
Connect the hurt signal
Connect the hurt signal
Connect the pickup signal
Connect the pickup signal
Either in code or via Inspector
Either in code or via Inspector
Update the new_game function
Update the new_game function
Include two lines to
Include two lines to
update the score
update the score
update the timer
update the timer
Now press F5 to run the game
Now press F5 to run the game
Select Current to set Main as the Main scene
Select Current to set Main as the Main scene
The first scene which runs when starting the game
The first scene which runs when starting the game
The basic game works!
The basic game works!
Now we can refine and improve it.
Now we can refine and improve it.
Page updated
Google Sites
Report abuse