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

In this part, I will guide you how to create a pause menu while playing a game and press pause then the game stops and you can continue playing, playing again, exiting.

And create a menu when the game ends, it includes: Next Level, Play again, exit the menu.

I add CanvasLayer as the root node and rename it as PauseMenu

Because it’s quite small, I adjusted the min size up.

It got bigger when the min size was adjusted and in the text box I added 2 signs | |

Then I added a Custom Font to make it beautiful.

Color id: a77322

Then add custom Styles to make it pleasing to the eye.

And I have the above result

I added a new Control node and renamed it PauseMenu and added a Panel to be the Background then renamed it.

Then align to the center

I created a new Custom styles.

Color: a89d24

Above are the parameters.

You add the MarginConTainer node under the Background.

I use margincontainer to align it beautifully.

Select Full rect

Then Theme Overrides -> Constants you fill in about 10 and customize according to your game.

Add a Vboxcontainer

After adding you will see the Vboxcontainer is indented 10mm from the margincontainer.

Add the Label rename as TieuDe

Adjust align to Center to center

Add a custom font to make it beautiful

Result as above.

I added 3 more buttons like the picture and 3 Ninepatchrect as spaces.

Then you add custom fonts and custom styles to the button.

You can add or not add.

You save the scene

Add a script in the PauseMenu node

Then connect 4 signals of 4 buttons.

Then hide the pause menu because I only show it when I press the show button.

func _on_NutTiepTuc_pressed():
    get_tree().paused = false
    $PauseMenu.hide()

Code in continue button.

get_tree().paused = false : I will tell the tree to continue working.

$PauseMenu.hide() : I will hide the PauseMenu because I want to continue playing the game.

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

get_tree().reload_current_scene() : I will tell the tree to replay the scene.

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

get_tree().change_scene("res://Scences/Map/LevelMap.tscn"): I will move to the Level Map scene.

func _on_HienPauseMenu_pressed():
    $PauseMenu.show()
    get_tree().paused = true
    pass # Replace with function body.

$PauseMenu.show() : is that I will show the PauseMenu because it is hidden.

get_tree().paused = true : is that I will call the current tree and tell it to stop. When stopped, all nodes on the tree will stop working.

extends CanvasLayer



func _on_NutTiepTuc_pressed():
    get_tree().paused = false
    $PauseMenu.hide()



func _on_NutChoiLai_pressed():
    get_tree().paused = false
    get_tree().reload_current_scene()
    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.


func _on_HienPauseMenu_pressed():
    $PauseMenu.show()
    get_tree().paused = true
    pass # Replace with function body.

So I will have full code like this.

And in the Inspector’s PauseMenu, you need to change the pause mode to Process so that when the tree pauses, but the PauseMenu still works.

Then Instance to Map.

Here are my results

Level Map

Ah, I forgot in the previous parts to add a return button in the Level map scene to return to the Main Menu.

You add the Button node and then rename it. Then add custom fonts, custom styles.

Create your own script at Level Map.

Then connect the signal in the QuayVe node.

extends Node2D


func _on_QuayVe_pressed():
    get_tree().change_scene("res://Scences/UI/Menu.tscn")
    pass # Replace with function body.

About the code I have above.

And I have the above result

Summary

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