How do I create a horizontal scaling button?

Help
1

Godot Version

4.7

Question

How can I build a menu that is horizontally centered on the screen and has a list of buttons inside that are centered in this container and have a localized text? I’ve got something to work but I think I fail to really understand the UI system.

I have a MenuButton that is set up as MenuButton → HBoxContainer → NinePatchRect.

I can’t see the text label on top, nor is it centered… :frowning: How do I achieve this? Is there any good step by step UI tutorial that shows how to create different, common, UI patterns?

image
image388×397 76.4 KB

2

You should check the documentation:

You can also check this video:

But, to solve your issue:

CenterContainer
    ┖╴VBoxContainer
        ┠╴Button
        ┠╴Button2
        ┠╴Button3
        ┠╴Button4
        ┖╴Button5

You can change the Button styleboxes to StyleBoxTexture which support nine-patch textures.

3

This is exactly my setup. But the button is displayed wrong. Unfortunately, I can’t post more than one image at the moment, it tells me because I’m a new user.

CenterContainer
    ┖╴VBoxContainer
        ┠╴Button
        ┠╴Button2
        ┠╴Button3
        ┠╴Button4
        ┖╴Button5

This is the button setup:

image
image1950×951 151 KB

I struggle to understand how to make the button fit and scale horizontally into the space.

4

It’s not. My setup uses a CenterContainer to center its contents and it uses a VBoxContainer to stack its Button children vertically.

I honestly don’t know what you are trying to do in your setup. It makes no sense.

Read carefully the link I posted above and check the video if you still have questions about the UI system in Godot.

5

As I wrote, I can’t post more than one screenshot. I’m using your setup for the menu. The button itself is an instance of MenuButton and its setup is what I’ve posted before. As you can see, the labels appear correctly, but not the background of the button. I’ll check the manual again and watch the video when I have time tonight.

image
image1265×1036 254 KB

6

Why are you using a MenuButton? These type of buttons are for very specific use-cases and, unless you need each button to show a PopupMenu when clicked, you should use a normal Button and change its styleboxes instead of using a NinePatchRect