Godot Engine Tutorial Part 5–GUI Programming. Using Controls, Widgets and Containers

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:

image

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:

image

Size it somewhat centered on your screen, like so:

image

Now in the Scene tab, make sure VBoxController is selected and create a new node:

image

Select MenuButton:

image

Repeat a couple times so you have multiple buttons.  Your scene hierarchy should look like this:

image

Next select MenuButton and in the Inspector set the Text:

image

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:

image

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:

image

Now you should see the menu laid out like this:

image

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:

image

Select a ttf file and save it as a fnt file, like so:

image

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:

image

After setting the font, sizes should change automatically, like so:

image

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:

image

Now drop it down again and select Edit:

image

This will now bring you to the theme editor window, which contains a preview of how your theme looks with various controls:

image

In the Inspector, select Theme->Default Font and load our font:

image

When happy with your theme, select Save Resource button:

image

Save it as a .thm file:

image

Now all of the controls in your container should be updated ( You may have to load the theme again using Theme->Load ):

image

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:

image

Create it using whatever settings you wish, like so:

image

Now select your first MenuButton and click the Connections button:

image

Select Pressed, then press the Connect button:

image

Make sure the container is selected, then press Connect:

image

This will create a method named _on_MenuButton_pressed in the VBoxContainer script.

Now edit your code like so:

image

Now run your game and you should see:

image

And if you click the first button you should see:

image

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


Scroll to Top