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.

In this part, I will show you how to create a menu when you finish playing a level and it will be able to move to the next level, play again and return to the Level Map menu.

Copy Scene

Then instead of having to recreate it from scratch, you can duplicate a new scene from the scene pause menu.

You find the pause menu in the filesystem right click and click duplicate

I will rename it EndLevelMenu

Then you delete the other nodes and leave them as shown, I changed the name NutTepTuc to LevelKeTiep

Edit text in TieuDe

You will clear the old script by pressing the button with the paper that has an x

Then create a new one.

Then 3 buttons, you disconnect because it is connecting to the old script.

Then reconnect 3 new ones.

Then Instance EndLevelMenu to Map.

Then you remember to hide the EndLevelMenu that belongs to the Control Node type.

Script

extends CanvasLayer



onready var level = get_parent().get_node("KhuVucDiChuyen")

func _on_NutLevelKeTiep_pressed():
    get_tree().paused = false
    get_tree().change_scene(level.LevelKeTiep)
    pass # Replace with function body.

func _on_NutChoiLai_pressed():
    get_tree().paused = false
    get_tree().reload_current_scene()
    print("choi lai")
    pass # Replace with function body.


func _on_NutVeMenu_pressed():
    get_tree().paused = false
    get_tree().change_scene("res://Scences/Map/LevelMap.tscn")
    pass # Replace with function body.

Here is the code of the EndLevelMenu script.

2 signals of the replay button and the menu will remain the same.

For LevelKeTiep to save time instead of having to manually set it up to see which level it moves to the next level, I’ll take it. At the KhuVucDi Chuyen node, I have created a variable called LevelKeTiep and it carries the data of the next scene, so I will call that variable instead of doing it manually.

onready var level = get_parent().get_node("KhuVucDiChuyen"): is that I declare it and assign it with the parent node of the EndLevelMenu (as shown in the picture) and from that parent node I can access the KhuVucDi Chuyen node to get the data of the LevelKeTiep variable.

extends Area2D


export (String,FILE) var LevelKeTiep
onready var endlevelmenu = get_parent().get_node("EndLevelMenu")

func _on_KhuVucDiChuyen_body_entered(body):
    if body.name == "Player":
#		get_tree().change_scene(LevelKeTiep)
        endlevelmenu.get_node("EndLevelMenu").show()
        get_tree().paused = true

In the script of KhuVucDIChuyen, I changed it a little bit.

Here, instead of moving to the next level as usual, I will show it the EndLevelMenu and then stop the tree like in the pausemenu.

If you wonder why I get_node() 2 EndLevelMenu, then look at the picture below.

I call 2 EndLevelMenu because I have 2 nodes :).

And here are my results

Summary

In the next part, I will show you how to calculate the score after collecting the coins and when you go out of the LevelMap you will get the number of stars corresponding to the number of points.