Learn UI Systems and Layouts for Godot

Introduction

Welcome to our beginner-friendly guide on mastering the Godot Layout System. This course is
designed to introduce you to the essentials of creating menus and user interfaces (UI) for your
games within the Godot engine. By the end of this course, you will be equipped with the knowledge
to design and implement various layout systems confidently.

Course Overview

In this course, we will cover the following key topics:

Placing UI elements
Adding style to your UI
Handling controller input
Using containers effectively
Working with presets

Understanding the Godot UI System

The Godot UI System is a comprehensive toolset used to create user interfaces within the Godot
engine. It comprises three main components:

1. UI Nodes: These are the building blocks of your UI, including buttons, labels, sliders, and
more.
2. Placement and Scaling: Learn how to position and scale UI elements relative to the screen
size, ensuring your UI adapts to different window sizes.
3. Styling Nodes: Godot provides efficient systems to style multiple elements cohesively.

Learning Goals

By the end of this course, you will achieve the following learning goals:

1. Understanding Layouts: Gain a general understanding of how Godot handles layouts,

making it straightforward to create complex UIs.
2. Efficient Use of Themes: Learn to apply styles not just to individual nodes, but to create
coherent themes for entire scenes or projects.

Prerequisites

To make the most of this course, you should have a basic understanding of Godot. Familiarity with
the following concepts will be beneficial:

Scenes and nodes

Basic GDScript knowledge

However, do not worry; the course will not involve complex logic or extensive scripting.

Course Structure

The course is designed to be straightforward and accessible, even for beginners. We will focus on the
practical aspects of UI design, ensuring that you can apply what you learn directly to your projects.

Conclusion

By completing this course, you will gain the skills and confidence to create dynamic and responsive
UI layouts in Godot. Whether you are designing menus, HUDs, or other interactive elements, this
course will provide you with the foundational knowledge you need to succeed.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Introduction

Let’s embark on this learning journey together and unlock the potential of the Godot Layout System!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Godot Installation and Version

Which version of Godot should you use for this course?

Technology changes rapidly, so to make sure you have an optimal learning experience we
recommend using Godot 4.4 for this course – the latest stable release.

Please make sure not to use newer versions of the software than what we recommend, as the course
material provided might not work as expected.

How to Install Version 4.4

