HBoxContainers spacing keeps resetting

+1 vote

I followed and completed the "Design the GUI" guide over at https://docs.godotengine.org/en/stable/getting_started/step_by_step/ui_game_user_interface.html.

But now I decided I want to remove the vertical space between the two HBoxContainers ("LifeBar" and "EnergyBar") so that the two bars are touching because that's how I want them to be in the game I am making. However, whenever I click to go to a new tab and click back the gap re-appears. Why? And why 4 pixels? How can I make the two bars touch?

edit: fixed hyperlink.

Godot version Godot Engine v3.3.stable.official
in Engine by (43 points)
edited by

My guess is that the nodes are in a container node, and thus any resizing of child nodes is futile. Maybe the HBoxContainer has some constants or properties you can change, i.e. change the separation property to zero or even a negative number to shrink the gap.

Btw, it looks like the URL posted is a broken link. Here's an updated link to the article in question.

by (3,144 points)

Nested containers, result of following the "Design the GUI" Godot tutorial.

Yes, there are several nested containers, the root of all is a margin container, and I can move this around and the changes can stay. However, I have tried changing pretty much every parameter of the margin container, and there doesn't seem to be any way to bring the bars closer together. I'm getting the impression that this 4-pixel-wide gap between every VBoxContainer item is just built-in.

It's just that, strangely, when I tried putting together items in an HBoxContainer (rather than VBox-), there wasn't any gap and the items were completely flush with each other.

I will probably get around this problem for now by manually placing the HUD elements without the use of any containers, but I'm hoping for an actual solution. I'm sure I must have overlooked something obvious but I just can't seem to find it right now.

(Also, it seems like the URL broke because of the period at the end, sorry).

by (43 points)

1 Answer

+1 vote
Best answer

Custom Constants: Separation

Never mind I found it, there's a section called "custom constants" in the VBoxContainer called "separation" like you said. It's not letting me mark your comment as an answer so I'm leaving this for posterity for now, sorry.

(And it seems like the reason I didn't have the issue horizontally, was because I was overlapping nodes on top of each other).

by (43 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.