In this video,
we'll design the scene for the dialogue box you can see here.
We want some kind of frame
with some margin and the character's portrait,
the text displayed in the other part,
and a column with a list of player choices the player can click on
to move to different parts of a dialogue.
Let's get started.
Okay, so we need to create a new scene, as usual,
and we're going to create it in the dialogue boxes directory
where we created the slideshow, as this is part of the same project.
So right click on the folder, and select new scene.
We're going to call it DialogueTree there,
and start with an other node.
We want to start with a PanelContainer
to draw a panel behind all the elements in our dialog box.
Type Enter,
and we're going to click and drag on one of the corner handles
to make the panel larger,
and select Layout -> Center,
just to center it in the game window when we run it.
We can also rename this to DialogueTree, as this will be our dialogue tree scene.
Okay, I'm going to show you how I would add the nodes
if I were designing this interface for real.
We're going to create some things and then change the nodes' order.
You typically want a bit of margin around a panel like that,
so I would add immediately a MarginContainer.
Note that to add nodes, you press Ctrl + a
or click the plus icon in the top left of the scene block.
The MarginContainer does not add any margin by default.
We need to customize it, but we'll do that later.
You want to get the layout first, and then you customize the look of things.
Then I want a row with the character's portrait here
and then the text on the right,
so I would add an HBoxContainer,
that's the node to align things horizontally.
And inside of it, a TextureRect to display the portraits.
It's a node to display an image inside a user interface.
Select the HBoxContainer again,
and this time we're going to use a RichTextLabel.
This is a node that can display text like the label,
but it's more powerful.
It allows for rich text formatting.
In other words, you can make the text bold, italics, underlined,
you can add links— things that are clickable in the text—
and more.
We're going to add this one.
And you can see that my TextureRect and the label, RichTextLabel,
gets squashed in the view.
We're going to remedy that by selecting first the TextureRect.
In the dialogue boxes directory, in the common subdirectory,
you have one called portraits.
There you will find a couple of characters.
We're going to click and drag sophia_neutral.png
onto texture slot of the TextureRect.
We can change,
probably the stretch mode to be, keep aspect centered.
It's going to center her portrait in the box we create here.
Then the RichTexTLabel stay squashed,
and even if I zoom-in and type some text in there,
you can't see anything, because unlike the label,
when you add text to a RichTextLabel, it preserves the same box.
The text automatically wraps inside that box,
and you can even have a scroll bar if the text gets a bit long.
This is typically a box,
to which you want to give a predefined size.
In this case, we want to make it fill
the available space left to the right of the TextureRect.
How do we do that?
We select the RichTextLabel,
and in the inspector, we go down to the size flags.
We want to check the expand horizontal size flags.
Now you can see the text appear, even if it's a bit small.
The expand size flag means
I'm going to push everything and take as much space as I can
inside of the container.
In this case, horizontally.
Then I told you we wanted a list of buttons at the bottom.
Inside the MarginContainer, I'm going to add a VBoxContainer,
and I'm going to add buttons as a child of it.
So I'm going to put text on one.
This button is temporary, by the way.
I'm just showing you how I would design the interface,
and then I would press Ctrl + d a couple of times to duplicate the button.
You can see a problem with our setup,
because the HBoxContainer and the VBoxContainer
are siblings in the scene tree,
the buttons overlap the panel and the text.
We don't want that,
so what we can do is select the MarginContainer again,
and add a new VBoxContainer to align these two in a column.
I select the MarginContainer,
press Ctrl + a, and add a New VBoxContainer.
Then I select my existing H and VboxContainers with Ctrl + click,
and then click and drag them into my new VboxContainer.
Now you can see that at the top,
we have the texture and the RichTextLabel aligned in a row,
and below that we have our column of buttons.
Technically, we could add the buttons as children of this VBoxContainer,
and doesn't change anything to the layout,
but it will make a difference with our code,
so we want to have that VBoxContainer dedicated to the buttons.
Actually, we can rename the node by double clicking on it to ButtonsColumn.
I invite you to do that, because we'll use that name in our code.
Then up there, I don't want this to be called VBoxContainer2.
I'm going to remove the 2 to make the names a tiny bit cleaner.
With that, we can delete the buttons, because we'll create them from code.
Select the nodes.
You can click, shift, click onto button four,
and then you can press delete on your keyboard
and enter to confirm deletion.
Finally, we can alt, click and drag
on the resize handles of the dialogue tree to lower the size of the interface.
And with that, we can style this dialogue box in the next video.
See you there.