[Tạo 2D Platformer Game với Godot] Part 17: Creating Menus

In this section, I will show you how to create a Game Menu for this Platformer game. In this part I will show you some new nodes of Godot’s UI.

Then the first thing is you create yourself a new scene with the Control Node as the root node and rename it to Menu.

And add a new node that is Vboxcontanier.

VBoxContainer: this is the node that will create an area like a container and it will make the nodes inside it all arranged in vertical order.

HBoxContainer: Hbox is the opposite of Vbox in that it is arranged horizontally.

If you notice, there are letters V and H at the beginning of the name, and this V – H is the name of the two horizontal and vertical axes in English.

Then you select Layout at the bottom of the toolbar and select full rect

After you select full rect it will look like this.

I will rename it for easy identification.

And I added 2 more Vbox and renamed it 1 PhanDau and 1 PhanCuoi.

About the reason I added these 2 is because I want PhanDau to be the part I will add Text to VD like game name.vv. As for PhanCuoi, I will add a button to click.

I will add 1 more node Hbox and rename it TieuDe.

Since I want to create a game title, I will use a node that allows me to display the text that is Labels.

To the right there is a text box.

And your label will be moved to the left corner that you want to move to the right, ah and you can’t manually adjust it.

To adjust, select the TieuDe node in the Inspector and select Center in Aligment.

It will then be moved to the middle

If you pay attention, you can see that the TieuDe is close to the top of the screen so I will make it wider.

You add a node called NinePatchRect (and put it at the top), then here you can use another node to create space like Vbox, etc. Here, I just choose great.

In the Rect section of NinePatchRect you adjust the Min Size to 50.

Note the adjustment at Min size, not size because there are some cases of size adjustment, but it will reset to the original size.

After adjustment.

Next is the button part. Like Tiude, I add an Hbox and add a node that allows us to press the button that is Button.

I rename again.

You will have to align it to the center like you did with Tieude.

I added NinePatchRect to create space.

Similarly, I added an exit button to the game.

Save the scene in a new folder named UI.

summary

So in this part, I showed you how to create a basic menu for the game.