Add a built-in UI scaling solution

[darthLeviN]

Describe the project you are working on

A godot project with a responsive UI.

Describe the problem or limitation you are having in your project

2D scaling is not perfect. i need pixel sharpness. and that can only be achieved with scaling turned off. but that will result in me scripting the entire stylebox and fonts and controls to make my ui responsive.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

float Viewport::ui_scale property.
Viewport::ui_scaling_mode property with {disabled, enabled, inherit}
new notification of "VIEWPORT_UI_SCALE_CHANGED"
new viewport signal of "ui_scale_changed"

all the controls will need to be readjusted to use the ui_scale multiplier if desired (with the options of disabled, enabled and inherit)

controls should use the multiplier for their styleboxes and font size as well.

fit_child_in_rect should also use the value.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

the user can create a script to decide the ui_scale.
then that ui will be used to adjust everything that wants the auto scaling. the ui will stay pixel perfect.

If this enhancement will not be used often, can it be worked around with a few lines of script?

no. i usually end up setting up a whole system just to start developing ui for a project.

Is there a reason why this should be core and not an add-on in the asset library?

it's an essential requirement. 2D scaling is not the solution. this is. while it's harder to implement it is the real solution.

In mobile applications languages like kotlin provide things like "dp" to solve this problem.

[Calinou]

2D scaling is not perfect. i need pixel sharpness. and that can only be achieved with scaling turned off.

This is already available in 4.2.beta: godotengine/godot#75784

float Viewport::ui_scale property.

This is also available since Godot 3.4: https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html#stretch-scale

If you only want the UI to scale and don't want the rest of 2D rendering to scale, multiply Camera2D zoom by the scale factor in _ready(). If you rely on automatic canvas_items scaling, see #6836 for a method that returns the automatically computed 2D scale factor (and update zoom when the window size changes by connecting get_viewport().size_changed to a function that updates the zoom).

[darthLeviN]

2D scaling is not perfect. i need pixel sharpness. and that can only be achieved with scaling turned off.

This is already available in 4.2.beta: godotengine/godot#75784

float Viewport::ui_scale property.

This is also available since Godot 3.4: https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html#stretch-scale

If you only want the UI to scale and don't want the rest of 2D rendering to scale, multiply Camera2D zoom by the scale factor in _ready(). If you rely on automatic canvas_items scaling, see #6836 for a method that returns the automatically computed 2D scale factor (and update zoom when the window size changes by connecting get_viewport().size_changed to a function that updates the zoom).

stretch-scale is different from what i'm saying.
what i'm referring to is similar to what godot's editor already has. it's called display_scale and in the c++ code its referred to by using EDSCALE

When doing ui, scaling at the transform level is a very bad idea. every control, from corner radius to font sizes need to be scale aware.
the most visible and easy to reproduce issue that you might run into when using scaling is using ViewportContainer.
a viewport container will try to set the viewport's size to it's "rect_size"'s resolution. and THEN the viewport gets scaled.
things like custom anti aliasing made for styleboxes and more will be affected as well.

If proper scaling is implemented for the game engine, it will transform it's core ui capabilities for high end usage.

[Calinou]

what i'm referring to is similar to what godot's editor already has. it's called display_scale and in the c++ code its referred to by using EDSCALE

This is a different and older approach to hiDPI scaling, which should really be phased out as it's inconsistent (not all controls benefit from it the same way) and can't be changed while the project is running. It's also editor-only anyway.

If you're thinking of changing the 2D scale factor to adapt to hiDPI displays automatically, #7968 is a better approach.

When doing ui, scaling at the transform level is a very bad idea. every control, from corner radius to font sizes need to be scale aware.

The 2D scale factor automatically takes care of font sizes, styleboxes, etc. You don't need to do anything special for things to scale correctly – it just works. The downside is that icons will be blurry at higher-than-default window sizes, but this can be alleviated by using a high default window size and using a lower window size override in the project settings.

the most visible and easy to reproduce issue that you might run into when using scaling is using ViewportContainer.
a viewport container will try to set the viewport's size to it's "rect_size"'s resolution. and THEN the viewport gets scaled.

This is an unrelated issue: godotengine/godot#61301

[darthLeviN]

what i'm referring to is similar to what godot's editor already has. it's called display_scale and in the c++ code its referred to by using EDSCALE

This is a different and older approach to hiDPI scaling, which should really be phased out as it's inconsistent (not all controls benefit from it the same way) and can't be changed while the project is running. It's also editor-only anyway.

If you're thinking of changing the 2D scale factor to adapt to hiDPI displays automatically, #7968 is a better approach.

When doing ui, scaling at the transform level is a very bad idea. every control, from corner radius to font sizes need to be scale aware.

The 2D scale factor automatically takes care of font sizes, styleboxes, etc. You don't need to do anything special for things to scale correctly – it just works. The downside is that icons will be blurry at higher-than-default window sizes, but this can be alleviated by using a high default window size and using a lower window size override in the project settings.

the most visible and easy to reproduce issue that you might run into when using scaling is using ViewportContainer.
a viewport container will try to set the viewport's size to it's "rect_size"'s resolution. and THEN the viewport gets scaled.

This is an unrelated issue: godotengine/godot#61301

with hidpi are the controls capable of knowing their real rect_size (after scaling) if they want to perform custom drawing?
and with hidpi will the internal rendering resolution of the controls be correct? or will they end up rendering at a higher resolution?
also does it work on every platform?
i don't understand why a reliable system should be phased out. if hidpi doesn't work well for something, there is no straightforward solution. if something doesn't work well in the old system, fixing it is very straightforward.

[Calinou]

with hidpi are the controls capable of knowing their real rect_size (after scaling) if they want to perform custom drawing?

Yes, custom drawing coordinates are adjusted automatically. If you need to perform custom drawing that does not scale with resolution for some reason, divide the coordinates by the scale factor in the script.

and with hidpi will the internal rendering resolution of the controls be correct? or will they end up rendering at a higher resolution?

They'll be rendered at a higher resolution but with the correct size relative to the window size.

also does it work on every platform?

Yes, it's platform-independent.

[darthLeviN]

and with hidpi will the internal rendering resolution of the controls be correct? or will they end up rendering at a higher resolution?

They'll be rendered at a higher resolution but with the correct size relative to the window size.

So basically if you set your design size to 4k, on a 1080p monitor you will be using 4 times the rendering power? and on lower resolutions that multiplier will only go up.

Is this correct? I'm not experienced with hidpi so i'm asking a question.

[Calinou]

So basically if you set your design size to 4k, on a 1080p monitor you will be using 4 times the rendering power? and on lower resolutions that multiplier will only go up.

Is this correct? I'm not experienced with hidpi so i'm asking a question.

No, rendering is scaled down if using the canvas_items stretch mode (not viewport though, by design).