Design a title screen in Godot

In the next two tutorials, we will build two UI (user interface) scenes step-by-step using the engine's UI system:

The Main Menu
Game UI with a energy bar, health bar, bomb, and money counters

We will learn how to design the game UI efficiently and how to use Godot's control nodes. This pages focus on the visual part: everything we do to the editor. To learn how to code the life bar, control the game's UI with code.

The GUI's we are going to create

How to design our game UI?

To develop the UI, We want to come up with a rough mockup first: a plain drawing version that focuses on placement our UI components, their size, and user interaction. Pen and paper are all we need. We should not use fancy and final graphics at this stage. Then, we only need simple placeholder sprites, and we are good to jump into Godot. We want to make sure the players can find their way around the interface using those placeholders.

The UI's rough plan or mockup

Placeholder doesn't have to mean ugly, but we should keep the graphics clean and straightforward. Avoid the special effects, animation, and detailed illustration before we have players playtest our UI. Otherwise:

The graphics may skew the players' perception of the experience, and we will miss out on valuable feedback
If the user Experience does not work, we will have to redo some sprites

Note
Always try to make the interface working with simple text and boxes first. It is easy to change the texture later. Professional UX designers often work in grayscale with plain outlines and tables. When we take colors and fancy visuals away, it's a lot easier to size and place UI elements properly. It helps us refine the design foundation we will build upon.

There are two ways to design our UI in Godot. We can:

Create all of this in a single view, and eventually save some branches as reusable views.
Create template views for reusable components and create specific parts that are inherited from our base views

We use the first approach, because the first version of our UI may not work as we want. As we go, we are likely to throw away the components and redesign the components. We are expected to throw parts away and redesign components as we go. When we are sure everything works, it is easy to make some parts reusable, as we will see below.

The files we will find in Godot. The graphics look cleaner than the rough design, but they are still placeholders

Designing the main Menu

Before we jump into the editor, we have to plan how we will nest containers based on our mockup image.

Break down the UI mockup

Here are my three rules of thumb for finding the right container:

Break the UI in the nested box, from the right contains everything, to the smallest ones, that encompasses one widget, like a bar with its label, a panel or a button
If there is some padding around an area, use MarginContainer
If the elements are arranged in a row or column, use HBoxContainer and VBoxContainer.

These rules are enough to started and work for simple interfaces.

For the main Menu, the most massive box is the entire game window. There is padding between the edges of the window and the first components: it must be a margin center. Then, the screen is divided into two columns so that we use an Hboxcontainer. I have left the column, and we will manage the rows with a VBoxContainer. And in the right column, we handle the rows with a VBoxcontainer. And in the right column, we center the illustration with a CenterContainer.

Interface building blocks, broken down using the three rules of thumb

Note
Containers adapt to the window resolution and width-to-height ratio. Although we can keep UI elements by hand, boxes are faster, more accurate, and responsive.

Prepare the Main menu scene

Let's create the main Menu. We will build it in a single scene. To create the empty scene, click on the scene menu->New Scene.

We must add a root node before saving the view. The root of our UI should be the outermost container or element. In this case, it is a margin retainer.

MarginContainer is a good starting point for most of the interfaces, as we often require padding around the UI. Press Meta + S to save the view to disk. Name it, Menu.

To define the size of the margin, choose the marginagator again, and go to the inspector. Scroll the Control class to the Custom Constants section. Unfold it. Set the margin as follows:

Margin Right:120
Margin Top:80
Margin Left: 120
Margin Bottom:80

We want the container will have to fit the window. In the viewport, open the Layout menu and select the last option, Full Rect.

Add the UI sprites

Select the MarginContainer and create the UI element as TextureRect nodes. We need:

The title, or logo
The three text options, as individual nodes
The version note
And the main Menu's illustration

Click the Add Node button or press Meta + A on our keyboard. Type TextureRect to find the relevant node and press Enter. With the new node selected, press Meta + D five times to create five new TextureRect instances.

Click on each node to select it. In the inspector, click on the icon to the right of the texture property, and then click on Load. A file browser opens and lets us choose the sprite to load into the texture slot.

File browser lets us search and load textures

Repeat the operation for all TextureRect nodes. We should have a logo, illustration, three menu options, and version notes as a separate node. Then, double-click each node in the View tab and rename them.

The six nodes, with textures, loaded

Note
If we want to support localization in our game, use Labels for menu options instead of TextureRect.

Add containers to hold UI elements automatically

Our main Menu has some margin around the edges of the screen. It is divided into two parts: on the left, we have logo and menu options. On the right, we have the characters. To achieve this, we can use one of two containers: HSplitContainer or HBoxContainer.

The split container divided the area into two: one left and one right or one top and one bottom side. The split container divided the space into two: one left and one right or one top and one bottom side. They also allow the user to resize the left and right fields using an interactive bar. On the other hand, HBoxcontainer is divided into only as many columns as there are children in it. Although we can disable the resize of split containers, we recommend being compatible with box containers.

Choose MarginContainer and add HBoxContainer. Then, we need two containers as children of our HBoxContainer: A VBoxContainer for menu options on the left, and a CenterContainer for illustration on the right.

We should have four nested containers, and TextureRect nodes sitting aside from it.

In the node tree, select the TextureRect nodes which go to the left: logo, menu options, and version notes. Drag and drop into VBoxContainer. Then, drag the delineation node into the CenterContainer. Nodes need a position automatically.

Containers automatically place and resize the texture

We are left with two problems to solve:

The characters on the right are not centered
There is no space between the logo and the other UI elements

To center the characters on the right, we will use a CenterContainer. Add a CenterContainer node as the child of HBoxContainer. Then in the inspector, scroll to the Size Flags category and click the field to the right of the Workspace property and check Expand. Do the same for the horizontal property. Finally, drag and drop characters into the C enterContainer. The character element will be automatically in the center.

As it rests inside the center container, the character node centers inside the right half of the screen

To exclude menu options and logos on the left, we will use a final container and its size flag. Select VBoxContainer and name it "MenuOptions". Select all three menu options: NewGame, Continue and Options, then drag and drop them inside the new VBoxContainer. The layout of the UI should be difficult to change, if at all.

Place the new container between the other two nodes to retain the UI's layout

We now grouped menu options, and we can ask them to expand their containers to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll to the Size Flags category. Click the field to the right of the workspace property, and check Expand. The container expands to take up all available vertical space. But it respects its neighbors, logos, and variant elements.

To the center, nodes in the VBoxContainer, scroll to top of Inspector and change the Alignment property to Center.

The menu option should be vertically centered in the left column of the UI

Let's add some separation between menu options. Expand the Custom Constants range under the Size flag, and click the field next to the Separation parameter. Set it to 30. Once we press enter, the Separation property is activated, and Godot adds 30 pixels between menu options.