1
00:00:00,000 --> 00:00:02,813
We now want to style our interface,

2
00:00:02,814 --> 00:00:06,071
and we'll start by creating
a theme once more,

3
00:00:06,171 --> 00:00:11,114
treating this as a completely
separate project from the scoreboard.

4
00:00:11,571 --> 00:00:13,600
Select the DialogueTree node

5
00:00:13,829 --> 00:00:19,200
and in the Inspector, expand the Theme
category and click on the Theme results,

6
00:00:19,220 --> 00:00:21,240
create a new Theme.

7
00:00:21,443 --> 00:00:28,257
This is going to create styles that will
cascade and apply to all the trial nodes.

8
00:00:28,629 --> 00:00:31,157
So click to open the Theme.

9
00:00:31,443 --> 00:00:35,280
And you can see in the Default Preview,
the text is too small.

10
00:00:35,281 --> 00:00:36,920
We can see that on screen.

11
00:00:37,186 --> 00:00:39,957
So typically the first thing you do
with a UI Theme

12
00:00:39,958 --> 00:00:43,757
is change the Default Font
that appears in the Inspector.

13
00:00:44,114 --> 00:00:47,257
So we're going to click,
select New DynamicFont,

14
00:00:48,314 --> 00:00:53,985
click to expand the newly created
DynamicFont and expand the font category,

15
00:00:53,986 --> 00:00:57,543
because we need some font data
to render the text.

16
00:00:57,857 --> 00:01:00,057
Right click on it, quick load,

17
00:01:00,071 --> 00:01:03,286
and this will automatically find
all the fonts in the project.

18
00:01:03,414 --> 00:01:08,457
And we're looking for
OpenSans-Regular here.

19
00:01:09,271 --> 00:01:11,314
Alright. The text appears again.

20
00:01:11,443 --> 00:01:14,614
And then we can make it a bit larger
by expending the settings

21
00:01:14,643 --> 00:01:18,314
and setting the size
to something like 26.

22
00:01:18,350 --> 00:01:20,514
Okay, nothing new so far.

23
00:01:21,114 --> 00:01:26,013
Then we want to change
the look of the panel in the background.

24
00:01:26,014 --> 00:01:29,271
There again, we did that
with the scoreboard before.

25
00:01:29,286 --> 00:01:34,800
So one thing you can do is in the Theme
Editor at the bottom on the right side,

26
00:01:34,830 --> 00:01:42,242
you want to click that plus icon to add
styles for our PanelContainer.

27
00:01:42,243 --> 00:01:46,271
So we type the name of the node
and double click the PanelContainer.

28
00:01:46,871 --> 00:01:54,914
Then in the tabs, we go to the rightmost
tab and click the plus, override item icon.

29
00:01:55,429 --> 00:02:00,200
And there we can click,
create a new style box flat,

30
00:02:00,729 --> 00:02:03,557
click the style box
to edit it in the Inspector.

31
00:02:03,929 --> 00:02:08,520
And we want to change the background color
to a darker tone.

32
00:02:08,550 --> 00:02:11,756
Some of the the ones
from the palette are fine,

33
00:02:11,757 --> 00:02:15,040
but you can also play with the color
using the color picker.

34
00:02:15,070 --> 00:02:20,785
You just have to click and drag
on the slider in the top right

35
00:02:20,786 --> 00:02:23,200
or inside that square
to change the colors.

36
00:02:23,230 --> 00:02:26,614
But I'm going to stick with our
predefined ones here.

37
00:02:27,114 --> 00:02:33,570
Then one thing that we have is our
MarginContainer is not applying a margin,

38
00:02:33,571 --> 00:02:34,640
as you can see.

39
00:02:34,957 --> 00:02:38,000
So we can change that in the Theme.

40
00:02:38,186 --> 00:02:43,240
But in this case, we have a Dialogue box
and perhaps we don't want the same margins

41
00:02:43,400 --> 00:02:47,600
when we add MarginContainers
to the rest of our user interface.

