In this first video, we design the high scores panel together.
This involves using Godot’s nodes, which are dedicated to the user interface.
Creating user interfaces is complex, so don’t worry if you don’t get all the details from the start. You will use these nodes again in the course and better understand them through practice.
Godot comes with numerous nodes dedicated to user interface (UI) design: the nodes. They all have a green icon in the Create New Node window.
To give you an idea of how powerful nodes are, everything you see in the Godot editor itself uses them.
When you design user interfaces, you want boxes and widgets that you can nest and combine freely.
Different games and applications need different user interfaces, so UI design systems are often flexible and complex.
This is why Godot’s nodes come with many sections and properties in the Inspector.
Each node is a resizable box that anchors and resizes relative to a parent box, the largest being the game window.
In the video, you could see that when we selected a node and used Layout -> Full Rect. The four green pins represented the scoreboard’s anchor points.
The distance between the node’s box and those pins defines the node’s margins (the yellow arrows below).
When the player resizes the game window, the scoreboard resizes but keeps fixed margins relative to the game window’s corners.
nodes are a sub-category of nodes that automatically reposition and resize their children:
Godot comes with all the basic containers to display other nodes in rows, columns, grids, etc.
The node allows you to draw an unformatted line or paragraph of text.
It has settings you can use to capitalize, wrap, or re-align your text.
That’s it for this part. In the next lesson, you’ll display a list of names on the board using only code.