In this video, we'll improve the look of a scoreboard using a theme resource.
Godot comes with a system
to improve the styles of your user interface called a theme.
This is something you add to one of the UI nodes,
and all the children in there inherit the same styles.
Select the scoreboard,
and in the Inspector on the right,
click the theme category to expand it.
Then click the empty slot to add a new theme,
and finally click the theme to open the theme editor at the bottom.
There you can see the default styles
that Godot gives to your user interface.
The purpose of a theme resource is to replace those defaults.
We're going to start right away with the font.
You will see how it affects everything in a second.
In the Inspector in the top right, you can see a default font.
This will be the default textile for all user interface components.
Click the empty slot and add a new dynamic font.
This is what you want to use,
vector-font files that you see on your computer.
Files that end with the TFF or OTF extension.
We have one in the project that we're going to add.
You want to click the new dynamic font to edit it,
and then expand the font category.
There you'll find some font data
and want to assign a file to it.
We could drag and drop a file from the file system tab,
but there's a faster way to load a font
or to generally load valid files in those slots.
You right click and select quick load.
This opens this window where you can search for any font.
We want to look for a font in the common directory.
It's OpenSans-Regular.ttf.
Click open, and you'll see the text update everywhere in your interface.
Now it's pretty small, so let's make it bigger.
We'll expand the settings in the inspector,
and then you can click and drag on the size to change it,
and you'll see it update everywhere instantly.
I'm going to select a size of, let's say 26,
so it's big enough for the video.
We want to also check the use filter checkbox.
You'll see that it makes a small difference in the interface,
but basically it will make the text a bit smoother
when some scaling is happening.
We now want to add a style for the panel in the scoreboard scene.
To do this,
we want to override the default panel look—
that ugly grey in the background.
To do that, we have to use this type dropdown menu in the top right.
In theme resource,
you will selectively tell Godot
which nodes and which styles you want to replace
compared to the defaults.
Let's add our first node types.
You want to click the plus button on the right,
and then you're going to look for panel container,
because our scoreboard has a panel container node.
Click Ok.
And there, you can see a column with five slots, five tabs.
We want to use the colorful one on the right.
This allows you to change what Godot calls style boxes.
Typically this is what you use to draw
the buttons, the panels, the background of things.
You can see one in gray called panel.
We want to replace that default style,
and to do so, we'll click the plus icon—override item.
It creates a new empty slot, on which we can click
and assign a new style box flat.
You can see the look of the panel changes in the view.
Then we click on the style box to open it in the inspector,
and you can find plenty of options.
You could change the border,
you could add some round corners in there.
But for now we're only going to change the background color.
Click the color slot next to background color
to bring up the color picker.
Now we want to use one of the colors we prepared for you in the palette.
This one comes only with this project.
We created it for you.
You want to select one of the darker tones.
I'll let you choose something that you like.
And with that, the panel looks a bit nicer, I think.
The last thing we want to change is the margins.
You have the text and the line that are a bit too close to the edges.
The lines are literally touching,
so we want to add bit of margin in there.
We have a margin container for that,
but by default, it doesn't really add a margin.
We have to tell Godot to do that for us.
In the theme editor, still, we click the plus button,
and we're going to look for margin,
and add overrides for the margin container node.
Click okay.
This opens the margin container,
and there you want to click on the .C icon.
It stands for the nodes constants,
the values that Godot uses for this node, like margins in pixels.
We could click the plus button next to all four of those values
to set our margins,
but we're going to click override all instead,
which instantly unlocks all of them.
Then we want to set the margin bottom to something like 20 pixels.
20, 20, 20, 20.
As you do that, you'll see some margin appear above the text
on the left of the separator line,
which is pretty cool.
So that shows you how we can customize the style of a user interface,
and the interesting bit about that is that you can reuse your theme resource
across different scenes in your project to apply the same styles everywhere.
So select the scoreboard
and go to your theme resource in the inspector,
then right click and select save.
We want to save it in our scoreboard directory.
We're going to name the file something like
scoreboards_theme.tres— it stands for text resource.
This is a Godot specific file format that's pretty convenient.
Click save,
and with that, we're done for now.
That gives you a sense for how you create a user interface in Godot,
and how you style it.
I totally understand that this is a lot to take in,
so don't worry, if you don't remember everything,
that's completely normal.
You will get to create more interfaces in the course and in your Godot projects.
With that,
in the next guide you will add code to list names in the scoreboard.