GUI — Godot Control Nodes

Skill codes on this page

The two codes in one line: C627 — your program has a working GUI built from Control nodes. C633 — you chose the right control for each piece of data and wired it up with signals and runtime property changes.

C627 — Graphical user interfaces

Definition. A type of user interface that allows users to interact through visual elements such as windows, icons and buttons.

In Godot a GUI is a scene of Control nodes:

Main (Control)
├── ZoneInput       (LineEdit)
├── CalculateButton (Button)
└── ResultLabel     (Label)

extends Control
# C627 — GUI: this scene of Control nodes is the user interface

Earns the tick: the program runs with a usable interface built from Control nodes — input, action, output visible on screen.

In connect-go-dots — the gallery screen (grid.tscn):

Gallery (Control)
└── Margin (MarginContainer)
    └── Rows (VBoxContainer)
        ├── Title  (Label)
        └── Photos (GridContainer, 3 columns)
            ├── Photo1 (TextureButton)
            ├── …
            └── Photo6 (TextureButton)

The containers (MarginContainer, VBoxContainer, GridContainer) do the layout, so the controls stay aligned at any window size.

C633 — Relevant GUI controls

A control is relevant when it matches the data it collects or shows. You make it work by listening to its signals and changing its properties while the program runs.

extends Control

func _ready() -> void:
    # C633 — signal: runs when the user clicks the button
    $CalculateButton.pressed.connect(_on_calculate_pressed)

func _on_calculate_pressed() -> void:
    var zone: int = int($ZoneSpinBox.value)   # C633 — SpinBox: zone is a number
    var fare: float = FARE_TABLE[zone]
    # C633 — property: sets the label's text at runtime
    $ResultLabel.text = "Fare: $%.2f" % fare

(The C627 sketch above used a LineEdit called ZoneInput. Zone is a number, so the relevant control is a SpinBox — making that upgrade is exactly the C627 → C633 step.)

Earns the tick: controls chosen to fit the data (per the table above), at least one signal connected in code, at least one property changed at runtime. Doesn't: a LineEdit for everything, or a layout that never responds to the user.

Custom signals count as strong C633 evidence — a signal is Godot's version of the glossary's event ("a special type of method that is called when an object's state changes"):

signal fare_calculated(amount: float)   # C633 — custom signal

func charge(fare: float) -> void:
    balance -= fare
    fare_calculated.emit(fare)

In connect-go-dots — every kind of C633 evidence in 25 lines of code:

(%Photo / %Photos is scene-unique-name lookup — tick "Access as Unique Name" on the node.)

Also see: dodge-the-creeps — hud.gd (Labels, Buttons, timers) and player.gd (signal hit).

Check Your Understanding

1. C627 vs C633 — one sentence each.

2. A yes/no setting (like concession) belongs on which control?

3. Name the three kinds of C633 evidence.