General help with UI

[vallith]

Godot Version

4.2.2

Question

Hi, I’m struggling to understand the correct usage of UI elements in Godot. I’m pretty new to the engine, but especially new when it comes to UI.

I’m attempting to have the UI in the editor match what I see when I am in play mode. In order for the UI to match up, I have to put it down and to the right, and when I click play it moves/scales to the right position.

I’m not changing the scale or position of anything via code when entering play mode, and I can find a way to get the UI to show up where it should be in the editor - but when I click play it doesn’t remain there.

I made this post on reddit if you want to check out images and other details I’ve already written up.
https://www.reddit.com/r/godot/comments/1ei1ti5/struggling_to_have_ui_match_up_in_editor_vs_when/

It’s hard to explain exactly what I need help with, but I think it may just be a better general understanding of how to use and structure UI elements.

Thanks for taking the time to read, any tips would be greatly appreciated.

[tayacan]

For a better general understanding, I quite liked this video - it starts out with some examples of, like, the “naive” way to do it, and then shows how to improve it.

Generally, the various container elements are great for positioning. My usual recipe for placing something in the corner of the screen is:

- CanvasLayer
  - Control node
    - MarginContainer
      - Thing you want to be in the corner

Set the control node to use full rect layout, tell the MarginContainer to have its anchor in whatever corner you want your thing to be in, and then set the margins to give a little space around your UI element. That way, you never have to manually position a thing by dragging it with the mouse, and you’ll never accidentally mis-align stuff.