You can download the most recent version of Godot by heading to the Godot website
([Link] and clicking the “Download Latest” button on the front page. This will
automatically take you to the download page for your operating system.

Once on the download page, just click the option for Godot 4.4. This will download the Godot engine
to your local computer. From there, unzip the file and simply click on the application launcher – no
further installation steps are required!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Godot Installation and Version

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Godot Installation and Version

If Godot fails to automatically select the correct operating system for you, you can scroll down to the
“Supported platforms” section on the download page to manually select the download version you
would like to install:

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Node Placement

Welcome to this beginner-friendly guide on understanding node placement in Godot. Before we dive
into the specifics, let’s explore the four types of nodes you’ll commonly work with in Godot. Each
type has its unique characteristics and placement methods.

Types of Nodes in Godot

2D Nodes

2D nodes are the most familiar, especially for those starting with Godot. These include:

Sprite2D
CharacterBody2D
TileMap

These nodes are represented by blue icons in the Godot editor. They are positioned using x and y
coordinates and have a fixed size. Their values are absolute, meaning they do not change with the
window size.

3D Nodes

3D nodes are similar to 2D nodes but exist in a three-dimensional space. Examples include:

CSGBox3D
CharacterBody3D
GridMap

These nodes are placed using x, y, and z coordinates. Their size is determined by their vertices, and
like 2D nodes, their values are absolute and do not change with the window size.

General Nodes

General nodes are non-visible nodes that do not require a position. These include:

Timer
AnimationPlayer
AudioStreamPlayer

Since these nodes are not visible, they do not need positional coordinates.

Control Nodes

Control nodes are represented by green icons and are used for creating user interfaces. Examples
include:

Label
ColorRect
TextureRect

These nodes are positioned using anchors and offsets, and their values are relative to the window
size. This makes them ideal for creating responsive UI elements that can adapt to different window
sizes.

Practical Examples

1. To create a menu that always covers the entire window, you would use control nodes with

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Node Placement

appropriate anchors and offsets.

2. To position a 2D character in a game world, you would use 2D nodes with specific x and y
coordinates.
3. To manage non-visual game logic, such as timing events, you would use general nodes like
Timer.

This overview provides a basic understanding of node types and their placement in Godot. Stay
tuned for more detailed discussions in upcoming lessons.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Layout Basics

Welcome to this beginner-friendly guide on understanding and utilizing the layout system in Godot.
This article will walk you through the basics of control nodes, focusing on the ColorRect node, and
how to manipulate its properties to create responsive user interfaces. By the end of this tutorial, you
will have a solid foundation in using anchors and offsets to design adaptable UIs in Godot.

Introduction to Control Nodes

Control nodes are essential for creating user interfaces in Godot. They allow you to design and
manage UI elements efficiently. In this article, we will focus on the ColorRect node, which is a simple
control node that displays a colored rectangle. This node is ideal for learning the layout system as it
allows us to concentrate on positioning and anchoring without worrying about complex functionality.

Creating a User Interface Scene

To begin, let’s create a new user interface scene in Godot:

1. Open Godot and create a new scene.

2. Rename the scene to layout_basics and save it in a new folder called scenes.
3. Ensure that the scene is recognized as a layout scene by checking for the green needles,
which represent anchors.

Adding a ColorRect Node

Next, add a ColorRect node to your scene:

1. Add a ColorRect node to your scene. You will see a white rectangle appear in the top left
corner of the window.
2. In the inspector, change the color of the rectangle to a blue-ish value or any color of your
choice.

Understanding Layout Modes

The ColorRect node can be positioned using various layout modes. For this tutorial, we will focus on
the Anchors layout mode:

Position: Places the control node using x and y values.

Anchors: Uses anchor points and offsets to position the node relative to the screen.

Working with Anchors

Anchors are crucial for creating responsive UIs. They define the relative distance of the node to the
top left corner of the screen. Here’s how to set up anchors:

1. Select the ColorRect node and go to the Layout section in the inspector.
2. Set the Layout Mode to Anchors and choose the Custom preset.
3. Focus on the Anchor Points tab and set all anchor offsets to zero.

Anchor Points and Offsets

Anchor points define the distance from the node’s sides to the screen’s edges. Anchor offsets add
pixels to any of these sides, allowing for fine-tuning:

Left: Distance from the left side of the node to the left side of the screen.
Top: Distance from the top of the node to the top of the screen.
Right: Distance from the right side of the node to the left side of the screen.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Layout Basics

Bottom: Distance from the bottom of the node to the top of the screen.

Practical Examples

Let’s create a few examples to illustrate the use of anchors and offsets:

Example 1: Bottom Right Rectangle

1. Rename the ColorRect node to bottom_right_rectangle.

2. Set the anchor points: Left: 0.8, Top: 0.8, Right: 0.9, Bottom: 0.9.
3. Adjust the anchor offsets as needed to fine-tune the position.

Example 2: Mid Bottom Rectangle

1. Add another ColorRect node and rename it to mid_bottom_rect.

2. Set the anchor points: Left: 0.25, Top: 0.8, Right: 0.75, Bottom: 0.9.
3. Adjust the anchor offsets to create a health bar effect.

Example 3: Top Left Rectangle

1. Add another ColorRect node and rename it to top_left_rectangle.

2. Set the anchor points: Left: 0, Top: 0, Right: 0.2, Bottom: 0.2.
3. Use anchor offsets to add a small margin from the top and left sides.

Conclusion

By understanding and utilizing anchors and offsets, you can create responsive and adaptable user
interfaces in Godot. These principles form the foundation of the layout system and will serve you well
as you delve deeper into UI design. Experiment with different anchor points and offsets to see how
they affect the positioning and scaling of your UI elements. With practice, you will become proficient
in creating dynamic and visually appealing interfaces.

Happy learning, and welcome to the world of Godot UI design!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Containers and Anchors - Part 1

Welcome to this beginner-friendly guide on understanding and using containers in Godot. Containers
are a crucial concept in Godot, especially when you want to arrange multiple control nodes in a
specific pattern. This article will walk you through the basics of containers, their types, and how to
use them effectively.

Understanding the Problem

When designing user interfaces in Godot, you often need to place multiple control nodes in a specific
pattern, such as a grid or side by side. While you can achieve this using anchors, it can be tedious
and unreliable. Containers in Godot help overcome this issue by controlling the anchors of their child
nodes and arranging them in specific ways.

Types of Containers

Godot offers several types of containers, each serving a unique purpose. Here are a few commonly
used containers:

HBoxContainer: Places nodes next to each other horizontally.

VBoxContainer: Stacks nodes vertically.
GridContainer: Arranges nodes in a grid pattern.
CenterContainer: Centers a single element.
MarginContainer: Adds margins around a node.

Using HBoxContainer

Let’s start with the HBoxContainer, which arranges nodes horizontally. Here’s a step-by-step guide to
using it:

1. Create a new scene and rename it to container_basics.

2. Add an HBoxContainer node to the scene.
3. Add child nodes (e.g., ColorRect nodes) to the HBoxContainer.
4. Set the child nodes to expand using the Expand option in the top tab.
5. Adjust the stretch ratio in the inspector to control the space each node takes up.

Using GridContainer

The GridContainer arranges nodes in a grid pattern. Here’s how to use it:

1. Add a GridContainer node to the scene.

2. Add child nodes (e.g., ColorRect nodes) to the GridContainer.
3. Set the child nodes to expand on both the X and Y axes using the top tab.
4. Adjust the number of columns in the inspector to control the grid layout.

Combining Containers

You can combine multiple containers to create more complex layouts. For example, you can add a
VBoxContainer to a GridContainer to stack nodes vertically within a grid. This approach makes it
easy to create intricate UI designs without the hassle of manual anchor adjustments.

Other Containers

Godot offers several other containers for specific use cases:

CenterContainer: Centers a single element. To use it, add a child node and set its custom
minimum size.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Containers and Anchors - Part 1

MarginContainer: Adds margins around a node. To use it, add a child node and set the
margins in the theme overrides.

Conclusion

Containers in Godot are powerful tools for arranging UI elements efficiently. By understanding and
utilizing different types of containers, you can create complex and responsive user interfaces with
ease. Stay tuned for more advanced topics on containers and other Godot features.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Containers and Anchors - Part 2

Welcome to this beginner-friendly guide on using anchors, containers, and presets in Godot. This
article will help you understand these concepts and start creating more complex layouts in your
Godot projects. Let’s dive right in.

Understanding Anchors and Presets

Anchors and presets are essential tools in Godot that help you manage your user interface (UI)
layouts more efficiently. While you can define your own anchors, using presets can provide a
convenient starting point for your layout.

Creating a New Scene

Let’s start by creating a new scene in Godot:

1. Click on Scene -> New Scene.

2. Name the scene “Resets” and save it in your project’s normal space.
3. Add a ColorRect node to the scene.

Using Anchor Presets

Godot provides several anchor presets that you can use to quickly set up your UI elements. Here’s
how to access and use them:

1. Select the ColorRect node.

2. In the Inspector, go to the Layout section and click on Anchor Preset.
3. You will see various preset options like Full Rect, Center, Left, Right, etc. Clicking on any
of these will apply the preset to your selected node.

These presets help you quickly position your UI elements. However, you may want to customize
them further. After setting a preset, you can switch to the Custom mode and adjust the anchor
values as needed.

Adjusting Anchor Offsets

Sometimes, you may want to adjust the position of your UI elements slightly after applying a preset.
Here’s how to do it:

1. After setting a preset, switch to the Custom mode in the Anchor Preset menu.
2. Adjust the Anchor Offset values to fine-tune the position of your UI element.

Understanding the Anchor Button

The anchor button in Godot allows you to control whether you are adjusting the anchors or the
offsets when resizing a UI element:

When the anchor button is not selected, resizing the UI element will adjust the offsets.
When the anchor button is selected, resizing the UI element will adjust the anchors.

Grow Direction

The Grow Direction property determines the direction in which a UI element will grow when its
minimum size is changed. Here’s how to use it:

1. Select the ColorRect node.

2. In the Inspector, go to the Layout section and find the Grow Direction property.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Containers and Anchors - Part 2

3. Choose the direction in which you want the UI element to grow (e.g., Right, Left, Top,
Bottom, or Both).

The grow direction will change depending on the anchor preset you have chosen, so keep that in
mind when designing your layout.

Horizontal and Vertical Alignment

Godot also provides options for horizontal and vertical alignment of UI elements within a container.
Here’s how to use them:

1. Create an HBoxContainer node and add some ColorRect nodes to it.

2. Select a ColorRect node and go to the Layout section in the Inspector.
3. You will see options for Horizontal Alignment and Vertical Alignment. Choose the
desired alignment for your UI element.

You can also set a custom minimum size for your UI elements to better visualize the alignment.

That’s it! You now have a solid foundation in using anchors, containers, and presets in Godot. Keep
practicing and experimenting with these tools to create more complex and dynamic layouts in your
projects. Happy learning!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Containers and Anchors - Part 3

Welcome to this beginner-friendly guide on mastering containers in Godot. Containers are

fundamental for creating complex layouts in your user interface. In this article, we will delve into two
key concepts: combining different containers and understanding the custom minimum size. Let’s get
started!

Combining Containers for Complex Layouts

To achieve intricate layouts, you often need to combine various containers. Sometimes, you may
want to adjust the anchors inside a container, which requires additional nesting. Let’s explore this
with an example.

Creating a New Scene

1. Open Godot and create a new user interface scene named container_advanced.
2. Save this scene in the appropriate folder.

Working with Containers

Let’s start by creating an HBoxContainer and adding color rectangles to it.

1. Create an HBoxContainer with a specific size.

2. Add several color rectangles to the HBoxContainer.

You’ll notice that the layout options are limited. To gain more control, you can use the offset
property with anchors. However, this requires a different approach.

Using Control Nodes

To extend a rectangle further, follow these steps:

1. Add a control node to the scene.

2. Increase the size of the control node and position it appropriately.
3. Add a color rectangle to the control node.
4. Set the anchors to custom and adjust the anchor points to fill the available parent container.

This method allows you to use offsets even within a container, providing more customization options.

Understanding Custom Minimum Size

The custom minimum size is crucial as it defines the smallest size a node can have. Many containers
force their nodes to be as small as possible, which can confuse beginners. Let’s explore this concept
in detail.

Setting Custom Minimum Size

1. Add a color rectangle to the layout.

2. Set the anchors to custom with all values at zero.
3. Adjust the custom minimum size to make the node visible.

Even with negative anchor offsets, the custom minimum size ensures the node remains visible and
maintains its size.

Containers and Minimum Size

Most containers scale down their children to their minimum size. For example:

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Containers and Anchors - Part 3

In a grid container, nodes disappear if not expanded.

In an HBoxContainer, disabling expand makes the node disappear.

Setting a custom minimum size ensures the node remains visible and maintains its size, even if
expand is disabled.

Practical Example

1. In the HBoxContainer, disable expand for a color rectangle.

2. Set a custom minimum size for the node.
3. Observe that the node maintains its size and does not disappear.

This concept is essential for understanding how containers behave and ensuring your nodes remain
visible.

Adding Spacing with Custom Minimum Size

A common use of custom minimum size is adding spacing within a container. Here’s how to do it:

1. Add a plain control node to the HBoxContainer.

2. Set a custom minimum size for the control node.
3. Adjust the position to create spacing between color rectangles.

You can customize the spacing as needed. To remove small gaps between other color rectangles,
adjust the separation value in the HBoxContainer’s theme overrides.

Conclusion

Containers in Godot can be complex, but with practice, they become straightforward. Understanding
how to combine containers and use custom minimum size will greatly enhance your ability to create
intricate and customizable layouts. Keep experimenting, and you’ll master containers in no time!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Control Nodes

In this lesson, we will explore the various control nodes available in Godot. These nodes are essential
for creating interactive user interfaces in your games. We will cover text display and input, buttons,
sliders, progress bars, and some styling elements. Additionally, we will introduce GDScript to make
our UI elements more interactive.

Text Control Nodes

Text control nodes are used for displaying and inputting text in your game. They include:

Label: A basic text display node. You can set the text, alignment, and other properties in the
inspector.
RichTextLabel: An advanced text display node that supports BBCode for styling. You can
enable BBCode in the inspector to apply various text effects.
TextEdit: A multi-line text input field. It allows users to enter text and supports signals for
detecting text changes.
LineEdit: A single-line text input field. It is similar to TextEdit but only allows one line of text.

Let’s create a new UI scene called [Link] and add a Label node. In the inspector, you can
set the text and alignment properties. For example:

Label
Text: Hello, Godot!
Alignment: Center

Next, add a RichTextLabel node. Enable BBCode in the inspector and enter some styled text. For
example:

RichTextLabel
BBCode: [wave amp=50 frequency=5.0 connected=1]Hello, Godot![/wave]

Now, add a TextEdit node. You can set default text and placeholder text in the inspector. To handle
text changes, connect the text_changed signal to a script and print the new text:

extends Control

func _on_text_edit_text_changed() -> void:

print($[Link])

You can also update a Label with the text from the TextEdit node:

extends Control

func _on_text_edit_text_changed() -> void:

print($[Link])
$[Link] = $[Link]

Buttons

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Control Nodes

Buttons are essential for user interaction. Godot offers several button types:

Button: A basic button node that can display text and respond to clicks.
CheckButton: A toggle button that can be checked or unchecked.

Add a Button node and set its text in the inspector. Connect the pressed signal to a script to handle
button clicks:

extends Control

func _on_button_pressed() -> void:

print('button was pressed')

For a CheckButton, you can set the text and connect the toggled signal to handle toggle events.

Progress Bars and Sliders

Progress bars and sliders are used to display and input numerical values.

ProgressBar: Displays progress based on a minimum, maximum, and current value.

HSlider/VSlider: Horizontal and vertical sliders that allow users to input a value within a
range.

Add a ProgressBar node and set its minimum, maximum, and value properties in the inspector. To
update the ProgressBar based on an HSlider, connect the HSlider’s value_changed signal to a script:

extends Control

func _on_h_slider_value_changed(value: float) -> void:

$[Link] = value

Styling Elements

Styling elements are used to enhance the visual appearance of your UI. They include:

ColorRect: Displays a colored rectangle.

Panel: A more powerful colored rectangle with additional styling options.
TextureRect: Displays an image or texture.

Add a Panel node and explore its styling options in the inspector. You can change the color, border
width, border color, corner radius, and more. For a TextureRect node, you can set the texture and
control its expansion and stretching modes.

In this lesson, we covered the essential control nodes in Godot and how to make them interactive
using GDScript. In the next lessons, we will delve deeper into each of these nodes and explore more
advanced features.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Style Overrides

Welcome to this beginner-friendly guide on theming in Godot. Theming allows you to add style to
your control nodes, enhancing the visual appeal of your game. In this article, we will explore how to
create and apply themes to various control nodes in Godot.

Understanding Themes

In Godot, every control node has a theme that determines its appearance. You can customize the
style of individual control nodes or create a theme that applies to multiple or all control nodes in
your game. There are numerous customization options available, making theming a powerful tool for
designing your game’s user interface.

Getting Started with Theming

To begin, let’s create a new user interface scene in Godot. For this example, we will rename the
scene to theme_override. Add a Panel node to the scene. The Panel node allows us to add a theme
or override an existing theme.

Theme Override vs. Theme

Theme Override: Applies to a specific control node.

Theme: Applies to multiple or all control nodes.

For this demonstration, we will use a Theme Override to style our Panel node.

StyleBox Options

The Panel node offers several StyleBox options for customization:

StyleBox Empty: Makes the node invisible.

StyleBox Texture: Allows you to add a texture or image.
StyleBox Flat: Enables customization of color, border, corner radius, shadows, and more.
StyleBox Line: Converts the node into a line.

For our purposes, we will use StyleBox Flat to customize the Panel node.

Customizing StyleBox Flat

When you select StyleBox Flat, you gain access to various customization options:

Change the background color.

Enable or disable drawing the center.
Skew the node.
Add border color and width.
Set corner radius.
Expand margins.
Add shadows.

Experiment with these options to achieve the desired look for your Panel node.

StyleBox Texture

If you prefer to use an image for your node, select StyleBox Texture. This option allows you to add
a texture and customize various image-related settings, such as texture margins, expand margins,
and stretch ratio.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Style Overrides

Styling Other Control Nodes

While some control nodes, like the ColorRect, do not support styling, most others do. One of the
most complex nodes for styling is the Button node.

Styling a Button Node

The Button node offers numerous customization options, including:

Colors for various button states (normal, hover, pressed, disabled, focus).
Constants for border width, margin, etc.
Fonts and font sizes.
Icons.
Styles for different button states.

To see the effects of your customization, save the scene and run the game. Hovering over the button
will display the different styles you have set.

Styling a Label Node

The Label node also offers extensive styling options, including:

Colors for text and background.

Fonts and font sizes.
Styles for background and text.

Add a Label node to your scene and experiment with the available options to customize its
appearance.

Special Nodes: HSlider and VSlider

The HSlider and VSlider nodes, used for slider inputs, have unique styling options:

Slider style.
Grab area style.
Grab area highlight style.

Each of these options uses StyleBoxes for customization, making them easy to work with.

Conclusion

Theming in Godot is a powerful feature that allows you to customize the appearance of your game’s
user interface. By exploring the various StyleBox options and experimenting with different control
nodes, you can create a visually appealing and unique look for your game. Don’t be afraid to
experiment and have fun with the theming process!

Happy game development with Godot!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Special Nodes

Welcome to this beginner-friendly guide on theming in Godot. In this article, we will explore how to
use various control nodes to create visually appealing user interfaces. These control nodes include
texture buttons, texture progress bars, 9-patch rectangles, and panel containers. Let’s dive in and
learn how to style these elements effectively.

Texture Button

A texture button is a unique control node that cannot be styled using traditional themes or theme
overrides. Instead, it uses textures for different states of the button, such as normal, pressed, hover,
and disabled. Here’s how you can work with a texture button:

1. Add a texture button to your scene. By default, it is invisible.

2. Assign textures for different states:
Normal State: Use a texture that represents the button in its default state.
Pressed State: Use a texture that represents the button when it is pressed.
Hover State: Use a texture that represents the button when the mouse hovers over
it.
Disabled State: Use a texture that represents the button when it is disabled.
3. Set the filter property to “Nearest” if you are using pixel art to ensure the textures look
sharp.
4. Test the button by running the scene and interacting with it to see the different states in
action.

Texture Progress Bar

A texture progress bar displays progress using textures. It has three main texture slots: Under, Over,
and Progress. Here’s how to set it up:

1. Add a texture progress bar to your scene.

2. Assign textures to the slots:
Under Texture: The background texture.
Progress Texture: The texture that shows the progress.
Over Texture: The texture that goes on top of everything else.
3. Set the minimum, maximum, and current values to see the progress bar in action.
4. Experiment with different fill modes, such as clockwise, to create interesting progress bar
styles.

9-Patch Rectangle

A 9-patch rectangle is used to scale textures indefinitely while keeping the corners and edges clean.
Here’s how to use it:

1. Add a 9-patch rectangle to your scene and assign a texture to it.

2. Set the filter mode to “Nearest” for pixel art to ensure it looks sharp.
3. Define the 9 regions by editing the patch margins:
Set the margins for each side to define the regions that will not be scaled.
The center region will be scaled or tiled, keeping the corners and edges clean.
4. Choose between stretching or tiling the axes to achieve the desired scaling effect.

Panel Container

A panel container is a styled panel that scales along with its child elements. Here’s how to use it:

1. Add a panel container to your scene.

2. Style it using theme overrides to give it a unique appearance.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Special Nodes

3. Add child elements, such as labels or 9-patch rectangles, to the panel container.
4. Set the anchor preset and layout to ensure the panel container scales with its children.
5. Test the panel container by adding more child elements and observing how it scales.

By following these steps, you can create visually appealing user interfaces in Godot using texture
buttons, texture progress bars, 9-patch rectangles, and panel containers. Experiment with different
textures and styles to achieve the look you desire.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Themes

Welcome to this beginner-friendly guide on creating and managing themes in Godot. In this article,
we will explore how to apply themes to multiple control nodes, customize various elements, and
organize your project’s style efficiently. By the end of this tutorial, you will have a solid
understanding of how to use themes to enhance your Godot projects.

Introduction to Themes

So far, you have learned how to apply a theme to a single control node. However, Godot allows you
to create themes that can be applied to multiple control nodes, making it easier to manage the style
of your entire project in one place. This process involves working with style boxes, fonts, and other
familiar elements. Additionally, you can set variations for different kinds of button styles and more.

Creating a User Interface with a Theme

1. Start by creating a new user interface node and rename it to “Theme”. Save it in your project
folder.

2. Add an element to style, such as a simple panel.

3. With the theme node selected, go to the “Theme” tab and create a new theme.

4. Click on the theme to open the theme preview, where you can see the end result of your
styling.

Customizing the Panel Node

1. In the theme preview, click on the plus symbol and add the panel node you want to
customize.

2. Inside the available options, you will see “Panel” with a style box flat. Click on the plus
symbol to create customization options.

3. Choose “Style Box Flat” and observe the preview of the end result. The actual scene will also
update to reflect the changes.

Adding and Styling a Button

1. Add a plain button to the node and include text. Position it as desired.

2. To style the button, work inside the theme and add a button to the theme.

3. Expand the options to see the customizable elements. For the button, focus on the “Colors”
section and the normal state of the button.

4. Click on the plus symbol to create your own style box. Choose “Style Box Flat” and observe
the preview.

5. Customize the style box by changing the color. The scene will update to reflect these
changes.

Saving and Reusing Themes

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Themes

You can save the theme as a separate file, such as “new_theme.tres”, and reuse it in other projects.
The basic idea is to have one parent node with multiple children to create the layout, and then apply
the theme to the parent node to centralize all styling.

Applying a Theme to the Entire Project

1. Go to “Project” and then “Project Settings”.

2. Look for “Theme” under “GUI Theme” and set a custom theme, such as “New Theme”.

3. Restart Godot to apply the theme to the entire project.

Creating Theme Variations

1. For a button, you can set a theme override to create variations.

2. Go to “Styles” and set a normal style box to override the theme’s styling.

3. A more elegant approach is to create a theme variation within the theme itself. Go to
“Manage Items” and add a new type, such as a “Red Button”.

4. Set the base type to “Button” and overwrite all to get the default style boxes.

5. Duplicate the button and apply the new theme variation by typing the name, such as “Red
Button”.

6. Customize the new button style as desired.

Conclusion

By following these steps, you can effectively manage and customize themes in Godot, making it
easier to organize and style your projects. Experiment with different elements and variations to
create a cohesive and visually appealing user interface.

Happy coding!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Focus

Welcome to this beginner-friendly guide on understanding and implementing the focus system in
Godot. This tutorial will introduce you to the essential concept of focus for UI nodes, which is crucial
for creating user interfaces that can be navigated without a mouse. This is particularly important for
games designed to be played on a couch or with a game controller.

Understanding Focus in Godot

Focus in Godot allows a UI node to be selected and interacted with using keyboard or controller
inputs. This is essential for games that do not rely on mouse input. The focus system enables you to
define how different UI elements can be navigated and interacted with.

Creating a New User Interface Scene

Let’s start by creating a new user interface scene in Godot:

1. Create a new user interface scene and name it “focus”.

2. Add an HBoxContainer to the scene. The specific size of the container is not crucial.
3. Add a button to the HBoxContainer and set its text to “Button”. Ensure the button expands to
fill the container.
4. Duplicate the button a few times to create multiple buttons within the HBoxContainer.

Testing the Focus System

Run the project and observe the following:

Click on one of the buttons to see a white border around it, indicating that the button is
focused.
Press the spacebar to activate the button.
Use the arrow keys on the keyboard to navigate between buttons.

This basic navigation is made possible by the focus system in Godot.

Configuring Input Map

To customize the input for navigation, follow these steps:

1. Go to Project Settings and open the Input Map.

2. Enable the built-in actions to see predefined actions like UI_accept, UI_select, UI_left, UI_right,
UI_up, and UI_down.
3. Define the inputs for UI_left, UI_right, UI_up, and UI_down to control navigation with the
keyboard or controller.

Adding a Theme for Focused Buttons

To make the focused button more visible, add a theme to the root node:

1. Create a new theme and add a button element.

2. Set a custom style for the button when it is focused, such as a red color, to make it more
visible.

Adding Additional UI Elements

You can add other UI elements like sliders and configure their focus behavior:

1. Add a slider below the buttons and adjust its size and position.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Focus

2. Run the scene and navigate between the buttons and the slider using the keyboard or
controller.

Defining Neighbors for Focus Navigation

To customize the navigation between UI elements, define the neighbors for each focusable node:

1. Select a button and go to the Focus tab in the inspector.

2. Define the left and right neighbors for the button to control the navigation flow.

Ensuring a Node is Focused by Default

To ensure that a node is focused by default when the scene starts, add a script to the root node:

1. Add a script to the root node.

2. In the _ready function, use the grab_focus method to focus the first button.

extends Control

func _ready() -> void:

$HBoxContainer/Button.grab_focus()

This ensures that the first button is selected by default, allowing immediate keyboard or controller
interaction.

Conclusion

The focus system in Godot is a powerful tool for creating user-friendly interfaces that can be
navigated without a mouse. By understanding and implementing the focus system, you can enhance
the accessibility and usability of your games. Happy coding!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Exercise

In this learning article, we will guide you through an exercise to solidify your understanding of the UI
basics covered in the course.

Exercise Overview

The goal of this exercise is to recreate a specific layout using the UI elements you have learned. This
task will help you apply your knowledge practically and reinforce the concepts covered in the course.

Requirements

To complete this exercise, you will need the following resources:

Ship texture
Font

These assets can be found in the exercise assets folder provided with the course materials.

Instructions

1. Access the Assets: Locate the exercise assets folder and download the ship texture and
font. These will be essential for creating the layout.

2. Focus on the Basics: The primary objective is to replicate the basic layout and general
theme of the provided example. Precision in dimensions and colors is not mandatory; slight
variations are acceptable.

3. Pause and Reflect: Take a moment to pause the video and carefully consider how to
approach the layout. Think about the placement of elements, the use of colors, and the
overall design theme.

Tips for Success

Pay attention to the arrangement of UI elements to ensure a cohesive layout.

Experiment with different colors and sizes to achieve a similar theme, even if it’s not an
exact match.
Use the assets provided to enhance the visual appeal of your layout.

Conclusion

This exercise is a valuable opportunity to apply what you have learned about UI basics. By recreating
the layout, you will gain practical experience and reinforce your understanding of the course
material. Remember, the focus is on the basic layout and general theme, so don’t worry about minor
differences in your final product.

Good luck with your exercise, and happy learning!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Exercise Solution

Welcome to this beginner-friendly guide on creating a simple user interface (UI) in Godot. In this
tutorial, we will walk through the process of setting up a basic UI with a spaceship image, labels, and
buttons. By the end of this article, you will have a solid foundation in using Godot’s UI nodes and
styling them with themes.

Setting Up the Scene

To begin, let’s set up our scene in Godot:

1. Create a new scene and rename it to exercise.

2. Save it in the scenes folder.

Creating the Main Container

Next, we will create the main container for our UI:

1. Add a PanelContainer as the main container.

2. Set a custom minimum size for the container (e.g., width x height pixels).
3. Add a MarginContainer as a child of the PanelContainer. This will be used later to add
margins.

Structuring the UI

We will use a VBoxContainer to separate the UI into two parts: the spaceship part and the buttons
part.

1. Add a VBoxContainer as a child of the MarginContainer.

2. Add a Control node as a child of the VBoxContainer and rename it to main. Set it to expand.
3. Duplicate the Control node for the buttons part. Set the size of the buttons container:
Either keep it expanding and adjust the layout sizing value.
Or set it to not expand and define a custom minimum size (e.g., 60 pixels).

Adding the Spaceship Image

Now, let’s add the spaceship image to our UI:

1. Add a VBoxContainer inside the main node.

2. Add a TextureRect as a child of the VBoxContainer and set it to expand.
3. Assign the [Link] image from the exerciseAssets folder to the TextureRect.
4. Adjust the image size by fitting the width while keeping the aspect ratio centered.

Adding the Label

To add a label above the spaceship image, follow these steps:

1. Add a Control node as a child of the main node.

2. Add a PanelContainer as a child of the Control node.
3. Add a Label as a child of the PanelContainer and set its text (e.g., “Space Ship”).
4. Set a custom minimum size for the Control node (e.g., 4 pixels).
5. Center the PanelContainer and use offsets to position the label above the spaceship image.

Adding the Buttons

Finally, let’s add the buttons to our UI:

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

 Learn UI Systems and Layouts for Godot
Exercise Solution

1. Add an HBoxContainer for the buttons and set a custom minimum size for the y-axis (e.g., 60
pixels).
2. Add a Button as a child of the HBoxContainer and set its width (e.g., 120 pixels) and text
(e.g., “Buy Button”).
3. Duplicate the button and rename it to “Cancel”.
4. Set the alignment of the HBoxContainer to center.

Styling the UI with Themes

To style our UI, we will use themes in Godot:

1. With the exercise node selected, add a new theme.

2. Customize the MarginContainer by setting the margins for each side (e.g., 20 pixels).
3. Style the HBoxContainer by setting the separation between elements.
4. Customize the PanelContainer for the background:
Add a new StyleBoxFlat.
Set the color (e.g., gray-bluish color) and corner radius (e.g., 10 pixels).
Add shadows with a strong value and lower the alpha value.
5. Style the buttons by adding a new theme variation:
Set the background color, border width, border color, and corner radius.
Add a font and set the font size and color.

Congratulations! You have now created a simple UI in Godot with a spaceship image, labels, and
buttons. Feel free to experiment with different styles and layouts to make your UI unique.

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Conclusion

Congratulations on completing your course! You have now gained a solid foundation in the Godot
layout system. This system is a powerful tool for designing user interfaces (UI) in your games or
applications. Let’s break down what you’ve learned and explore ways to apply and expand upon this
knowledge.

Key Components of the Godot Layout System

The Godot layout system consists of three major parts:

1. Godot Layout Nodes: These are the control nodes that form the basic building blocks of
your UI. Examples include:
ColorRect
Label
Button
2. Layout System: This system determines how your nodes are placed and arranged. It
includes:
Anchors
Offsets
Containers
Minimum sizes
Expansion modes
3. Themes: These are used to style your UI elements. Most of the time, you’ll be working with
style boxes or basic integers for text size, for example.

Practical Applications

Now that you understand the basics of the Godot layout system, here are a few ways you can apply
and build upon this knowledge:

1. GDScript for Advanced UI Manipulation: To create more dynamic and interactive UIs,
consider using GDScript to target layouts and themes. This is especially useful if you want to
animate your UI or create special effects.
2. Build Applications: You can start creating apps with your newfound knowledge. Some
project ideas include:
A calculator
A simple photo editor with shaders
3. Enhance Your Games: Incorporate more UI nodes into your games to improve the user
experience. Enjoy the process of designing and implementing these elements!

Conclusion

The Godot layout system is straightforward and powerful. With the knowledge you’ve gained from
this course, you’re well-equipped to create engaging UIs for your games and applications. Don’t
forget to experiment, explore, and most importantly, have fun with the process!

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])

 Learn UI Systems and Layouts for Godot
Full Source Code - Godot UI

In this lesson, you can find the full source code for the project used within the course. Feel free to
use this lesson as needed – whether to help you debug your code, use it as a reference later, or
expand the project to practice your skills!

You can also download all project files from the Course Files tab via the project files or
downloadable PDF summary.

control_nodes.gd

Found in folder: /scenes

This code connects three event handlers to UI elements. When the text in a TextEdit field changes, it
prints the new text and updates a Label with the same text. When a Button is pressed or an HSlider’s
value changes, it prints a message or updates a ProgressBar’s value, respectively.

extends Control

func _on_text_edit_text_changed() -> void:

print($[Link])
$[Link] = $[Link]

func _on_button_pressed() -> void:

print('button was pressed')

func _on_h_slider_value_changed(value: float) -> void:

$[Link] = value

[Link]

Found in folder: /scenes

This code extends the Control class and overrides the _ready function. When the node is ready, it
sets the focus to a Button node located inside an HBoxContainer. This ensures the button is selected
and ready to receive input when the scene starts.

extends Control

func _ready() -> void:

$HBoxContainer/Button.grab_focus()

© 2025 Zenva Pty Ltd. All rights reserved. [Link]

Powered by TCPDF ([Link])