godot-ui-control

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