godot-ui-control Checked

Build Godot 4.7 user interfaces with Control nodes: anchors and offsets for responsive layout, Container nodes (VBox/HBox/Grid/Margin) for automatic arrangement, Theme resources for consistent styling, and keyboard/gamepad focus navigation. Use when laying out a HUD, menu, or UI in a Godot project, working with Control/Container nodes, anchors, themes, or focus in a .tscn.

Godot UI / Control nodes (4.x)

Lay out responsive UI with Control anchors and Container nodes, style it with a

Theme, and make it navigable by keyboard and gamepad. Targets **Godot 4.7**.

Build Godot 4.7 user interfaces with Control nodes: anchors and offsets for responsive layout, Container nodes (VBox/HBox/Grid/Margin) for automatic arrangement, Theme resources for consistent styling, and keyboard/gamepad focus navigation. Use when laying out a HUD, menu, or UI in a Godot project, working with Control/Container nodes, anchors, themes, or focus in a .tscn.

Godot UI / Control nodes (4.x)

Lay out responsive UI with Control anchors and Container nodes, style it with a

Theme, and make it navigable by keyboard and gamepad. Targets **Godot 4.7**.

When to use

• Use when building HUDs, menus, inventories, dialog boxes, or settings screens with

Control-derived nodes; arranging UI that adapts to window size; theming; or wiring

focus navigation for controller/keyboard.

**When *not* to use:** in-world 2D nodes (Node2D/sprites) → godot-nodes-scenes;

animating UI transitions → godot-animation (Tween); genre UIs like card hands →

card-game/visual-novel. For full input rebinding → input-systems.

Core workflow

1. **Use Control nodes for UI**, not Node2D. Controls have a rect (position + size),

anchors, and participate in focus/theming.

2. **Anchor for responsiveness.** Anchors are fractions (0–1) of the parent rect that the

Control's edges stick to. Use the editor's **Layout** presets (Top-Left, Full Rect,

Center, etc.) instead of hand-placing pixels.

3. **Let Containers position children.** Put children in a VBoxContainer,

HBoxContainer, GridContainer, MarginContainer, etc. — the container sets their

position/size; you control flow with size_flags. Don't set child anchors inside a

container (it overrides them).

4. **Style with a Theme.** Assign a Theme resource on a top Control; children inherit

it. Override per-node with theme overrides only when necessary.

5. **Wire focus** so gamepad/keyboard can move between buttons; set a default focused

control and define neighbors or rely on auto-neighbor.

6. **Connect signals** (pressed, toggled, text_submitted, value_changed).

Patterns

### 1. Responsive layout with anchors (code form)

extends Control

func _ready() -> void:
    # Stretch this panel to fill its parent (equivalent to the "Full Rect" preset).
    anchors_preset = Control.PRESET_FULL_RECT
    # Or set anchors manually: all four edges at the parent's far corners.
    # anchor_left = 0; anchor_top = 0; anchor_right = 1; anchor_bottom = 1

### 2. A menu built from containers + button signals

extends VBoxContainer    # children stack vertically, auto-sized

func _ready() -> void:
    for child in get_children():
        if child is Button:
            child.pressed.connect(_on_button_pressed.bind(child.name))
    # Give the first button focus so a gamepad can navigate immediately.
    if get_child_count() > 0:
        (get_child(0) as Control).grab_focus()