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

Continuation of the 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 to have an interface to see the characters and the scene of the game. Today we will set up the UI, specifically Create MENU for the game using Godot Engine.

You guys create a new sense for yourself

Select User Interface > Rename TitleMenu or whatever you want

Find yourself VboxContainer

Here Vboxcontainer is Node which will contain nodes for your ui

Notice 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 the setup

Next find yourself a TextureRect and change it to Logo

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

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

And this is when I finished creating it

You click Download the Image to download

Then add it to the game folder

Then you drag the logo into the texture of Node Logo

It is quite commanding in the stretch Node selection: Keep Centered

It will come out between

And create for me one 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 1 more VboxContainer in Trung Tam 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(Tro Choi Moi)

Notice that you will see the black part below the Logo

In Button(Tro Choi Moi) Click on Flat it will disappear

And Next we will add Custom Font for it

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

Then click on Dynamic Font

In Font Data > Empty > Load > choose your font

Download link at the bottom of the post

In the Settings section, adjust the size to fit

Next we will save the font so that we can take it out later if needed

Right click on dynamic font > save

Save as .tres

And next we will create the effect, let’s first write the text in:

Custom Constants > click the 2 upper and lower shadows

Click Font Color Shadow > edit color

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

Layout section > select full rect

And now we will duplicate the button to create more for ease

Save as sence for me. Save anywhere. But I recommend making it easy, but before when I first learned to do projects, I didn’t know how to save the folder and threw a pile there until I found it like a needle in a haystack. =))

Open the saved Sense

Select sence > new Inherited Sense

Then tap Game of Thrones then press open

It will give you a sense copy

Renamed TiepTuc

Then make another copy of Exit Game

Then add another Settings

New Instance Sense

Add the 3 just created

Done it like this:

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

Go to the 4 sence just created, find Rect > Min Size > change like the picture and when you make one, it will apply to all 4.

If there’s something that min size doesn’t change, you don’t change it

New game changed

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

Done

Add me a Center Container under node Trungtam, this Center node will be the node used to upload pictures next to the 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

Just create it like before

Adjust the size to fit your eyes

Click on 2 boxes: use mipmaps and use filter

Next add the background

And we got 1 Menu

This menu is almost complete, the Continue – Installation will be guided in 4-8 more lessons

New game + exit game will be Code soon

Create yourself a script in play games

Then code like below

The above code helps you to remove the sense you want to point to the button

You can put the sense in like the picture above

And next

We will connect it

Click Node > Pressed() > connect

Which node do you connect with, choose that node?

Here I connect with Gameplay so I will connect to play games

This is signaling to node

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

This is after connecting it will give us a function

The code is as follows:

Get_tree().change_sence() is a command to help you change the scene

Change_sence() has 2 types:

1 is the type above the image declares 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 sence”)

And next we will create scripts for the remaining 3 and also connect as above and code as above, no code needed.

Do the same 3 Gameplay – continue- let’s fix it

And in the game, do the following

Also reconnect

And the code is as follows

Get_tree().quit() means that clicking it will quit the game

And then put the sense in and you’re done

Note: Separately Install and Continue Without Putting Sense In, I will guide you later

I’ll put sense world in

Next comes the set main sence when F5 will run the sence that has been set

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

Select the menu screen that we did just now

And press F5 it will run your sense

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