Responsive UI

Responsive UI in Godot 4.3+

All examples target Godot 4.3+ with no deprecated APIs. GDScript is shown first, then C#.

Related skills: godot-ui for Control node layout and themes, export-pipeline for platform-specific export settings, godot-project-setup for initial project resolution settings, input-handling for touch vs desktop input adaptation, localization for layout adjustments per locale, mobile-development for safe-area and notch handling.

1. Project Settings for Resolution

Configure base resolution and stretch behaviour in Project > Project Settings > Display > Window.

Key settings and their .godot/project.godot keys:

Godot 4.7+: Projects newly created in Godot 4.7 already default display/window/stretch/mode to canvas_items and display/window/stretch/aspect to expand (previously disabled / keep) — the recommendations above are now the out-of-the-box values. Projects created on older versions are unchanged (the property default is still disabled), so set both explicitly when upgrading. See the 4.7 migration guide.

These can also be set at runtime:

GDScript:

# Read current viewport size
var viewport_size: Vector2 = get_viewport().get_visible_rect().size

# Change stretch mode at runtime
ProjectSettings.set_setting("display/window/stretch/mode", "canvas_items")

C#:

// Read current viewport size
Vector2I viewportSize = GetViewport().GetVisibleRect().Size;

// Change a project setting at runtime (takes effect next frame)
ProjectSettings.SetSetting("display/window/stretch/mode", "canvas_items");

2. Stretch Mode Comparison

When to choose each:

• canvas_items — Default recommendation. Smooth scaling at any resolution. UI built with Control nodes and anchors responds naturally. Text and icons stay crisp at high DPI when combined with content_scale_factor.
• viewport — Locks rendering to the design resolution. Combined with integer scaling and nearest-neighbour filtering it gives a classic pixel-perfect look. Avoid for high-DPI displays unless you intentionally want chunky pixels.
• disabled — Use when you need full manual control, e.g. a 3D game where the UI must adapt to safe areas or unusual aspect ratios without Godot scaling it.

3. Aspect Ratio Handling

Set via Project > Project Settings > Display > Window > Stretch > Aspect or the window/stretch/aspect key.

expand with adaptive UI is the most versatile choice for games targeting both desktop and mobile. Anchor your HUD elements to screen edges so they follow the expanded visible area.

4. Pixel Art Setup

For crisp pixel-art games: Project Settings → Display → Window → Stretch → Mode = viewport, base resolution at native pixel size (e.g., 320×180), Window Size Override = 4× for editor preview. Use integer scaling to avoid sub-pixel blur.

See references/pixel-art-setup.md for full project settings, integer-scaling script, nearest-neighbour filter overrides.

5. DPI Scaling

For retina / high-DPI displays: set content_scale_factor to scale the entire UI proportionally. Query DisplayServer.screen_get_dpi() at runtime for adaptive scaling per device.

See references/dpi-scaling.md for the content_scale_factor recipe and DPI-querying patterns.

6. Mobile Considerations

Four mobile-specific concerns: touch input (tap, swipe, multi-touch), safe-area insets (notch / dynamic island avoidance), orientation lock (portrait/landscape pinning), virtual keyboard (handle show/hide to avoid covering UI).

See references/mobile.md for full GDScript on each concern, plus iOS / Android nuances.