1
00:00:00,000 --> 00:00:01,014
In this video,

2
00:00:01,015 --> 00:00:05,514
we'll design the scene
for the dialogue box you can see here.

3
00:00:05,571 --> 00:00:07,929
We want some kind of frame

4
00:00:08,043 --> 00:00:11,642
with some margin
and the character's portrait,

5
00:00:11,643 --> 00:00:14,429
the text displayed in the other part,

6
00:00:14,430 --> 00:00:19,671
and a column with a list
of player choices the player can click on

7
00:00:19,714 --> 00:00:23,171
to move to different parts of a dialogue.

8
00:00:23,457 --> 00:00:24,760
Let's get started.

9
00:00:24,886 --> 00:00:28,285
Okay, so we need to create
a new scene, as usual,

10
00:00:28,286 --> 00:00:31,729
and we're going to create it
in the dialogue boxes directory

11
00:00:31,743 --> 00:00:35,200
where we created the slideshow,
as this is part of the same project.

12
00:00:35,230 --> 00:00:39,360
So right click on the folder,
and select new scene.

13
00:00:39,390 --> 00:00:44,486
We're going to call it
DialogueTree there,

14
00:00:44,629 --> 00:00:47,143
and start with an other node.

15
00:00:47,471 --> 00:00:50,480
We want to start with a PanelContainer

16
00:00:50,510 --> 00:00:56,240
to draw a panel behind all the elements
in our dialog box.

17
00:00:57,257 --> 00:00:58,314
Type Enter,

18
00:00:58,729 --> 00:01:03,213
and we're going to click and drag
on one of the corner handles

19
00:01:03,214 --> 00:01:04,960
to make the panel larger,

20
00:01:05,486 --> 00:01:08,171
and select Layout -> Center,

21
00:01:08,343 --> 00:01:11,986
just to center it in the game window
when we run it.

22
00:01:11,987 --> 00:01:18,214
We can also rename this to DialogueTree,
as this will be our dialogue tree scene.

23
00:01:18,671 --> 00:01:22,971
Okay, I'm going to show you
how I would add the nodes

24
00:01:22,972 --> 00:01:25,760
if I were designing
this interface for real.

25
00:01:25,790 --> 00:01:29,960
We're going to create some things
and then change the nodes' order.

26
00:01:30,886 --> 00:01:34,200
You typically want a bit of margin
around a panel like that,

27
00:01:34,230 --> 00:01:37,880
so I would add immediately
a MarginContainer.

28
00:01:37,910 --> 00:01:41,257
Note that to add nodes,
you press Ctrl + a

29
00:01:41,357 --> 00:01:45,414
or click the plus
icon in the top left of the scene block.

30
00:01:45,450 --> 00:01:49,240
The MarginContainer
does not add any margin by default.

31
00:01:49,270 --> 00:01:52,560
We need to customize it,
but we'll do that later.

32
00:01:52,900 --> 00:01:59,280
You want to get the layout first,
and then you customize the look of things.

33
00:02:00,129 --> 00:02:04,571
Then I want a row
with the character's portrait here

34
00:02:04,572 --> 00:02:06,400
and then the text on the right,

35
00:02:06,401 --> 00:02:09,149
so I would add an HBoxContainer,

36
00:02:09,150 --> 00:02:12,229
that's the node
to align things horizontally.

37
00:02:12,700 --> 00:02:17,213
And inside of it, a TextureRect
to display the portraits.

38
00:02:17,214 --> 00:02:21,114
It's a node to display an image
inside a user interface.

39
00:02:21,343 --> 00:02:23,680
Select the HBoxContainer again,

40
00:02:23,710 --> 00:02:26,840
and this time we're going to use
a RichTextLabel.

41
00:02:26,870 --> 00:02:30,343
This is a node that can display text
like the label,

42
00:02:30,500 --> 00:02:32,629
but it's more powerful.

43
00:02:32,630 --> 00:02:35,160
It allows for rich text formatting.

44
00:02:35,190 --> 00:02:39,760
In other words, you can make the text
bold, italics, underlined,

45
00:02:39,790 --> 00:02:43,143
you can add links—
things that are clickable in the text—

46
00:02:43,144 --> 00:02:44,029
and more.

47
00:02:44,600 --> 00:02:46,040
We're going to add this one.

48
00:02:46,070 --> 00:02:50,800
And you can see that my TextureRect
and the label, RichTextLabel,

49
00:02:50,801 --> 00:02:52,729
gets squashed in the view.

50
00:02:52,830 --> 00:02:57,286
We're going to remedy that
by selecting first the TextureRect.

51
00:02:58,457 --> 00:03:02,980
In the dialogue boxes directory,
in the common subdirectory,

52
00:03:03,010 --> 00:03:04,920
you have one called portraits.

53
00:03:05,100 --> 00:03:07,800
There you will find
a couple of characters.

54
00:03:07,830 --> 00:03:12,043
We're going to click and drag
sophia_neutral.png

55
00:03:12,044 --> 00:03:15,320
onto texture slot
of the TextureRect.

56
00:03:15,543 --> 00:03:16,874
We can change,

57
00:03:16,875 --> 00:03:20,960
probably the stretch mode
to be, keep aspect centered.

58
00:03:20,990 --> 00:03:25,800
It's going to center her portrait
in the box we create here.

59
00:03:26,000 --> 00:03:28,440
Then the RichTexTLabel stay squashed,

