Intro to UI containers: Godot engine tutorial

Learn how arranges UIs in Godot with the powerful container nodes
----
30 tutorials series! 29/30

The containers are at the heart of Godot’s UI system. They automatically arrange their children in a certain way (in a row, a column, constrained position, etc.). You can nest them, change their position in the hierarchy, and the system moves and scales all the UI elements for you. The default containers will cover your most common needs. For anything more specific, you can extend the base container class and create your owns.

This tutorial is supported by:

[Gdquest]

More on containers:
Containers are not covered very well in the documentation. Yet, they are one of the backbones of Godot’s UI framework. As with many other features, you can achieve a lot in the scene tree and the inspector already. Unless you have advanced and specific needs, you won’t need a lot of code. This makes it accessible to the designers working in your team. And it’s still flexible!

Because the containers update their children’s values automatically, you shouldn’t try to position or scale your visual UI components (textures, buttons, etc.) by hand: as soon as you change the visibility or the position of a node in the hierarchy, the UI will update, and your components will change position and size as their containers dictate.

The built-in nodes will have you covered for the most part. But if you need a behaviour that’s not there by default, you can code it yourself using the base container class.

[Warionator]

I don't understand, anything I put in containers just disappears and I can't do anything.

[kristopherhokanson]

@GDQuest Why do my anchor and margins reset when using containers?

[noiJadisCailleach]

This is one of, if not the worst tools in Godot. It's supposed to be really, really simple. But it's one of the most hard to understand tool to manipulate in Godot.
All you want to do is align sprite nodes in your scene with Control nodes like HBoxContainers?

Nope. Prepare for unnecessary headaches.


Worst of all, it forces you to follow creating a UI via it's configuration. Biggest element to smallest element. You can't do it the other way around. Because once you change the parent element's properties, it reverts it's child element's properties back. You have to reparent the child property to somewhere higher than it's current parent first, or maybe even root, before you want to change it's properties. Only then can you put it back to where you want it to be. Such a pain.

[thxenos]

Thank you. I can't say that enough. Thank you.

[wwjdd]

In this you say we need to update the inspector. But you don't say what buttons you actually pressed to do this. I have been searching for some type of refresh button but I have not found it yet. What might that be?

[kacperNFS]

Your start project doesn't quite load the textures correctly so it basically creates a mess also it doesn't include the wPatch9frames

[kunai]

what would you say is the best way to seperate ui elements so that 2/3 of the screen are covered with one element, and the rest is occupied by the other elements?

[MakuDraw]

Hi! i'm thinking to start with Godot as i have experience with Unity. Do you have any references of high quality games made in less than 72 hours? My focus is in find a tool flexible with good iteration times in order to make a 2D game. I know that Game Maker can reach my iteration expectation but i read that GMS doesn't have a lot of things like state machines, animator, sound mixer and a proper UI editor so i want to know is a trained Godot developer could made a cool game in less than 3 days.

Regards and i suscribed! :D

[ziggyzoggin]

with labels you can center text. how do i do that for rich text labels?

[edd_]

And how can I make a container with scrolling by touch?

[masonjerkins]

Hello, brave Godot soldier! I am very new to the Godot community. I have a bit of experience in Unreal Engine, but converting to Godot has me lost, since the community is small, with very few amazing, high quality, and most importantly, "updated" such as yourself. Anyway, it would be great if you could do a tutorial on 2D platforming background parallax, or basic attacks, etc. in a way similar to 2008's "Dolphin Island" that was created in this same engine. Just a suggestion.

And if not a tutorial, do you know of any documentation that could point us "noobs" in the right direction?

[diegohiroshiysusvideos]

*It work for to slots UI casino?. Regards.*

[neku]

Can I give the container a texture? if so, how?