We now want to style our interface,
and we'll start by creating a theme once more,
treating this as a completely separate project from the scoreboard.
Select the DialogueTree node
and in the Inspector, expand the Theme category and click on the Theme results,
create a new Theme.
This is going to create styles that will cascade and apply to all the trial nodes.
So click to open the Theme.
And you can see in the Default Preview, the text is too small.
We can see that on screen.
So typically the first thing you do with a UI Theme
is change the Default Font that appears in the Inspector.
So we're going to click, select New DynamicFont,
click to expand the newly created DynamicFont and expand the font category,
because we need some font data to render the text.
Right click on it, quick load,
and this will automatically find all the fonts in the project.
And we're looking for OpenSans-Regular here.
Alright. The text appears again.
And then we can make it a bit larger by expending the settings
and setting the size to something like 26.
Okay, nothing new so far.
Then we want to change the look of the panel in the background.
There again, we did that with the scoreboard before.
So one thing you can do is in the Theme Editor at the bottom on the right side,
you want to click that plus icon to add styles for our PanelContainer.
So we type the name of the node and double click the PanelContainer.
Then in the tabs, we go to the rightmost tab and click the plus, override item icon.
And there we can click, create a new style box flat,
click the style box to edit it in the Inspector.
And we want to change the background color to a darker tone.
Some of the the ones from the palette are fine,
but you can also play with the color using the color picker.
You just have to click and drag on the slider in the top right
or inside that square to change the colors.
But I'm going to stick with our predefined ones here.
Then one thing that we have is our MarginContainer is not applying a margin,
as you can see.
So we can change that in the Theme.
But in this case, we have a Dialogue box and perhaps we don't want the same margins
when we add MarginContainers to the rest of our user interface.
Maybe this dialog box is a bit unique.
It turns out we can select the node,
and instead of using the Theme, we can use the Theme Override.
These options allow you to change the settings, the style,
of one UI node in particular.
So select the MarginContainer and then expand the Theme Overrides,
expand the Constants subcategory.
And we're going to type our numbers in there.
It has four margins: right, top, left and bottom,
and in all four of them, we want about, say, 20 pixels.
So you can click once. You type 20, tab, 20, tab, 20, tab, 20, tab,
and you can see some margin appeared around the interface.
There's another setting that we can use between the portrait and the text.
Currently there's no separation.
It's not necessarily easy to see right now, but
if you have more text, it will become clearer.
We can change the separation between elements in VBox and HBoxContainers.
We can select the HBoxContainer,
and there, again, use a Theme Override, expand the Constants category.
And just so you see, we can enter something like 80 pixels.
You can see the text move to the right.
We can use a separation of 20 pixels to match our margin.
Same thing with the VBoxContainer, the parent one,
we're going to go to the Theme Overrides Constants
and change the separation to 20 pixels,
which adds a bit of space between the character portrait
and the buttons that we'll add via code.
We have one last element to style. It's the buttons.
We don't have any here, so
we're going to use the Theme preview to see the look of our buttons.
Select the DialogueTree node and click on the Theme to reopen the Editor.
You can see we have a button in the Default Preview on the left.
Want to go back to our plus button to add a new node type to the theme.
Click that and we're going to type "button" and double click the Button node.
Here's a typical setup.
We're going to click the plus
and next to the pressed, normal, hover, and focus styles.
The styles work like the following.
When I hover over a button, the hover style shows.
When I press it, and I keep the mouse down, the pressed style shows.
And the slight blue outline that you see around buttons in Godot
is the focus style, and it stacks on top of the others.
And we don't want that one in our game.
So we're going to right click on the focus style and add a new StyleBox, empty.
It just means don't draw anything in this state.
Then we're going to change the normal style to start with.
It's the button displayed when you don't hover or click on it.
So you click on the normal style and create a new StyleBoxFlat.
We're going to click the StyleBox to edit it,
and we just want to change the background color.
So let's say we're going to start
with a color that's a bit lighter than the panel.
So I'm going to click that one,
and then I'm going to add a new StyleBox to the hover state.
Same thing. You click, create a new StyleBoxFlat,
and click the StyleBox,
and then change the background color in the Inspector.
We picked this one for the base button color.
So we're going to pick a lighter tone for when we hover the button.
And you can see when I go hover the button in the Theme Preview on the left,
it lights up.
Finally, we want to change the pressed state.
So we're going to add a new StyleBoxFlat to the pressed state, click to edit it,
and then I want to make it as dark as possible.
So I'm going to select my darkest purple-gray here.
And so when I go to my Preview on the left,
when I hover the button lights up, and when I click the button gets darker.
I want us to do one last thing, now we have the styles in place.
In the DialogueBoxes folder,
you have a DialogueTree script we prepared for you there again to save some typing.
So I'm going to double click it to open it in the Script Editor.
And you can see it contains only one variable.
It's a dictionary, with each key being a number.
And then you have a bunch of data in there.
And this represents what we call nodes and a dialogue tree.
This is each text line with the portrait we want to display.
And then the choices we'll want to give to the player,
and the key to which it will take the player.
So we want to click and drag this DialogueTree script
from the file system dock onto the DialogueTree node.
I'll let you do that. You should see the script icon.
And with that, you're ready to start adding code in the next part