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:

Setting	project.godot key	Recommended value
Viewport width	window/size/viewport_width	1920 (or your base design width)
Viewport height	window/size/viewport_height	1080 (or your base design height)
Stretch mode	window/stretch/mode	canvas_items (most games)
Stretch aspect	window/stretch/aspect	expand (fill screen) or keep (letterbox)
Scale factor	window/stretch/scale	1 (adjust for pixel art integer scaling)

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

Mode	project.godot value	Rendering	Best For
canvas_items	"canvas_items"	Viewport rendered at design resolution, then upscaled — UI and 2D nodes scale smoothly	Most 2D and UI-heavy games
viewport	"viewport"	Entire viewport is rendered at design resolution and stretched; no sub-pixel blending	Pixel art games needing pixel-perfect output
disabled	"disabled"	No automatic scaling; every Control node must handle its own layout	Complex custom scaling, 3D games with a Control HUD

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.

Mode	Visual Result	When to Use
keep	Letterbox (black bars top/bottom) or pillarbox (bars left/right) — design rect is preserved exactly	Games with a fixed layout that must not be cropped (e.g. score-based arcade, puzzle)
expand	Screen is fully filled; the visible game area grows on wider or taller displays	Action games, platformers — more visible play area is a bonus, not a problem
keep_width	Width is fixed; height expands on taller screens (mobile portrait)	Portrait mobile games where horizontal alignment is strict
keep_height	Height is fixed; width expands on wider screens (landscape)	Landscape games where vertical alignment is strict (e.g. side-scroller HUD)

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.

---

7. Adaptive Layouts

Anchor presets + Container nodes do most of the work. Use size_flags_horizontal/vertical (FILL, EXPAND, SHRINK_CENTER, SHRINK_END) to control how children consume container space. Detect runtime resolution changes via get_viewport().size_changed.

See references/adaptive-layouts.md for the anchor + container strategy, resolution-change detection, and the full size_flags reference.

---

8. Testing Multiple Resolutions

Editor Preview Sizes

In the editor viewport, use Editor > Editor Settings > Run > Window Placement to start the game at specific sizes, or use the viewport size selector in the 2D editor toolbar.

Add common test sizes under Project > Project Settings > Display > Window > Size > Test Width/Height to preview in the editor.

--resolution CLI Flag

Launch from the command line with an override resolution:

# Windows
godot.exe --path "C:/projects/mygame" --resolution 1280x720

# Linux / macOS
godot --path /projects/mygame --resolution 1280x720

# Run an exported binary at a specific size
./mygame.x86_64 --resolution 375x812

Common Test Resolutions

Resolution	Aspect	Common Use
1920×1080	16:9	Standard 1080p desktop / TV
2560×1440	16:9	1440p high-DPI desktop
1280×720	16:9	Low-end desktop / minimum target
640×360	16:9	Pixel art base resolution (2× of 320×180)
2732×2048	4:3	iPad Pro — tests non-16:9 aspect ratios
390×844	~19.5:9	iPhone 14 portrait
844×390	~19.5:9	iPhone 14 landscape
1080×2400	20:9	Android tall portrait
360×800	~20:9	Android low-end portrait

Strategy: Always test at your base design resolution, one resolution wider than 16:9 (e.g. 21:9 ultrawide), and one taller (e.g. mobile portrait). These three cases catch the most layout bugs.

---

9. Checklist

• Base viewport size (viewport_width / viewport_height) matches the design canvas in the editor
• Stretch mode chosen deliberately: canvas_items for most games, viewport for pixel art
• Aspect ratio mode chosen: expand unless fixed-layout content requires keep
• Pixel art games use viewport stretch + Nearest texture filter + integer content_scale_factor
• All HUD Control nodes use anchors anchored to the nearest edge, not fixed position values
• custom_minimum_size set on buttons and interactive elements to prevent collapse below tap target size (minimum 44×44 px recommended for mobile)
• size_flags_horizontal / size_flags_vertical set to SIZE_EXPAND_FILL on elements that should fill space
• get_viewport().size_changed signal connected where layout must respond to window resize
• Safe area insets read from DisplayServer.get_display_safe_area() and applied to a root MarginContainer
• content_scale_factor set at startup based on DisplayServer.screen_get_dpi() for high-DPI / Retina displays
• Touch input handled via InputEventScreenTouch / InputEventScreenDrag, not mouse events alone
• Orientation locked to the correct mode (SCREEN_LANDSCAPE / SCREEN_PORTRAIT) or SCREEN_SENSOR where rotation is intended
• Virtual keyboard height queried after show and used to shift UI content upward on mobile
• Tested at minimum: design resolution, one ultra-wide (21:9), and one mobile portrait resolution
• --resolution flag used in CI or playtest scripts to automate multi-resolution smoke tests