42
00:02:47,630 --> 00:02:49,829
Maybe this dialog box is a bit unique.

43
00:02:50,457 --> 00:02:52,900
It turns out we can select the node,

44
00:02:53,329 --> 00:02:57,386
and instead of using the Theme,
we can use the Theme Override.

45
00:02:57,690 --> 00:03:02,314
These options allow you to
change the settings, the style,

46
00:03:02,315 --> 00:03:05,320
of one UI node in particular.

47
00:03:05,600 --> 00:03:09,943
So select the MarginContainer and then
expand the Theme Overrides,

48
00:03:09,971 --> 00:03:13,180
expand the Constants subcategory.

49
00:03:13,210 --> 00:03:15,943
And we're going to type
our numbers in there.

50
00:03:16,086 --> 00:03:19,299
It has four margins:
right, top, left and bottom,

51
00:03:19,300 --> 00:03:23,686
and in all four of them,
we want about, say, 20 pixels.

52
00:03:24,000 --> 00:03:30,880
So you can click once. You type 20, tab,
20, tab, 20, tab, 20, tab,

53
00:03:30,910 --> 00:03:34,514
and you can see some margin
appeared around the interface.

54
00:03:34,814 --> 00:03:39,371
There's another setting that we can use
between the portrait and the text.

55
00:03:39,529 --> 00:03:41,269
Currently there's no separation.

56
00:03:41,270 --> 00:03:44,300
It's not necessarily
easy to see right now, but

57
00:03:44,357 --> 00:03:46,886
if you have more text,
it will become clearer.

58
00:03:47,110 --> 00:03:54,157
We can change the separation between
elements in VBox and HBoxContainers.

59
00:03:54,600 --> 00:03:56,642
We can select the HBoxContainer,

60
00:03:56,643 --> 00:04:01,614
and there, again, use a Theme Override,
expand the Constants category.

61
00:04:02,071 --> 00:04:06,243
And just so you see, we can enter
something like 80 pixels.

62
00:04:06,244 --> 00:04:08,571
You can see the text move to the right.

63
00:04:08,700 --> 00:04:12,843
We can use a separation of 20 pixels
to match our margin.

64
00:04:13,343 --> 00:04:17,743
Same thing with the VBoxContainer,
the parent one,

65
00:04:17,886 --> 00:04:20,442
we're going to go to the Theme Overrides
Constants

66
00:04:20,642 --> 00:04:23,176
and change the separation to 20 pixels,

67
00:04:23,376 --> 00:04:26,414
which adds a bit of space
between the character portrait

68
00:04:26,557 --> 00:04:29,440
and the buttons that we'll add via code.

69
00:04:29,643 --> 00:04:33,480
We have one last element to style.
It's the buttons.

70
00:04:33,600 --> 00:04:35,329
We don't have any here, so

71
00:04:35,486 --> 00:04:40,343
we're going to use the Theme preview
to see the look of our buttons.

72
00:04:40,857 --> 00:04:46,886
Select the DialogueTree node and click
on the Theme to reopen the Editor.

73
00:04:47,943 --> 00:04:52,200
You can see we have a button
in the Default Preview on the left.

74
00:04:52,500 --> 00:04:58,000
Want to go back to our plus button
to add a new node type to the theme.

75
00:04:58,030 --> 00:05:03,040
Click that and we're going to type
"button" and double click the Button node.

76
00:05:03,214 --> 00:05:04,880
Here's a typical setup.

77
00:05:04,910 --> 00:05:07,113
We're going to click the plus

78
00:05:07,114 --> 00:05:13,120
and next to the pressed, normal,
hover, and focus styles.

79
00:05:13,150 --> 00:05:15,760
The styles work like the following.

80
00:05:16,043 --> 00:05:20,859
When I hover over a button,
the hover style shows.

81
00:05:20,971 --> 00:05:25,760
When I press it, and I keep
the mouse down, the pressed style shows.

82
00:05:26,043 --> 00:05:30,514
And the slight blue outline that you see
around buttons in Godot

