GUI with elements at two different screen position

Dufffit

Hey everyone, I am playing around with Godot and already have quite a lot of fun with the engine. At the moment I try to understand how GUI implementation works.

To be specific: I want to create a simple GUI that has a status section in the upper right corner and an menu bar with several segments at the bottom (a bit similar to Stardew Valley for example).

Also in best case I don't want to "hardcode" the position of the Elements and have the GUI scalable to Screensize.

But I am struggling a little bit with the question about what root node would be the best and how I can arrange such a GUI in general. I looked for some tutorials and made some experiments with a margin container and some HBox and VBox Containers, but was not really able to get the GUI I wanted. The main issue at the moment is, that I don't know how I could anchor one part of the GUI to the upper right and the other part to the bottom (center or left).

Does anyone have a good advice for me? Some keywords would already help :)

Megalomaniak

This discussion was caught in the moderation queue since you have not confirmed your account yet.

Upon creating your account you should have received an account verification email. The confirmation email may have been incorrectly flagged as spam, so please also check your spam filter. Without confirming your account, future posts may also be caught in the moderation queue. You can resend a confirmation email when you log into your account if you cannot find the first verification email.

If you need any help, please let us know! You can find ways to contact forum staff on the Contact page. Thanks! :smile:

Megalomaniak

You can use a mix of HBox and VBox containers to achieve what you want. then just add relevant control nodes as children respectively where you want.

Dufffit

@Megalomaniak said: You can use a mix of HBox and VBox containers to achieve what you want. then just add relevant control nodes as children respectively where you want.

Thank you for your answer! So is the idea, to combine HBoxes and VBoxes in a way, that the gaps between the UI Elements are empty Boxes?

cybereality

It might be a good idea to read this if you haven't seen it yet. https://docs.godotengine.org/en/3.3/getting_started/step_by_step/ui_game_user_interface.html

Dufffit

@cybereality said: It might be a good idea to read this if you haven't seen it yet. https://docs.godotengine.org/en/3.3/getting_started/step_by_step/ui_game_user_interface.html

Thank you, I've seen and read it, thats where I good the idea with the Margin Container and the H/VBoxes from.

cybereality

As @Megalomaniak says, it's mostly just a matter of nesting VBoxes and HBoxes.

Megalomaniak

@Dufffit said: So is the idea, to combine HBoxes and VBoxes in a way, that the gaps between the UI Elements are empty Boxes?

If that is the result you want to see, yes.

cybereality

Yes, if you need spacers, add a Control node and set the size flags to expand.