1
00:00:00,000 --> 00:00:06,360
In this video, we'll improve the look
of a scoreboard using a theme resource.

2
00:00:06,600 --> 00:00:08,143
Godot comes with a system

3
00:00:08,144 --> 00:00:12,880
to improve the styles
of your user interface called a theme.

4
00:00:13,000 --> 00:00:16,714
This is something you add
to one of the UI nodes,

5
00:00:16,715 --> 00:00:21,100
and all the children in there
inherit the same styles.

6
00:00:21,190 --> 00:00:22,600
Select the scoreboard,

7
00:00:22,601 --> 00:00:24,786
and in the Inspector on the right,

8
00:00:24,900 --> 00:00:27,720
click the theme category to expand it.

9
00:00:27,740 --> 00:00:31,640
Then click the empty
slot to add a new theme,

10
00:00:31,670 --> 00:00:37,557
and finally click the theme
to open the theme editor at the bottom.

11
00:00:37,986 --> 00:00:41,056
There you can see the default styles

12
00:00:41,057 --> 00:00:44,320
that Godot gives to your user interface.

13
00:00:44,586 --> 00:00:49,800
The purpose of a theme resource
is to replace those defaults.

14
00:00:49,830 --> 00:00:53,360
We're going to start
right away with the font.

15
00:00:53,390 --> 00:00:57,040
You will see how it affects
everything in a second.

16
00:00:57,070 --> 00:01:00,920
In the Inspector in the top right,
you can see a default font.

17
00:01:00,950 --> 00:01:05,880
This will be the default textile
for all user interface components.

18
00:01:05,910 --> 00:01:09,480
Click the empty slot
and add a new dynamic font.

19
00:01:09,510 --> 00:01:11,357
This is what you want to use,

20
00:01:11,358 --> 00:01:14,857
vector-font files
that you see on your computer.

21
00:01:14,858 --> 00:01:19,329
Files that end
with the TFF or OTF extension.

22
00:01:19,657 --> 00:01:22,200
We have one in the project
that we're going to add.

23
00:01:22,371 --> 00:01:26,671
You want to click
the new dynamic font to edit it,

24
00:01:27,043 --> 00:01:31,600
and then expand the font category.

25
00:01:32,071 --> 00:01:33,943
There you'll find some font data

26
00:01:34,571 --> 00:01:37,040
and want to assign a file to it.

27
00:01:37,070 --> 00:01:40,760
We could drag and drop a file
from the file system tab,

28
00:01:40,790 --> 00:01:44,529
but there's a faster way to load a font

29
00:01:44,530 --> 00:01:48,560
or to generally load valid
files in those slots.

30
00:01:48,590 --> 00:01:51,480
You right click and select quick load.

31
00:01:51,510 --> 00:01:55,760
This opens this window
where you can search for any font.

32
00:01:56,186 --> 00:02:00,400
We want to look for a font
in the common directory.

33
00:02:00,430 --> 00:02:03,614
It's OpenSans-Regular.ttf.

34
00:02:03,885 --> 00:02:08,680
Click open, and you'll see the text update
everywhere in your interface.

35
00:02:08,814 --> 00:02:11,280
Now it's pretty small,
so let's make it bigger.

36
00:02:11,310 --> 00:02:14,600
We'll expand the settings
in the inspector,

37
00:02:14,643 --> 00:02:17,800
and then you can click and drag
on the size to change it,

38
00:02:17,830 --> 00:02:21,014
and you'll see it update
everywhere instantly.

39
00:02:21,571 --> 00:02:25,280
I'm going to select a size of,
let's say 26,

40
00:02:25,281 --> 00:02:27,240
so it's big enough for the video.

41
00:02:28,300 --> 00:02:31,880
We want to also check
the use filter checkbox.

42
00:02:31,910 --> 00:02:35,920
You'll see that it makes a small
difference in the interface,

43
00:02:35,921 --> 00:02:39,514
but basically it will make the text
a bit smoother

44
00:02:39,515 --> 00:02:41,986
when some scaling is happening.

45
00:02:42,286 --> 00:02:48,360
We now want to add a style
for the panel in the scoreboard scene.

46
00:02:48,643 --> 00:02:49,560
To do this,

47
00:02:49,590 --> 00:02:53,657
we want to override
the default panel look—

48
00:02:53,658 --> 00:02:56,000
that ugly grey in the background.

49
00:02:56,857 --> 00:03:03,400
To do that, we have to use
this type dropdown menu in the top right.

50
00:03:03,729 --> 00:03:04,943
In theme resource,

51
00:03:04,944 --> 00:03:07,343
you will selectively tell Godot

52
00:03:07,344 --> 00:03:11,457
which nodes and which styles
you want to replace

53
00:03:11,458 --> 00:03:13,057
compared to the defaults.

54
00:03:13,570 --> 00:03:16,243
Let's add our first node types.

55
00:03:16,244 --> 00:03:19,214
You want to click
the plus button on the right,

56
00:03:19,529 --> 00:03:22,128
and then you're going to look
for panel container,

57
00:03:22,129 --> 00:03:26,371
because our scoreboard
has a panel container node.

58
00:03:26,457 --> 00:03:27,443
Click Ok.

59
00:03:28,157 --> 00:03:33,160
And there, you can see a column
with five slots, five tabs.

60
00:03:33,190 --> 00:03:36,840
We want to use
the colorful one on the right.

61
00:03:36,870 --> 00:03:41,200
This allows you to change
what Godot calls style boxes.

62
00:03:41,201 --> 00:03:43,085
Typically this is what you use to draw

63
00:03:43,086 --> 00:03:46,760
the buttons, the panels,
the background of things.

