Easy way to maintain a container's aspect ratio for any screen/window size?

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

Hi everyone. So, basically what I need is to have various UI elements fill in the extra space around an animated sprite as the app scales for different aspect ratios. The sprite in question is like a little TV embedded in the UI playing several layers of an animation inside which must maintain its aspect ratio. These layers are all inside a container and the container is set to fill and expand like all the other UI elements. Problem is the container does not have any built in function it seems to only fill and expand to fit its aspect ratio. This will be a problem if I release the app and the UI is all messed up on phones with different resolutions to what I’m editing with.

Is there such a container that would lock to a certain aspect ratio? Am I just not fully understanding the size flags and how they work? Or do I have to do this with code? And how would I do so, or where would I look in the documentation to figure it out myself?


I’m not exactly sure what you want to achieve so maybe I’ll miss the point completely with my comment here, but then again maybe it may help you:

There is a way to place your UI elements by utilizing anchors: Design interfaces with the Control nodes — Godot Engine (3.2) documentation in English. In “How to change the anchor” section there, they mention Layout menu which, among other options, has “Full Rect” option.

Now, if you place your UI control as a root node in the scene, you can set the UI control’s layout to “Full Rect”. This will stretch the control to the size of root viewport, which for the main scene is effectively the size of the game window or display, if game is in fullscreen mode.

If game window size (or display size, if in fullscreen mode) changes, your “Full Rect” root UI control will be resized with it. You now add your other UI controls as children of this “Full Rect” root control (of course, there can be only one root for a scene) and manage their positions and sizes relative to the “Full Rect” control (use various UI containers provided by Godot, use Layout menu on these controls as appropriate, etc)

zagortenej | 2020-05-10 15:27

Yes, I’m already aware of that. Thanks, though. The problem I have is that I cannot seem to control the children individually with such controls. I feel like this was something that could be done even in previous versions of Godot or at least something close to it? I may be wrong about that, it’s been a while.

fader | 2020-05-11 07:29