[Lập Trình Game] Lesson 9: Create a MENU for a Game when programming with Godot

Continued series Game programming with godot In this article, I will guide you to create UI for your game. User Interface (UI) is the face of the Game, when playing the game you need an interface to see the characters and scenes of the game. Today we will set up UI, specifically Create MENU for the game using Godot Engine.

You create new sence for yourself

Select User Interface > Rename to TitleMenu or whatever you want

Find yourself VboxContainer

Here Vboxcontainer is the Node which will contain the nodes for your ui

Pay attention to the Margin section in the settings

Now you have to set it up to fit the screen by adjusting the margin or dragging it out to adjust it :v.

And here is when I finished setting it up

Next find yourself a TextureRect and change it to Logo

Here we will put our logo in. If you do not have a logo, you can go to the website below to create one.

Link: http://www.webestools.com/web20-title-generator-logo-title-maker-online-web20-effect-reflect-free-photoshop.html

And here is when I finished creating it.

Click Download the Image to download.

Then add to game folder

Then you drag the logo into the texture of Node Logo.

It is quite command in stretch Node select: Keep Centered

It will come out in the middle

And create for yourself 1 more node called HboxContainer and rename it TrungTam

And this node will contain your buttons.

Find SizeFlags and select Expend for both Hoz and Ver in the HboxContainer settings

Create another VboxContainer in TrungTam and Click Expand for both Hoz and Ver

Next is the button

Create your own Node Button under VboxContainer

And create Node Label under Node Button(New Game)

Notice the black part below the Logo.

In Button(New Game) Click Flat and it will disappear

And Next we will add Custom Font to it

Label > Custom Fonts > Click to select Font > Then Click Empty > select Dynamic Font

Then click on Dynamic Font

In Font Data > Empty > Load > select your font

Download link at the bottom of the article

In the Settings section, adjust the size to fit.

Next, we will save the font so that we can use it conveniently later if needed.

Right click on dynamic font > save

Save as .tres

And next we will create the effect, first write the text:

Custom Constans section > click 2 shadows above and below

Click Font Color Shadow > edit color

And we will get like this. You can also edit the color again.

Layout section > select full rect

And now we will duplicate the button to make it easier to create more.

Save as sence for me. Save anywhere. But I recommend creating folders for ease. Before, when I first learned to do projects, I didn't know how to save folders and just left them all there. When I looked for them, it was like looking for a needle in a haystack =))

Open the saved Sence

Select sence > new Inherited Sence

Then click on New Game then click open

It will give you a sence copy

Renamed to TiepTuc

Then make another copy of Exit Game

Then add the Settings

New instance

Add 3 newly created ones

Done it like this:

Oh, I forgot to correct it for you guys :vv

Go to the 4 created scenes, find Rect > Min Size > change as shown in the picture and when you do one, it will apply to all 4.

If there is anything that the min size does not change, you can change it.

New game has changed

Next are the other 3. Do all 3 > Rect > min size > click the circle rs

Done

Add Center Container for me under the Trungtam node. This Center node will be the node used to upload images next to the other 4 buttons.

And also expand for it

Then add texture rect then put your logo in

Create a label in VBoxContainer

Label Fill and Expand in vertical

Create a new dynamic font because here we will create a different font size

Create like before

Adjust size to fit your eyes

Click to select 2 boxes: use mipmaps and use filter

Next add background

And we got 1 Menu

This menu is almost complete. The Continue – Installation part will be guided in the next 4-8 lessons.

New game + exit game will be Coded right after

Create yourself a script at new game

Then code as below

The above code allows you to insert the sense you want to point to into the button.

You can put the sence in like the picture above

And next

We will connect it

Click Node > Pressed() > connect

Select the node you want to connect to.

Here I connect with New game so i will connect to new game

This is the signal to the node.

Connect pressed() means that when you press the new game button, it will transmit a signal to the Node to receive data and then perform your actions.

This is after connect it will give us a function

The code is as follows:

Get_tree().change_sence() is a command that helps you change the sence.

Change_sence() has 2 types:

1 is the type in the image above declaring the variable bosencevao which means you can put the sence in there and then get_tree().change_sence(bosencevao) it will point to the sence you put in

2 is get_tree().change_sence(“address of the sentence”)

And next we will create scripts for the remaining 3 and also connect as above and code as above, except for the game exit which does not need coding.

Do the same for 3 times. New game – continue- install

To exit the game, do the following:

Also reconnect

And the code is as follows

Get_treE().quit() means that when you click on it, it will quit the game.

And then put the scene in and you're done.

Note: Do not put Sence in for Installation and Continue. I will guide you through that later.

I will put sense world in

Next comes the part of setting the main scene when F5 it will run the scene that has been set.

Project > Project Settings > Run > Main Sence > Click on Folder Icon

Select the menu screen we just made.

And press F5 it will run your sence

And that's it :3. See you in the next post hehe