Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Redot.

Checking the stable version of the documentation...

User interface (UI)

In this section of the tutorial we explain the basics of creating a graphical user interface (GUI) in Redot.

UI building blocks

Like everything else in Redot the user interface is built using nodes, specifically Control nodes. There are many different types of controls which are useful for creating specific types of GUIs. For simplicity we can separate them into two groups: content and layout.

Typical content controls include:

• Buttons

• Labels

• LineEdits and TextEdits

Typical layout controls include:

• BoxContainers

• MarginContainers

• ScrollContainers

• TabContainers

• Popups

The following pages explain the basics of using such controls.

• Size and anchors
• Using Containers
• Custom GUI controls
• Keyboard/Controller Navigation and Focus
• Control node gallery

GUI skinning and themes

Redot features an in-depth skinning/theming system for control nodes. The pages in this section explain the benefits of that system and how to set it up in your projects.

• Introduction to GUI skinning
• Using the theme editor
• Theme type variations
• Using Fonts

Control node tutorials

The following articles cover specific details of using particular control nodes.

• BBCode in RichTextLabel