Layout appears of screen (Godot 4.4)

Godot Version

`4.4

Question: When I run the app, UI appears of screen. I already tried a bunch of things. When I press F6, it shows layout on screen as I intended, but when play full game, it goes off screen. And Grok 3 couldn’t help. It most be related to main scene I guess, but I don’t know.

Is the UI a child of a separate CanvasLayer than the camera?

Should I make a child in the main scene?

There is no camera

what is the position of the GUI in the main scene?

it is in the screenshot, in inspector position shows 0, 0.

hi, you need to set a window size and viewport stretch to either canvas_items or viewport

then you need to set anchoring for each Control node that is not child of a container, this can be set to a corner, a side, the center of the screen or a form of scaling.

you can not and should not set control position manually other than by code, instead use a container node.
in order to add a padding to a side of a node, use a margin_container.
to use a margin container you need a theme. create a theme in the first control node, create a theme_variation for every different margin_container (like, one that must have 100 pixels to the left), then go to your margin_container, go to theme_type_variation, and type the name you chose for your variation. (this will get easier with later releases of godot, I’m working on it myself).

to create a theme variation, click the + button in theme, type a unique name (like red_button or left_margin_container, whatever you like), then go to the last tab and select a node type (in this case it would be margin_container).

another way is to use a Control or container with minimun size, and then anchor your node to the right of it.

I did as you say

I changed MainMenu control node to VBoxContainer and add a MarginContainer, but it still haves the same problem. I think is the Main - node 2D- that it makes the other nodes adjust to it’s size (0, 0). But Godot gives warning to not resize main node.
Here is a screenshot of the container inspector

I found the problem with the gm_customization scene:


If I set anchor as Full Rect, then it will count as “everything inside the first anchor”, that is the main node in the main scene, since it is by default [top left], it changed the control position of the other scene to that position. So by adjusting the control node anchor to top left, equal to main scene, without the need of change size, it appears the full scene on viewport (as intended). Still, I don’t know if this will affect viewport when change devices, I will need to check it once I export it to mobile.

the first Control should be a Control and be set to cover the screen (Full rect).
a VBoxContainer is a container, it will resize to fit it’s children.

also, Controls should only be children of other controls (inherited from control), when you add a node2D you break the chain.
the main node is fine as Node2D, but if this is the UI you want it to be a Control and instantiate the scene in on a 2D or 3D world.

yes, the first Control has to be set to Full Rect, unless it’s a node that will be instantiated on the UI, like a button.

play the scene and drag the edge of the screen, it will change the size of the window and deform the items. change the properties in project settings to get the changes in resolution you want.
you might also want to look at the direction of the window, by default it’s set to horizontal, but there is a vertical (portrait) mode for mobile. this can also be changed by code.

1 Like

Yup, is resolved. Thanks for your time!