I’m still relatively new to godot and I’m struggling understanding how control nodes work. I’m currently trying to make a “Pause UI” as follows:
-Create a new Scene “PauseUI” with the root being a control node.
-Set the control node preset to be full rect.
-Under the control node, add a sprite2D to act as the menu’s background.
-under the control node, add several buttons, changing the green anchors to be full rect as well.
Then on my main scene for the game, I’m adding it to the tree via instantiation.
This seems to cause several weird behaviors which make me think I’m not going about this the right way. Are we able to mix control nodes with the sprite2d to use as a background, or is there a different way?
I’m also confused because if I use the blue rectangle in the editor while creating the pauseui scene, when i instantiate it in the game scene it doesnt transfer over. I’ll have the pauseui scene centered in the blue rectangle, but when i instantiate it, its shifted over and also provides me with new green anchors that don’t correlate with the pause menu scene.
I guess I’m just struggling how to properly implement ui elements and menu’s. At the end of the day I just want some buttons, a sprite, and some text to stay consistent.
no. do not mix Control’s and Node2Ds. Controls must only have Controls as children unless needed for something very special.
for a background use panel or texture control.
no.
there are 3 types of Controls:
Containers
not containers
special controls
you create a container and add things like buttons inside. the buttons will resize the container to their prefered min size or cover the area if set to expand.
nest containers inside containers to create more complex things.
a common way is to mix Vboxcontainers inside HBoxcontainers and vice versa.
use margin containers to add a margin.
use panel containers, scroll containers, etc.
another way is to have a simple control or non container controls and have controls anchored inside.
add a Control, add a hboxcontainer, add buttons to the hboxcontainer. set the hboxcontainer to stick to the bottom of the screen, or the corner.
do not mix controls and node2Ds.
there are controls for everything, learn how to use them. there are several “every control node” tutorials on youtube, or read the docs.
also, use themes.
create a theme on the first parent control, there you add all the nodes you are going to change, and you can set styleboxes, colors, fonts and sizes.
when you add a new button, it is always going to use this theme. it is a very powerful tool.
if you need a different style on some control, you create a variation and set it on the control node.