4
\$\begingroup\$

Is it possible to achieve this behavior with a container in Godot?

enter image description here

To explain in more details, the black box is the hypothetical container I'm looking for and the red boxes are children control nodes: the children control nodes are evenly distributed in the container, starting from the very left and ending at the very right.

I already looked at the GridContainer, and while I can get close by playing with the size flags of the children control nodes, this isn't exactly the behavior I described.

My question is only whether this is possible with the default nodes provided by Godot. I'm not asking how to create a Godot scene with this behavior.

I'm using the new Godot 4 if that makes any difference.

Improve this question
\$\endgroup\$
3
  • \$\begingroup\$ This is a no. None of the containers do this. It looks like something HBoxContainer should be able to do, but no. It could make a good proposal (feel free to post on github.com/godotengine/godot-proposals/discussions or consider writing a proposal at github.com/godotengine/godot-proposals/issues). I don't think a "no, you can't do that" is a good answer. We can get this behavior, for example, by making a custom container. \$\endgroup\$
    – Theraot
    Apr 1 at 18:59
  • \$\begingroup\$ Alright, thanks. You can either post that as an answer (and I'll accept it) or I can reformulate my question to be more open-ended. \$\endgroup\$
    – Eldy
    Apr 1 at 19:10
  • \$\begingroup\$ Yes, the BoxContainers do support this. Add empty Control's in between the nodes and set their size_flags_horizontal to fill. \$\endgroup\$
    – hola
    Apr 4 at 20:18

2 Answers 2

Reset to default
3
\$\begingroup\$

The solution to your example is to create empty Controls, we'll call them "Spacer"s, with their horizontal container sizing set to fill and expand placing them in between the visual nodes.

Here is an example scene tree:

HBoxContainer
- RedSquare1
- Spacer1
- RedSquare2
- Spacer2
- RedSquare3

You can play around with this composition and the various sizing settings. For example, you can have the first leading RedSquare1, a space, then the remaining RedSquare's right aligned by simply removing Spacer2.

Another point of flexibility is to adjust the Spacer's Stretch Ratio. You can have one spacer take up the specified ratio compared to the other nodes.

This layout model is very similar to CSS's FlexBox model. Where we have the flex container and the items are the child nodes.

Hope this helps.

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Ah, that's clever. I'll try that. \$\endgroup\$
    – Eldy
    Apr 5 at 9:28
0
\$\begingroup\$

Not sure why nobody mentioned this yet, but this functionality is available under Theme Overrides > Constants > Separation on Hbox, Hflow, etc. Containers:

enter image description here

enter image description here

Improve this answer
New contributor
dmbro is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
\$\endgroup\$
2
  • 1
    \$\begingroup\$ It looks like this has to be set manually to a specific spacing distance. Can you show how you would automatically calculate the right spacing based on the total width of the container and the number of children? \$\endgroup\$
    – DMGregory ♦
    Sep 19 at 9:48
  • \$\begingroup\$ @DMGregory Not sure exactly the use case you're referring to, or what the 'right' spacing would be, but you can access the separation value through code using set("theme_override_constants/separation", some_value) . So you could do a calculation based on width/num of children and set the separation value to the value you calculate. \$\endgroup\$
    – dmbro
    Sep 19 at 20:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .