Cheatsheet: the most useful UI nodes to get started

Godot has numerous UI nodes for any user interface, from simple to complex ones.

The massive feature-set can easily overwhelm you at first.

This short cheatsheet lists the most useful nodes to start creating user interfaces in Godot.

The nodes you’ll use the most

There are six very useful UI nodes that we recommend to get started.

Label, which displays text.

Button, which the player can click to interact with the user interface.

TextureRect, which shows a picture.

LineEdit, which gives the player an editable text field. You can use it for login forms or for players to enter their nicknames in a multiplayer game.

RichTextLabel, which displays a large text box with an optional scrollbar and supports text formatting (italics, bold, etc.).

ProgressBar, which draws a horizontal or vertical bar. You can use it for a health bar or a loading progress display.

We used the first three nodes in the Scoreboard series, and we’ll use the TextureRect and RichTextLabel in the next two series.

The most useful containers

There are also a couple of Container nodes you’ll use often:

The VBoxContainer aligns its children in a column, as we’ve already seen.

The HBoxContainer aligns its children in a row. Below, you can see three Button nodes inside an HBoxContainer.

The MarginContainer applies a fixed margin to its children. Below, the margin container creates the space between the panel’s edges and the buttons.

The PanelContainer can draw a panel behind children and make them stretch to fill the panel. We often combine it with a MarginContainer, for example, to create a frame around a character’s portrait.

The Container nodes automatically place and resize their child Control nodes (other containers, buttons, labels, etc.). When a UI node is a direct child of a container, you cannot move children manually anymore.

You will sometimes need other nodes, but the ten above should cover the majority of your needs.