1
00:00:00,000 --> 00:00:02,543
Let's design our scoreboard.

2
00:00:02,571 --> 00:00:05,689
Now we're diving into
user interface creation,

3
00:00:05,690 --> 00:00:09,271
and it's a bit overwhelming with all
the options that you have,

4
00:00:09,272 --> 00:00:12,329
we need to use many nodes
to make user interfaces.

5
00:00:12,330 --> 00:00:17,699
So please don't worry too much about all
the details, about remembering everything,

6
00:00:17,700 --> 00:00:20,842
you will learn as you
go through repetition.

7
00:00:20,843 --> 00:00:24,700
This is just to give you
a sense for the whole process.

8
00:00:25,300 --> 00:00:28,640
We'll start by creating a new scene.

9
00:00:28,640 --> 00:00:32,557
So you want to go to Scene, New Scene,
if you don't have an empty tab already,

10
00:00:32,558 --> 00:00:36,960
and then click on Other Node
to start creating your first node.

11
00:00:36,990 --> 00:00:40,520
The user interface nodes
are the ones below Control.

12
00:00:40,550 --> 00:00:46,400
If you start expanding the subcategories,
you will see there are the tons of them.

13
00:00:46,786 --> 00:00:50,960
Now we're going to search
for specific ones to keep it a bit easier.

14
00:00:50,990 --> 00:00:54,200
So start by typing panel container.

15
00:00:54,643 --> 00:00:57,186
And we want to create
this panel container node.

16
00:00:58,029 --> 00:01:00,829
This will be the base for our scoreboard.

17
00:01:01,250 --> 00:01:06,080
A user interface node
is a box, basically.

18
00:01:06,110 --> 00:01:09,120
And you nest these boxes.

19
00:01:09,371 --> 00:01:13,686
A panel container can draw
a panel behind something

20
00:01:13,687 --> 00:01:20,629
and stretch its children
to fit the edges of the node.

21
00:01:20,630 --> 00:01:24,771
It can only stretch control nodes,
so all of the green ones,

22
00:01:24,772 --> 00:01:27,729
not a sprite or something like that,
just so you know.

23
00:01:28,271 --> 00:01:31,257
Then with the select tool active,

24
00:01:31,314 --> 00:01:36,160
you will see that on top of the usual box
with the resize corners,

25
00:01:36,190 --> 00:01:40,020
we have four pins
in the top left of the screen.

26
00:01:40,050 --> 00:01:42,656
These represent the node's anchors.

27
00:01:42,657 --> 00:01:47,485
They allow the node to calculate
a margin to those pins

28
00:01:47,486 --> 00:01:51,700
that will be preserved
when the player resizes the user interface

29
00:01:51,701 --> 00:01:53,509
or the game window.

30
00:01:53,886 --> 00:01:58,828
More importantly,
control nodes come with this layout menu.

31
00:01:58,829 --> 00:02:02,480
You can see there's a blue line
in the top bar at the top.

32
00:02:02,510 --> 00:02:07,413
This indicates that the interface here,
the menu, is contextual.

33
00:02:07,414 --> 00:02:09,543
If I deselect the node, it disappears.

34
00:02:09,544 --> 00:02:12,440
If I reselect it, it appears again.

35
00:02:12,786 --> 00:02:14,440
Now, if you click Layout,

36
00:02:14,470 --> 00:02:19,680
you get a list of options that allow you
to quickly place and resize a node.

37
00:02:19,710 --> 00:02:23,880
If I select center, it jumps
to the center of my game window.

38
00:02:23,910 --> 00:02:25,600
If I select left wide,

39
00:02:25,630 --> 00:02:30,186
it's going to take all the height
on the left side of the screen,

40
00:02:30,187 --> 00:02:34,843
and then I can resize the panel to make
some kind of side drawer, for example.

41
00:02:35,000 --> 00:02:37,971
Or you can go with all the other options
that you want,

42
00:02:37,972 --> 00:02:41,970
but the one we want for this video
is Full Rect.

43
00:02:41,971 --> 00:02:46,570
It's going to expand the node
to take the full game window.

