This tutorial is available as an HD video here.
In this tutorial we are going to look at the UI aspects of the Godot game engine. If you have prior experience with other game engines, you will probably be shocked by the number of UI widgets and containers that ship with Godot. While many of these controls would never be used in a game, they are absolutely invaluable for creating tools. Of course they are also great for making games, making implementing your UI a breeze.
Using Controls in Godot is just like using any other Node, although the relationship between them is where things vary the most. Let’s take a quick look at what’s included:
All controls inherit from Control, which in turn inherits from CanvasItem, which allows it to be drawn on screen. At the end of the day there are three categories of Controls: UI Wdigets, Containers and Popup Windows. The containers are controls that contain other controls. Quite often they will automatically arrange their contents for you. Popup Windows are exactly that, dialog boxes you can display for things like messages, file selection, etc. Then there is everything else… these are the various widgets you can use in your application, things like Buttons, Labels and even video players.
Your First GUI Application
Let’s jump right in, show how controls work and the relationship between containers and controls. We are going to create a simple menu where our controls are automatically laid out vertically.
Start out by creating a VBoxContainer, which is a box of controls that automatically arranges it’s children vertically.
Create a VBoxContainer Node:
Size it somewhat centered on your screen, like so:
Now in the Scene tab, make sure VBoxController is selected and create a new node:
Repeat a couple times so you have multiple buttons. Your scene hierarchy should look like this:
Next select MenuButton and in the Inspector set the Text:
You can set a number of properties that control the button’s appearance. Keep in mind, like all other nodes in Godot, the Control inherits positional information from it’s parent container.
As you add text to your controls, you can see that the container automatically aligns them vertically within:
Now, what if you want to expand the labels to use the entire space available within the parent control? That can easily be accomplished too. For each button, go into the Inspector and drop down the Vertical setting and make sure Expand is selected:
Now you should see the menu laid out like this:
You may find the Font to be laughably small… so lets quickly create a new font. We covered this in the past but a quick recap. Select Import->Font:
Select a ttf file and save it as a fnt file, like so:
Now you can the font of each menu item using the Load option of Custom Font in the Inspector with a Button selected, like so:
After setting the font, sizes should change automatically, like so:
You need to perform this task for each Button… or…
Using a Theme
Godot has limited theming support, but in reality that mostly just means you can set a common font. Select the VBoxContainer, locate Theme and create a new one:
Now drop it down again and select Edit:
This will now bring you to the theme editor window, which contains a preview of how your theme looks with various controls:
In the Inspector, select Theme->Default Font and load our font:
When happy with your theme, select Save Resource button:
Save it as a .thm file:
Now all of the controls in your container should be updated ( You may have to load the theme again using Theme->Load ):
Connecting Code to your Control
Now that we have our controls wired up, lets go ahead and wire them up to do something.
First lets attach a script to our container. In the Scene tab, select the VBoxController and click the new script button:
Create it using whatever settings you wish, like so:
Now select your first MenuButton and click the Connections button:
Select Pressed, then press the Connect button:
Make sure the container is selected, then press Connect:
This will create a method named _on_MenuButton_pressed in the VBoxContainer script.
Now edit your code like so:
Now run your game and you should see:
And if you click the first button you should see:
There are several more controls available, but the basic process of using them is nearly identical so I wont go into it. For more details on laying out controls or more examples ( such as using pop-ups and Bitmap buttons ), be sure to watch the video tutorial as well!
The Video Version