To display scores and the game over screen we will create a scene for the User Interface
Create a new scene with CanvasLayer as root
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
Add a MarginContainer as a child
Set the size to 288 x 512
Set the Anchor to Full Rect
Add an HBoxContainer as a child
Rename it to PointsContainer
Set the Alignment to Center
Add a VBoxContainer as a child
Add a TextureRect as a child
Set the Texture to gameover.png
Add a Panel as child of GameOverBox
Set the custom minimum size to 200 x 100
Add a Button as a child of Panel
Change the Font to FlappyBirdy
Add a Script to the UI node
Because we have a texture for each digit
Populate them in an array for easy access
Create a function to update the points
Clear the previous digits
Convert the score value to a string
For each character in the string
Convert it to a single digit
Create a new TextureRect for each digit
Assign a texture to it from the arrray
Maintain the aspect ratio
Add the digit texture to the container
Create a game over function
Set the game over box to be visible
Set the GameOverBox to invisible in the Tree
Connect the Button's pressed signal
To reload the current level