44
00:02:46,571 --> 00:02:49,720
It's going to place the pins
in the four corners as well,

45
00:02:49,721 --> 00:02:54,185
meaning that our scoreboard will
scale with the game window.

46
00:02:54,186 --> 00:02:59,514
All right, let's rename the node as well.
We're going to name it Scoreboard.

47
00:02:59,657 --> 00:03:02,800
You double click a node
to change its name.

48
00:03:03,086 --> 00:03:05,880
That's a bit more
descriptive of what we have.

49
00:03:06,129 --> 00:03:09,480
Now we're going to nest
multiple nodes inside of there.

50
00:03:09,510 --> 00:03:12,240
The first one we're going to add
is a margin container.

51
00:03:12,270 --> 00:03:15,086
So select the scoreboard
and click the add node button,

52
00:03:15,087 --> 00:03:20,143
or press control A,
and this time look for MarginContainer.

53
00:03:20,370 --> 00:03:26,400
This margin container adds a margin
automatically inside the panel.

54
00:03:26,430 --> 00:03:28,100
This is something we need because

55
00:03:28,101 --> 00:03:30,814
we are working with containers
in this video,

56
00:03:30,815 --> 00:03:33,924
but don't worry too much about it now.

57
00:03:34,014 --> 00:03:39,213
With the MarginContainer selected,
we'll add a VBoxContainer.

58
00:03:39,214 --> 00:03:43,671
This is a column,
it stands for vertical box.

59
00:03:43,957 --> 00:03:49,014
And it's going to list everything
that we add as children

60
00:03:49,015 --> 00:03:50,714
in a column layout.

61
00:03:50,857 --> 00:03:52,014
Let's do that now.

62
00:03:52,050 --> 00:03:57,880
So with the VBoxContainer selected,
press Ctrl + A and add a label.

63
00:03:58,143 --> 00:04:01,000
A label allows you to display text.

64
00:04:01,529 --> 00:04:06,520
And you can see an empty box already
appear at the top of our panel.

65
00:04:06,757 --> 00:04:11,400
In the Inspector on the right,
we can write text in the text box.

66
00:04:11,430 --> 00:04:16,320
We're going to type score and you'll see
the text appears in the top left.

67
00:04:16,729 --> 00:04:19,360
Now in the top left,
it's not ideal for a title.

68
00:04:19,390 --> 00:04:23,829
So in the Inspector,
change the Align to Center.

69
00:04:23,943 --> 00:04:27,657
If I zoom back, you can see
the text is now centered.

70
00:04:28,129 --> 00:04:32,600
And then I'll turn on uppercase
just to make the text uppercase.

71
00:04:33,029 --> 00:04:37,300
All right, we'll add a separator line
below the score

72
00:04:37,301 --> 00:04:44,743
so select the VBoxContainer, Ctrl + A,
and this time go for HSeparator.

73
00:04:45,957 --> 00:04:49,520
This is going to draw a line
below the score label.

74
00:04:49,829 --> 00:04:53,986
We'll add a third node as a child
of the VBoxContainer,

75
00:04:54,071 --> 00:04:56,189
another VBoxContainer.

76
00:04:56,190 --> 00:05:01,756
This is where we'll place a bunch
of labels via code

77
00:05:01,956 --> 00:05:04,614
and display the player names.

78
00:05:04,890 --> 00:05:08,640
We'll rename it actually,
that VBoxContainer.

79
00:05:09,171 --> 00:05:12,060
I'll call it ScoresColumn.

80
00:05:12,786 --> 00:05:15,040
All right, that's our panel design.

81
00:05:15,070 --> 00:05:18,200
You can now save the scene
by pressing Ctrl + S.

82
00:05:18,671 --> 00:05:23,200
And I invite you to go
into the scoreboard directory,

83
00:05:23,220 --> 00:05:28,971
res://Scoreboard, as you can see
in the path field at the top.

84
00:05:29,286 --> 00:05:31,414
Save the scene there.

85
00:05:32,057 --> 00:05:37,000
And with that, in the next video,
we can improve the look of our panel.

86
00:05:37,030 --> 00:05:37,960
See you there.