Let's design our scoreboard.
Now we're diving into user interface creation,
and it's a bit overwhelming with all the options that you have,
we need to use many nodes to make user interfaces.
So please don't worry too much about all the details, about remembering everything,
you will learn as you go through repetition.
This is just to give you a sense for the whole process.
We'll start by creating a new scene.
So you want to go to Scene, New Scene, if you don't have an empty tab already,
and then click on Other Node to start creating your first node.
The user interface nodes are the ones below Control.
If you start expanding the subcategories, you will see there are the tons of them.
Now we're going to search for specific ones to keep it a bit easier.
So start by typing panel container.
And we want to create this panel container node.
This will be the base for our scoreboard.
A user interface node is a box, basically.
And you nest these boxes.
A panel container can draw a panel behind something
and stretch its children to fit the edges of the node.
It can only stretch control nodes, so all of the green ones,
not a sprite or something like that, just so you know.
Then with the select tool active,
you will see that on top of the usual box with the resize corners,
we have four pins in the top left of the screen.
These represent the node's anchors.
They allow the node to calculate a margin to those pins
that will be preserved when the player resizes the user interface
or the game window.
More importantly, control nodes come with this layout menu.
You can see there's a blue line in the top bar at the top.
This indicates that the interface here, the menu, is contextual.
If I deselect the node, it disappears.
If I reselect it, it appears again.
Now, if you click Layout,
you get a list of options that allow you to quickly place and resize a node.
If I select center, it jumps to the center of my game window.
If I select left wide,
it's going to take all the height on the left side of the screen,
and then I can resize the panel to make some kind of side drawer, for example.
Or you can go with all the other options that you want,
but the one we want for this video is Full Rect.
It's going to expand the node to take the full game window.
It's going to place the pins in the four corners as well,
meaning that our scoreboard will scale with the game window.
All right, let's rename the node as well. We're going to name it Scoreboard.
You double click a node to change its name.
That's a bit more descriptive of what we have.
Now we're going to nest multiple nodes inside of there.
The first one we're going to add is a margin container.
So select the scoreboard and click the add node button,
or press control A, and this time look for MarginContainer.
This margin container adds a margin automatically inside the panel.
This is something we need because
we are working with containers in this video,
but don't worry too much about it now.
With the MarginContainer selected, we'll add a VBoxContainer.
This is a column, it stands for vertical box.
And it's going to list everything that we add as children
in a column layout.
Let's do that now.
So with the VBoxContainer selected, press Ctrl + A and add a label.
A label allows you to display text.
And you can see an empty box already appear at the top of our panel.
In the Inspector on the right, we can write text in the text box.
We're going to type score and you'll see the text appears in the top left.
Now in the top left, it's not ideal for a title.
So in the Inspector, change the Align to Center.
If I zoom back, you can see the text is now centered.
And then I'll turn on uppercase just to make the text uppercase.
All right, we'll add a separator line below the score
so select the VBoxContainer, Ctrl + A, and this time go for HSeparator.
This is going to draw a line below the score label.
We'll add a third node as a child of the VBoxContainer,
another VBoxContainer.
This is where we'll place a bunch of labels via code
and display the player names.
We'll rename it actually, that VBoxContainer.
I'll call it ScoresColumn.
All right, that's our panel design.
You can now save the scene by pressing Ctrl + S.
And I invite you to go into the scoreboard directory,
res://Scoreboard, as you can see in the path field at the top.
Save the scene there.
And with that, in the next video, we can improve the look of our panel.
See you there.