Godot UI Tutorial

Building a UI

Published: Mon May 19 2025 17:33:30 GMT+0000 (Coordinated Universal Time)

This tutorial assumes you have completed the first part of the basic tutorial and you are using the most recent version of th GMAP Hotkeys addon.
You can download a zip folder that can be imported that has addons already configured.
This is a short tutorial to demo how to use basic godot UI elements, called Control Nodes.
We will make a main menu, then a memory matching game using only button nodes. So it will also demonstrate how you could make a simple card or word games as the matching tiles are pulled from a deck and then hidden values are checked for if they are a match. So any card game can use the deck, and many types of word games such as word association games or language learning games can work the same way.
As usual, you can skip the explanation part and go right to the steps if needed.

Experimental Tutorial

This tutorial used my in development Tutorial Logger addon. Which records my actions and steps automatically as I take them to reduce errors from forgetting to write down steps, and drastically reduce time to create tutorials.
If you have feedback/suggestions on the format, style, verbage, etc. of the auto generated parts, please let me know! As I hope to use it more.

Main menu setup

Explanation

The first thing we will do is create a main menu the player will land on first thing.
This will be a Control node that holds a container, and the container will hold our buttons.
It is very important to pick the right nodes, as control nodes work differently based on what their parent is.
Control nodes are also where the heart of Godot Accessibility lies. Accesskit builds an overlay for screenreaders based on the configuration of the control nodes.
But you have a lot of control over control nodes. You can pick when and how they are focused, if they have a "Text" property like a label or button it will be read out by default, but all control nodes also have Accessibiilty properties for what the screen reader will pick up such as giving it a better name/description, or connecting objects to the same parent describer.
They also have an "Accessibility Live" property, which allows you to set them to Aria live regions, so will alert active screen readers whenever they are updated.
I personally do not use them a lot as during a game I expect any text that the player does not expect will be interrupted on accident and the other limitations they have. But there are games or situations where it's still very helpful.

Control Nodes in Godot

When working with Control nodes, their focus settings are crucial. Some control nodes you do not want to be focusable, others you of course do, then Godot has logic to automatically find where focus should go when pressing tab/arrow keys, but it's not always perfect.
So you can modify these properties both in the Editor and in the code. Allowing you to dynamically change where focus goes and what is and isn't focusable as the game is played. To get a better idea of focus, the linked documentation goes more in depth.

Keyboard/Controller Navigation and Focus

instructions

CTRL+F8 to go to the scene tab
Create a new scene. CTRL+N, CTRL+A, then select: Control
Control should be focused, press enter and rename it to MainMenu
Ctrl+A to create a new node, then pick VBoxContainer to create it as a child of MainMenu(Control)
VBoxContainer should be focused, press enter and rename it to MenuBox
Ctrl+A to create a new node, then pick Label to create it as a child of MenuBox(VBoxContainer)
Label should be focused, press enter and rename it to Title

MenuBox should be focused in scene tab, CTRL+F8 will take you to scene tab.
Ctrl+A to create a new node, then pick Button to create it as a child of MenuBox(VBoxContainer)
Button should be focused, press enter and rename it to Play

Title should be focused in scene tab, CTRL+F8 will take you to scene tab.
In inspector (CTRL+F6) for Title node, update the focus mode property to be All

Play should be focused in scene tab, CTRL+F8 will take you to scene tab.
In inspector (CTRL+F6) for Play node, update the text property to be Play

Quit should be focused in scene tab, CTRL+F8 will take you to scene tab.
In inspector (CTRL+F6) for Quit node, update the text property to be quit
Title should be focused in scene tab, CTRL+F8 will take you to scene tab.
In inspector (CTRL+F6) for Title node, update the text property to be Your game

MainMenu should be focused in scene tab, CTRL+F8 will take you to scene tab.
Ctrl + equal sign, then press enter to attach a script.
Copy the below code, then press CTRL+S to save everything.

Code Snippet 1

extends Control
@onready var title: Label = $MenuBox/Title


func _ready():
	title.focus_mode =Control.FOCUS_ALL
	title.grab_focus()

func _on_play_pressed() -> void:
	get_tree().change_scene_to_file("res://game.tscn")

func _on_quit_pressed() -> void:
	get_tree().quit()

Connecting buttons to code

Quit should be focused in scene tab, CTRL+F8 will take you to scene tab.
CTRL+F9 to go to Node tab
Focus Pressed and press enter twice, it will create an empty function or attach the signal to a function with the default name
Play should be focused in scene tab, CTRL+F8 will take you to scene tab.
CTRL+F9 to go to Node tab
Focus Pressed and press enter twice, it will create an empty function or attach the signal to a function with the default name