UI Scaling (keep 16:9), 3D viewport any aspect ratio and scale resolution

Help UI
,
1

Godot Version

4.4.1

Question

Howdy :grin:

I am slightly losing my mind trying to get the scaling for my game working properly. I have tried many combos but just can’t seem to achieve what I am after.

What I desire is:

  • The UI rendered in 4k and scaled to the current resolution. Keeping a 16:9 aspect ratio.
  • The 3D game subviewport rendered at a customizable resolution, but always filling the window.

I feel like I am very close, as I have everything working apart from keeping the UI in a 16:9 aspect ratio. This is currently achieved by having the project stretch mode set to canvas items and expand, plus a couple functions.

func on_res_changed(cl: CanvasLayer) -> void:
	var cssize = Vector2(get_window().get_content_scale_size())
	cl.scale = Vector2(cssize.y/2160, cssize.y/2160)

get_window().set_content_scale_size(Vector2i(1280, 720)) # this being the target render res, not window size

If I change the stretch mode to “keep width”, the aspect ratio stays at the width I am after, however the SubViewport the game is rendered in seems to be limited by that width too and I end up with black bars.

Any help or direction would be greatly appreciated :sweat_smile:

2

Read this to understand which settings you need to set to adapt the content of the window to its size Multiple resolutions — Godot Engine (stable) documentation in English

Use an AspectRatioContainer as the root of your GUI to keep its aspect ratio.

1 Like
3

I have definitely read that already :grin:

But cheers for the tip on the aspect ratio container :eyes:

1 Like
4

The aspect ratio container has helped with keeping the aspect ratio, so cheers for that :slight_smile:

But now I just have the issue of actually keeping it center. This is likely due to my scaling I have in place, and unfortunately trying to move its position to the center of the window with DisplayServer.window_get_size() / 2 and other similar options seems to yield odd results :thinking:

1 Like
5

I think I have come to realise that the best way to handle this is using your suggested AspectRatioContainer and matching the UI to the project viewport width and height, and then using the stretch_shrink value on the subviewport container where I render my game.

The main downside to this is that it only takes an integer value -_-

I’m going to still leave this open as I still don’t really have a solution I am happy with. It should be possible to have a high res UI that is locked to a aspect ratio, and then be able to have a game viewport that can render at any aspect ratio even while at a lower resolution.

Side note, when dealing with a high project viewport resolution (seems to be needed if you want a high res UI), even when having it set to windowed it goes full screen, this could be a Linux issue though. It makes it difficult to check if my scaling is working properly at other aspect ratios.