To display scores and the game over screen we will create a scene for the User Interface
To display scores and the game over screen we will create a scene for the User Interface
Embedded Files
Create a new scene with CanvasLayer as root
Create a new scene with CanvasLayer as root
Rename it to UI
Rename it to UI
What is a CanvasLayer?
What is a CanvasLayer?
A CanvasLayer is a special node that creates a separate rendering layer on top of the game world.
A CanvasLayer is a special node that creates a separate rendering layer on top of the game world.
- Independent: Nodes inside a CanvasLayer ignore the Camera. They do not move when the camera moves.
- Fixed Coordinates: (0, 0) inside a CanvasLayer is always the top-left corner of your monitor/screen, regardless of where the player is in the level.
- Always on Top: By default, a CanvasLayer draws over everything else (Sprites, Tilemaps, Backgrounds).
To save space for the score
To save space for the score
Add a MarginContainer as a child
Add a MarginContainer as a child
Set the top margin to 32
Set the top margin to 32
Set the size to 288 x 512
Set the size to 288 x 512
Set the Anchor to Full Rect
Set the Anchor to Full Rect
Add an HBoxContainer as a child
Add an HBoxContainer as a child
Rename it to PointsContainer
Rename it to PointsContainer
Set the Alignment to Center
Set the Alignment to Center
Add a VBoxContainer as a child
Add a VBoxContainer as a child
Rename it to GameOverBox
Rename it to GameOverBox
Set Vertical sizing to
Set Vertical sizing to
Shrink Center
Shrink Center
Add a TextureRect as a child
Add a TextureRect as a child
Of GameOverBox
Of GameOverBox
Set the Texture to gameover.png
Set the Texture to gameover.png
Add a Panel as child of GameOverBox
Add a Panel as child of GameOverBox
Set the custom minimum size to 200 x 100
Set the custom minimum size to 200 x 100
Add a TextureRect as a child of Panel
Add a TextureRect as a child of Panel
Set Texture to MedalFrame.png
Set Texture to MedalFrame.png
Set Stretch Mode to Keep Aspect
Set Stretch Mode to Keep Aspect
Set the position to 40px on X
Set the position to 40px on X
Add two new HBoxContainers as children of Panel
Add two new HBoxContainers as children of Panel
Rename to RoundScoreContainer and BestScoreContainer
Rename to RoundScoreContainer and BestScoreContainer
Set Alignment to Center for both
Set Alignment to Center for both
For RoundScoreContainer
For RoundScoreContainer
Adjust Size, Position and Scale
Adjust Size, Position and Scale
For BestScoreContainer
For BestScoreContainer
Adjust the size, position and scale
Adjust the size, position and scale
Add a Button as a child of Panel
Add a Button as a child of Panel
Set the Text to RESTART
Set the Text to RESTART
Change the Font to FlappyBirdy
Change the Font to FlappyBirdy
Set the size to 32px
Set the size to 32px
Add a TextureRect as a child of Panel
Add a TextureRect as a child of Panel
Rename it to MedalTexture
Rename it to MedalTexture
Set the default texture to MedalBronze.png
Set the default texture to MedalBronze.png
Position the medal over the
Position the medal over the
impression in the PanelTexture
impression in the PanelTexture
Turn visibility off
Turn visibility off
Add a Script to the UI node
Add a Script to the UI node
Assign a class name
Assign a class name
Add references to
Add references to
All the containers
All the containers
Because we have a texture for each digit
Because we have a texture for each digit
Populate them in an array for easy access
Populate them in an array for easy access
Also create an array for the medal textures
Also create an array for the medal textures
Create a function to update the points
Create a function to update the points
Clear the previous digits
Clear the previous digits
Convert the score value to a string
Convert the score value to a string
For each character in the string
For each character in the string
Convert it to a single digit
Convert it to a single digit
Create a new TextureRect for each digit
Create a new TextureRect for each digit
Assign a texture to it from the arrray
Assign a texture to it from the arrray
Maintain the aspect ratio
Maintain the aspect ratio
Add the digit texture to the container
Add the digit texture to the container
Create a function to update the score
Create a function to update the score
While playing
While playing
Create a function to assign the correct medal
Create a function to assign the correct medal
Based on the points achieved in the round
Based on the points achieved in the round
Create the game over function
Create the game over function
Show the game over box
Show the game over box
Set the round score
Set the round score
Set the best score
Set the best score
Assign the medal
Assign the medal
Set the GameOverBox to invisible in the Tree
Set the GameOverBox to invisible in the Tree
Select the Button node
Select the Button node
Connect the pressed signal
Connect the pressed signal
Code the signal to restart the game
Code the signal to restart the game
In the Ready function
In the Ready function
Connect the Signal Bus score updated function to the update gameplay score function
Connect the Signal Bus score updated function to the update gameplay score function
Clear the round score
Clear the round score
Set the game over box to invisible
Set the game over box to invisible
Page updated
Google Sites
Report abuse