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

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

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

Then the first thing you do is 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 as 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.

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

Then you select Layout at the bottom of the toolbar and select full rect[Tạo 2D Platformer Game với Godot]  Part 17: Creating the 86 . Menu

After you select full rect it will look like this.

[Tạo 2D Platformer Game với Godot]  Part 17: Creating the 87 . Menu

I will rename it again for easy identification.

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

And I add 2 more Vbox and then rename it 1 is PhanDau and 1 is 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.

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a Menu 89[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 90 . Menu

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

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 91 . Menu

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

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 92 . Menu

To the right there is a text box.
[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 93 . Menu

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

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 94 . Menu[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 95 . Menu

To adjust, select the TieuDe node in the Inspector and select Center in Aligment.
[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 96 . Menu

It will then be moved to the middle[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 97 . Menu

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 only choose great.
[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 98 . Menu

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

Note the adjustment in Min size, not size because there are some cases of size adjustment, but it will reset to the original size.
[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 99 . Menu

After adjustment.[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 100 . Menu

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

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 101 . Menu

I rename again.

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 102 . Menu

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

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 103 . Menu[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 104 . Menu

I added NinePatchRect to create space.

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 105 . Menu[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 106 . Menu

Similarly, I added an exit button to the game.

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 107 . Menu

Save the scene in a new folder named UI.

[Tạo 2D Platformer Game với Godot]  Part 17: Creating a 108 . Menu

summary

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

Leave a Reply