Could need help to understand how UI works in this engine

Godot Version

v4.2.2.stable.official [15073afe3]

I like to have an UI and there multiple issues, first one: I have to work with this resolution (image 1), which is not the final resolution. Final resolution is 1920 x 1080, so working with something smaller is counterproductive, why? Because Image 2.
It does not represent the final product. You’re permanently stuck with readjusting UI elements. UI does not scale with screen size and unlike in Unity, which makes UI very simple, I could not find a suitable solution to this dilemma.

First I tried to setup the viewport to 1920 x 1080 but then in “Run Current Scene”, the topbar goes out of view and is unclickable, I can no longer resize the window and have to close with alt f4 … of course I could write some scripts etc. like Q to quit or S to resize… but too much headache right now.

Second I tried was to enable stretch mode to whatever, canvas item or viewport but having a lower resolution (1152 x 648) means reduced image quality, after all, you’re stretching a small image to a large image… I just don’t know how to work with UI in this engine.

Control Nodes anchor is set to Full Rec and ColorRec anchor is set to right anchor.

sigh, only one embedded media… okay

i believe this just you need to set the stretch mode of your window in project settings to canvas_item and make it expand

1 Like

Here’s a documentation page explaining how to support multiple resolutions Multiple resolutions — Godot Engine (stable) documentation in English

And here’s the section in the documentation that explain the UI User interface (UI) — Godot Engine (stable) documentation in English (the images may be a bit outdated but the information is still correct)

After coming from Unity, UI in Godot is still the most frustrating thing for me. It uses a weird mix of concepts and takes a lot of time to get used to.

For scaling, you could simply assign Window.content_scale_factor after calculating the desired percentage manually and by changing the content_scale_mode to 0 (disabled). That way the UI should always render in full resolution without getting blurred at the scale of your choice.

There is also an automatic scaling option (I think it was content_scale_mode 1 (canvas_items)), but I don’t remember how that exactly worked right now. I also think the behaviour was completely different for 2D and 3D and badly documented, so you’ll probably have to experiment around a bit.