83
00:05:30,800 --> 00:05:34,813
is the focus style,
and it stacks on top of the others.

84
00:05:34,814 --> 00:05:36,840
And we don't want that one in our game.

85
00:05:36,860 --> 00:05:42,280
So we're going to right click on the focus
style and add a new StyleBox, empty.

86
00:05:42,300 --> 00:05:45,643
It just means don't draw
anything in this state.

87
00:05:46,129 --> 00:05:49,157
Then we're going to change
the normal style to start with.

88
00:05:49,158 --> 00:05:53,857
It's the button displayed
when you don't hover or click on it.

89
00:05:54,243 --> 00:05:58,500
So you click on the normal style
and create a new StyleBoxFlat.

90
00:05:59,200 --> 00:06:01,469
We're going to click
the StyleBox to edit it,

91
00:06:01,514 --> 00:06:03,943
and we just want to change
the background color.

92
00:06:04,171 --> 00:06:05,920
So let's say we're going to start

93
00:06:05,921 --> 00:06:10,243
with a color that's a bit
lighter than the panel.

94
00:06:10,286 --> 00:06:11,886
So I'm going to click that one,

95
00:06:12,843 --> 00:06:16,400
and then I'm going to add a new
StyleBox to the hover state.

96
00:06:16,420 --> 00:06:20,400
Same thing. You click,
create a new StyleBoxFlat,

97
00:06:20,571 --> 00:06:22,039
and click the StyleBox,

98
00:06:22,371 --> 00:06:25,486
and then change the background color
in the Inspector.

99
00:06:25,500 --> 00:06:29,529
We picked this one
for the base button color.

100
00:06:29,700 --> 00:06:34,357
So we're going to pick a lighter tone
for when we hover the button.

101
00:06:34,414 --> 00:06:38,957
And you can see when I go hover the button
in the Theme Preview on the left,

102
00:06:39,043 --> 00:06:40,129
it lights up.

103
00:06:41,114 --> 00:06:43,680
Finally, we want to change
the pressed state.

104
00:06:43,710 --> 00:06:49,480
So we're going to add a new StyleBoxFlat
to the pressed state, click to edit it,

105
00:06:49,510 --> 00:06:52,456
and then I want to make it
as dark as possible.

106
00:06:52,457 --> 00:06:56,357
So I'm going to select
my darkest purple-gray here.

107
00:06:57,000 --> 00:07:00,014
And so when I go
to my Preview on the left,

108
00:07:00,100 --> 00:07:05,214
when I hover the button lights up,
and when I click the button gets darker.

109
00:07:06,025 --> 00:07:10,071
I want us to do one last thing,
now we have the styles in place.

110
00:07:10,314 --> 00:07:12,040
In the DialogueBoxes folder,

111
00:07:12,070 --> 00:07:18,000
you have a DialogueTree script we prepared
for you there again to save some typing.

112
00:07:18,171 --> 00:07:21,571
So I'm going to double click it
to open it in the Script Editor.

113
00:07:21,671 --> 00:07:24,943
And you can see it contains
only one variable.

114
00:07:25,800 --> 00:07:30,357
It's a dictionary,
with each key being a number.

115
00:07:31,043 --> 00:07:33,957
And then you have a bunch
of data in there.

116
00:07:34,100 --> 00:07:39,457
And this represents what we call nodes
and a dialogue tree.

117
00:07:39,486 --> 00:07:44,320
This is each text line
with the portrait we want to display.

118
00:07:44,514 --> 00:07:48,200
And then the choices we'll want to give
to the player,

119
00:07:48,543 --> 00:07:52,829
and the key
to which it will take the player.

120
00:07:53,943 --> 00:07:57,743
So we want to click and drag
this DialogueTree script

121
00:07:57,886 --> 00:08:02,100
from the file system dock
onto the DialogueTree node.

122
00:08:02,230 --> 00:08:04,880
I'll let you do that.
You should see the script icon.

123
00:08:05,100 --> 00:08:10,400
And with that, you're ready
to start adding code in the next part