Godot:GUI

lastmod 2022-03-23created 2020-08-0231 edits

Notes on how to build a GUI in Godot.

Filling the whole screen

Set the root node to a MarginContainer. (You can also set its margins to 0, and it is handy in many ways.) Then click the Leyout button at the top (Godot-layout-button.png) and select Full Rect. This sets the anchors to the full screen, which makes it easy to build the initial screen layout.

Tutorial

Step-by-step guide to building a screen layout

Adding the background graphic

Since the parent container is a MarginContainer, if all SizeFlags are Fill (the default), the background covers the whole screen.

Placing the HUD

It must be centered, so add a CenterContainer.

Adding a container for the title layout

Add a VBoxContainer for the vertical layout in the order "company name -> title -> login GUI". To widen the spacing between controls, increase the Separation property under Custom Constants to 40.

Company name label

Place the "company name" text as a Label. Just change the font and color.

Title image

Place the "title" image as a TextureRect.

Adding a container for the login GUI

Again, add a VBoxContainer to lay out the login GUI in the order "ID/PW input boxes -> Link buttons at the bottom". To widen the spacing between controls, increase the Separation property under Custom Constants to 20. The child controls should not be stretched and must be centered horizontally, so set Size Flag to Shrink Center.

Container for laying out "ID/PW" and "Login"

Add an HBoxContainer. To widen the spacing between controls, increase the Separation property under Custom Constants to 7.

Container for laying out "ID" and "PW"

Add a VBoxContainer. To widen the spacing between controls, increase the Separation property under Custom Constants to 7. It must be centered vertically, so set Size Flag to Shrink Center.

Container for the "ID" button

Do not add a LineEdit for "ID" directly. This is because the container area will not be reserved to the size of the background image. So a separate container is needed to reserve container space matching the background area. Add the easiest option, a MarginContainer.

"ID" button: background

To place the background area in the container, add a TextureRect and apply the image.

"ID" button: margin for adjusting the input cursor position

If you add the input cursor directly, the cursor position does not fit the background exactly. Use a MarginContainer to add a small margin. Enter 10 for Margin Left under Custom Constraints.

"ID" button: Edit for input

Finally, add a LineEdit. The important point is that since a background has already been chosen, all backgrounds of the LineEdit must be removed. Also set the font, color, and PlaceHolder.

"PW" Edit

Lay out the container for the "PW" button in the same way. However, the password must not be shown on screen, so the Secret property must be set to Enable.

Login button button

Add a TextureButton.

Container for the link buttons

They must be laid out horizontally, so add an HBoxContainer.

Adding the "Join" button

Add it as a LinkButton.

Empty space

The "Find ID/password" button that comes next must be placed at the right end, so the remaining middle area must be fully expanded. To do this, add the Expand property to the horizontal Size Flag.

Adding the "Find ID/password" button

Add it as a LinkButton.

See also

• Godot
• Godot:Container

Favorite site

• Docs » Step by step » Design interfaces with the Control nodes
• Docs » Step by step » Design a title screen
• Docs » Step by step » Design the GUI
• Docs » GUI » Containers
• Docs » Viewports » Multiple resolutions
• Multiple resolutions — Godot Engine latest documentation
• Size and anchors — Godot Engine (stable) documentation (Korean)
• GUI skinning — Godot Engine (stable) documentation (Korean)
• Importing textures — Godot Engine latest documentation
• Youtube - Introduction to UI Containers in Godot 3 (tutorial)