Best way to "scale" UI based on DPI?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Richard Szibele

If I develop a UI that should be usable on both the desktop and phone, then I run into the issue of the UI being tiny on phones.

I looked through the source code of how the Godot editor handles this problem, and they check for the DPI and set the “display_scale” accordingly. However, this also seems to require you to tediously calculate every single UI margin, set theme constants and spaces, which does not seem like a great or reusable solution (Github search for “EDSCALE” (editor scale)).

Is the way the Godot editor handles scaling currently the only way to do this? It seems to me that this should be something available in the engine that you could set. I did try the HiDPI setting (both the one for the theme and the one not for the theme), but the UI was still tiny on the phone.

Here is an example of what happens when you run Godot on a desktop and phone with a UI designed for a 480x640 viewport.

Laptop (screen: 1366x768; actual window: 480x640):
enter image description here

Phone (screen: 1080x1920; actual window: 1080x1920):
enter image description here

:bust_in_silhouette: Reply From: Calinou

Try using the 2d stretch mode and expand stretch aspect in the Project Settings. See Multiple resolutions in the documentation for more information.

I agree with this. Also pick a small base resolution like 480x854. This will help with the scaling.

hidemat | 2021-07-20 03:27