60
00:03:28,470 --> 00:03:31,929
and even if I zoom-in
and type some text in there,

61
00:03:32,343 --> 00:03:35,320
you can't see anything,
because unlike the label,

62
00:03:35,350 --> 00:03:39,800
when you add text to a RichTextLabel,
it preserves the same box.

63
00:03:39,830 --> 00:03:42,600
The text automatically
wraps inside that box,

64
00:03:42,630 --> 00:03:47,280
and you can even have a scroll bar
if the text gets a bit long.

65
00:03:48,229 --> 00:03:49,929
This is typically a box,

66
00:03:49,930 --> 00:03:52,560
to which you want to give
a predefined size.

67
00:03:52,590 --> 00:03:55,160
In this case, we want to make it fill

68
00:03:55,190 --> 00:03:59,560
the available space left
to the right of the TextureRect.

69
00:03:59,590 --> 00:04:01,040
How do we do that?

70
00:04:01,070 --> 00:04:02,960
We select the RichTextLabel,

71
00:04:02,990 --> 00:04:06,340
and in the inspector,
we go down to the size flags.

72
00:04:06,370 --> 00:04:10,680
We want to check the expand
horizontal size flags.

73
00:04:10,710 --> 00:04:13,840
Now you can see the text appear,
even if it's a bit small.

74
00:04:13,870 --> 00:04:16,786
The expand size flag means

75
00:04:16,843 --> 00:04:20,657
I'm going to push everything
and take as much space as I can

76
00:04:20,771 --> 00:04:22,737
inside of the container.

77
00:04:22,771 --> 00:04:24,600
In this case, horizontally.

78
00:04:25,229 --> 00:04:30,400
Then I told you we wanted a list
of buttons at the bottom.

79
00:04:31,157 --> 00:04:35,640
Inside the MarginContainer,
I'm going to add a VBoxContainer,

80
00:04:36,043 --> 00:04:39,640
and I'm going to add buttons
as a child of it.

81
00:04:39,660 --> 00:04:42,186
So I'm going to put text on one.

82
00:04:42,570 --> 00:04:45,120
This button is temporary, by the way.

83
00:04:45,150 --> 00:04:48,120
I'm just showing you
how I would design the interface,

84
00:04:48,150 --> 00:04:52,960
and then I would press Ctrl + d
a couple of times to duplicate the button.

85
00:04:53,257 --> 00:04:56,114
You can see a problem with our setup,

86
00:04:57,343 --> 00:05:01,194
because the HBoxContainer
and the VBoxContainer

87
00:05:01,195 --> 00:05:03,814
are siblings in the scene tree,

88
00:05:04,014 --> 00:05:08,339
the buttons overlap
the panel and the text.

89
00:05:08,340 --> 00:05:09,440
We don't want that,

90
00:05:09,470 --> 00:05:12,760
so what we can do is select
the MarginContainer again,

91
00:05:12,780 --> 00:05:19,529
and add a new VBoxContainer
to align these two in a column.

92
00:05:20,243 --> 00:05:22,257
I select the MarginContainer,

93
00:05:22,258 --> 00:05:25,800
press Ctrl + a,
and add a New VBoxContainer.

94
00:05:26,143 --> 00:05:32,200
Then I select my existing
H and VboxContainers with Ctrl + click,

95
00:05:33,171 --> 00:05:37,960
and then click and drag them
into my new VboxContainer.

96
00:05:37,980 --> 00:05:40,729
Now you can see that at the top,

97
00:05:40,764 --> 00:05:45,120
we have the texture
and the RichTextLabel aligned in a row,

98
00:05:45,150 --> 00:05:49,686
and below that
we have our column of buttons.

99
00:05:50,686 --> 00:05:56,680
Technically, we could add the buttons
as children of this VBoxContainer,

100
00:05:56,710 --> 00:05:59,320
and doesn't change anything to the layout,

101
00:05:59,350 --> 00:06:01,920
but it will make a difference
with our code,

102
00:06:01,921 --> 00:06:07,743
so we want to have that VBoxContainer
dedicated to the buttons.

103
00:06:07,950 --> 00:06:14,057
Actually, we can rename the node
by double clicking on it to ButtonsColumn.

104
00:06:14,714 --> 00:06:18,360
I invite you to do that,
because we'll use that name in our code.

105
00:06:18,390 --> 00:06:22,440
Then up there, I don't want
this to be called VBoxContainer2.

106
00:06:22,470 --> 00:06:27,529
I'm going to remove the 2
to make the names a tiny bit cleaner.

107
00:06:27,743 --> 00:06:32,629
With that, we can delete the buttons,
because we'll create them from code.

108
00:06:33,690 --> 00:06:35,520
Select the nodes.

109
00:06:35,540 --> 00:06:41,040
You can click, shift,
click onto button four,

110
00:06:41,070 --> 00:06:44,300
and then you can press delete
on your keyboard

111
00:06:44,614 --> 00:06:48,186
and enter to confirm deletion.

112
00:06:49,014 --> 00:06:52,480
Finally, we can alt, click and drag

113
00:06:52,510 --> 00:06:58,280
on the resize handles of the dialogue tree
to lower the size of the interface.

114
00:06:58,300 --> 00:07:03,080
And with that, we can style
this dialogue box in the next video.

115
00:07:03,100 --> 00:07:04,080
See you there.