responsive UI add-on

for Godot v4.2.stable.official [46dc27791].

an improvement of the original Godot 3 add-on.

to see the add-on in action, run the demo scene under res://demo/main.tscn.

contents

• LICENSES
• recommendations
• add-on node types
  • FullRectControl
  • SafeAreaControl
  • DPIScaleControl
  • ScaleControl
  • MaxSizeControl
  • WidthBreakpoint
  • HeightBreakpoint
  • OrientationBreakpoint
• how to install this add-on

LICENSES

• all GDScripts in this Godot project are licensed under MIT License
• all icons in this Godot project are licensed under MIT License
• all screenshots in this Godot project are licensed under Creative Commons Zero 1.0

recommendations

• only use this add-on in projects with 'disabled' stretch mode, or else it may not work right
• use signed distance field (SDF) fonts for very clear text at very high scale factors
  • you can enable the project setting GUI -> Theme -> Default Font Multichannel Signed Distance Field if you use the default font
    • if you disable the setting, you will save a bit of storage space because Godot doesn't save unchanged (from the default) project settings

add-on node types

FullRectControl

resizes itself to the 'Full Rect' anchor preset every frame.

ideal as the scene root (or first CanvasLayer child), so that you don't have to press the 'Full Rect' anchor preset button again, every time you change the 'window size' project settings.

see the scene tree of the demo scene (res://demo/main.tscn) for example.

⚠️ since this node overrides its anchors every frame, you can't change its size to something other than the 'Full Rect' anchor preset

SafeAreaControl

resizes itself to the screen safe area if in fullscreen mode, or else to the parent control node.

⚠️ i highly recommend making a Control with the 'Full Rect' anchor preset the scene root — and placing the SafeAreaControl as the child.

because SafeAreaControl uses the parent control for size reference when the window is not in fullscreen mode, making the SafeAreaControl the scene root will have unexpected results.

i also recommend placing only one SafeAreaControl, because placing more may have unexpected results.

see the scene tree of the demo scene (res://demo/main.tscn) for example.

DPIScaleControl

resizes itself based on the screen's DPI. uses the parent control's size as the reference for the original size.

⚠️ i highly recommend placing the DPIScaleControl as the child of the SafeAreaControl — or a Control with the 'Full Rect' anchor preset if the project doesn't use SafeAreaControl.

because DPIScaleControl uses the parent control for size reference, making the DPIScaleControl the scene root will have unexpected results.

see the scene tree of the demo scene (res://demo/main.tscn) for example.

i also recommend placing only one SafeAreaControl, becaue placing more will have unexpected results.

ScaleControl

similar to DPIScaleControl but rescales itself based on a developer-chosen scale_factor, not the screen DPI. really useful for scaling UI based on a 'scale factor' game setting.

⚠️ ScaleControl uses the parent control for size reference, so making it the scene root will have unexpected results.

MaxSizeControl

rescales itself to either the parent control's size or its own max_* values, depending on which are smaller. by turning off restrict_width or restrict_height, this node can also restrict its size on only one of both axis.

⚠️ MaxSizeControl uses its parent control node for size reference, so making it the scene root will have unexpected results.

WidthBreakpoint

is visible if the parent control's width is between min_width and max_width, else it's invisible.

⚠️ WidthBreakpoint uses its parent control node for size reference, so making it the scene root will have unexpected results.

it also overrides any calls to set_visible() with its own logic, so you need to make its parent control invisible instead. see the scene tree of the demo scene (res://demo/main.tscn) for example.

HeightBreakpoint

is visible if the parent control's height is between min_height and max_heigth, else it's invisible.

⚠️ HeightBreakpoint uses its parent control node for size reference, so making it the scene root will have unexpected results.

it also overrides any calls to set_visible() with its own logic, so you need to make its parent control invisible instead. see the scene tree of the demo scene (res://demo/main.tscn) for example.

OrientationBreakpoint

is visible if the parent control's orientation (square / portrait / landscape) is set as allowed, else it's invisible.

⚠️ OrientationBreakpoint uses its parent control node for size reference, so making it the scene root will have unexpected results.

it also overrides any calls to set_visible() with its own logic, so you need to make its parent control invisible instead. see the scene tree of the demo scene (res://demo/main.tscn) for example.

how to install this add-on

※ target project is the Godot project that should have this add-on installed

1. copy the res://addons/responsive_ui/ folder from this project into the same path (res://addons/responsive_ui/) in the target project
2. open the target project in Godot
3. open the Project → Project Settings… menu
4. go to the Plugins tab
5. enable responsive UI plugin