Help with following tutorial on GUI creation

PowerUpTPowerUpT Posts: 1Member

Hello,

I'm attempting to learn how Godot works, and I am using the tutorial on the Godot docs website to do so. I am on the specific page linked, and I can't seem to understand why the result is not turning out as consistent as it is in the images.

I am on the "Add the progress bar" step, and the step before that created the HP graphic, number signifying HP, and a background for these. The "before image" shows this all set up (I'm aware I misspelled Gauge in the image), and in the hierarchy Title and Number are children of Background, which all make up this counter. They are under the Margin Container Count, which is in turn the child of the Horizontal Box Container called Bar. Also a child of Bar is the Gauge, which is a progress bar with no image assigned to it. Everything is the intended size at this point, and mirror the tutorial.

However, when an image is assigned to the progress bar, which is larger than the node Background, it resizes, along with all of its children, ruining what had been set up, as in the After Image.. I somewhat grasp the idea of how nodes work in Godot, but I am still new and learning, so I don't quite grasp the whole picture yet. Basically, if Gauge is a sibling node to Background, then why is its size affected by a change made to the Gauge node? And this doesn't seem to be happening in the tutorial; in those images, everything under Background is untouched. And the hierarchy is identical to what is in the tutorial.

Basically, I don't know if I made a mistake, if the tutorial is wrong, or if there's something else preventing this from happening. Any help would be appreciated. Thanks!

Before Image:
Before Image
After Image:
After Image

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file