64
00:03:47,157 --> 00:03:49,940
You can see one in gray called panel.

65
00:03:49,970 --> 00:03:52,920
We want to replace that default style,

66
00:03:52,921 --> 00:03:57,814
and to do so,
we'll click the plus icon—override item.

67
00:03:58,529 --> 00:04:02,400
It creates a new empty slot,
on which we can click

68
00:04:02,657 --> 00:04:06,371
and assign a new style box flat.

69
00:04:07,857 --> 00:04:11,360
You can see the look
of the panel changes in the view.

70
00:04:11,457 --> 00:04:16,200
Then we click on the style box
to open it in the inspector,

71
00:04:16,220 --> 00:04:18,600
and you can find plenty of options.

72
00:04:18,630 --> 00:04:20,543
You could change the border,

73
00:04:20,544 --> 00:04:23,120
you could add some round corners in there.

74
00:04:23,157 --> 00:04:26,343
But for now we're only
going to change the background color.

75
00:04:26,800 --> 00:04:30,457
Click the color slot
next to background color

76
00:04:30,458 --> 00:04:33,080
to bring up the color picker.

77
00:04:33,100 --> 00:04:36,800
Now we want to use one of the colors
we prepared for you in the palette.

78
00:04:36,830 --> 00:04:39,400
This one comes only with this project.

79
00:04:39,420 --> 00:04:41,120
We created it for you.

80
00:04:41,150 --> 00:04:43,920
You want to select one
of the darker tones.

81
00:04:43,950 --> 00:04:47,114
I'll let you choose
something that you like.

82
00:04:47,914 --> 00:04:51,929
And with that, the panel looks
a bit nicer, I think.

83
00:04:52,257 --> 00:04:55,829
The last thing we want
to change is the margins.

84
00:04:55,890 --> 00:05:01,229
You have the text and the line
that are a bit too close to the edges.

85
00:05:01,230 --> 00:05:02,857
The lines are literally touching,

86
00:05:02,858 --> 00:05:06,000
so we want to add
bit of margin in there.

87
00:05:06,030 --> 00:05:08,120
We have a margin container for that,

88
00:05:08,150 --> 00:05:11,960
but by default,
it doesn't really add a margin.

89
00:05:11,980 --> 00:05:15,120
We have to tell Godot to do that for us.

90
00:05:15,357 --> 00:05:19,120
In the theme editor, still,
we click the plus button,

91
00:05:19,150 --> 00:05:21,686
and we're going to look for margin,

92
00:05:21,687 --> 00:05:25,129
and add overrides
for the margin container node.

93
00:05:25,157 --> 00:05:26,157
Click okay.

94
00:05:26,371 --> 00:05:28,320
This opens the margin container,

95
00:05:28,350 --> 00:05:32,220
and there you want to click
on the .C icon.

96
00:05:32,250 --> 00:05:34,680
It stands for the nodes constants,

97
00:05:34,710 --> 00:05:40,943
the values that Godot uses
for this node, like margins in pixels.

98
00:05:41,529 --> 00:05:45,742
We could click the plus button
next to all four of those values

99
00:05:45,743 --> 00:05:47,128
to set our margins,

100
00:05:47,129 --> 00:05:50,100
but we're going to click
override all instead,

101
00:05:50,101 --> 00:05:52,960
which instantly unlocks all of them.

102
00:05:53,100 --> 00:05:58,086
Then we want to set the margin bottom
to something like 20 pixels.

103
00:05:58,087 --> 00:06:00,200
20, 20, 20, 20.

104
00:06:00,457 --> 00:06:05,100
As you do that, you'll see some margin
appear above the text

105
00:06:05,171 --> 00:06:08,286
on the left of the separator line,

106
00:06:08,329 --> 00:06:09,671
which is pretty cool.

107
00:06:10,229 --> 00:06:15,760
So that shows you how we can customize
the style of a user interface,

108
00:06:15,790 --> 00:06:20,800
and the interesting bit about that
is that you can reuse your theme resource

109
00:06:20,830 --> 00:06:26,986
across different scenes in your project
to apply the same styles everywhere.

110
00:06:27,300 --> 00:06:28,800
So select the scoreboard

111
00:06:28,801 --> 00:06:31,600
and go to your theme resource
in the inspector,

112
00:06:31,800 --> 00:06:35,071
then right click and select save.

113
00:06:35,629 --> 00:06:38,840
We want to save it
in our scoreboard directory.

114
00:06:38,860 --> 00:06:41,729
We're going to name the file
something like

115
00:06:42,029 --> 00:06:48,500
scoreboards_theme.tres—
it stands for text resource.

116
00:06:48,501 --> 00:06:52,160
This is a Godot specific file format
that's pretty convenient.

117
00:06:52,190 --> 00:06:53,614
Click save,

118
00:06:53,714 --> 00:06:56,186
and with that, we're done for now.

119
00:06:56,187 --> 00:07:00,086
That gives you a sense for how
you create a user interface in Godot,

120
00:07:00,087 --> 00:07:01,760
and how you style it.

121
00:07:01,790 --> 00:07:05,160
I totally understand
that this is a lot to take in,

122
00:07:05,190 --> 00:07:07,786
so don't worry,
if you don't remember everything,

123
00:07:07,787 --> 00:07:09,560
that's completely normal.

124
00:07:09,590 --> 00:07:14,357
You will get to create more interfaces
in the course and in your Godot projects.

125
00:07:14,514 --> 00:07:15,329
With that,

126
00:07:15,330 --> 00:07:20,057
in the next guide you will add code
to list names in the scoreboard.