Not sure how to change the layout of the nodes

Help
,
1

Godot Version

4.6.1.stable

Question

I’d like the “Buy airship” and airship count to be on the left of the screen, with the exit button on the right, while the “Welcome” label stays on the center of the top of the screen. Below is what I ahve so far:

image
image1919×357 48.6 KB

This is how I have the nodes organized:

image
image254×135 4.04 KB

Both the HBox and Vbox nodes have Center alignment. I’m not sure how to keep the “Buy airship” and airship count to the left corner, with the exit button on the right corner, with the welcome label on the center of the viewport.

2

Use extra Control nodes between the elements you want to push to each side with their Control.size_flag_horizontal set to SizeFlags.SIZE_EXPAND_FILL. To do this from the editor enable Expand under Layout/Container Sizing

1 Like
3

Check out this guys videos!

1 Like
4

Thank you. It’s a step in the right direction, but this was the result:

image

This is how the nodes are arraigned:

image
image269×310 14.7 KB

And these are the container sizing settings of the three control nodes:

image
image306×156 3.86 KB

How do I ensure the “Exit” button stays at the right side? And how do I ensure the “welcome_label” stays centered in the middle?

5

I believe they meant not as parents of the other nodes, but siblings.

HBoxContainer
→ VBox | welcome_label | spacer_control | Exit

You can set the spacer_control node to expand

6

This video helped me a lot: https://www.youtube.com/watch?v=1_OFJLyqlXI&t=725s

1 Like
7

Understood, that resolved it, thank you!