[Tạo 2D Platformer Game với Godot] Phần 24: Tạo Pause Menu

Trong phần này, mình sẽ hướng dẫn bạn các để tạo 1 cái pause menu khi đang chơi game và nhấn vào pause sau đó thì game dừng lại và bạn có thể chơi tiếp, chơi lại, thoát.

Và tạo menu khi kết thúc game nó gồm: Level kế tiếp, Chơi lại, thoát ra ngoài menu.

Các bài viết liên quan

[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game

09/12/2021

[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện

08/12/2021

[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level

07/12/2021

[Tạo 2D Platformer Game với Godot] Phần 26: Thêm điểm số khi hết game

30/11/2021

Pause Menu

Mình add CanvasLayer là node gốc và rename là PauseMenu

Vì nó khá nhỏ nên mình chỉnh min size lên.

Nó đã to hơn khi chỉnh min size là và ở ô text mình thêm 2 dấu | |

Sau đó thì mình add thêm cái Custom Font cho nó đẹp.

Color id: a77322

Rồi làm thêm cái custom Styles cho nó vừa mắt.

Và mình có kết quả như trên

Mình thêm cái Control node mới và rename nó lại là PauseMenu và thêm cái Panel để làm Background sau đó rename nó lại.

Sau đó căn chỉnh ra giữa

Mình tạo cái Custom styles mới.

Color: a89d24

Ở trên là thông số.

Bạn thêm node MarginConTainer ở dưới Background.

Mình sử dụng margincontainer là để căn lề cho nó đẹp mắt.

Chọn Full rect

Sau đó Theme Overriides -> Constants các bạn điền khoảng là 10 và tuỳ chỉnh theo game của bạn.

Add thêm cái Vboxcontainer

Add xong bạn sẽ thấy Vboxcontainer bị thụt vào trong 10mm từ margincontainer.

Add thêm cái Label rename là TieuDe

Chỉnh align là Center để căn giữa

Add thêm cái custom fonts cho nó đẹp mắt

Kết quả như trên.

Mình add thêm 3 nút như ảnh và 3 Ninepatchrect làm khoảng trống.

Rồi các bạn add custom fonts và custom styles cho button.

Bạn có thể add hoặc không add đều được.

Bạn save scene lại

Add thêm cái script ở node PauseMenu

Rồi connect 4 cái signal của 4 nút vào.

Rồi hide cái pause menu đi vì mình chỉ hiện nó khi mà mình bấm nút hiện thôi.

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

Code ở nút tiếp tục.

get_tree().paused = false : mình sẽ bảo cái tree là tiếp tục hoạt động.

$PauseMenu.hide() : mình sẽ ẩn cái PauseMenu đi vì mình muốn tiếp tục chơi game.

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

get_tree().reload_current_scene() : mình sẽ kêu cái tree chạy lại cái 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"): là mình sẽ di chuyển sang scene Level Map.

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

$PauseMenu.show() : là mình sẽ hiển thị cái PauseMenu lên vì nó đang ẩn.

get_tree().paused = true :là mình sẽ gọi cái tree hiện tại và kêu nó dừng lại. Khi dừng lại là mọi node trên tree sẽ ngưng hoạt động.

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.

Vậy mình sẽ có full code là như này.

Và ở PauseMenu bên Inspector bạn cần chỉnh pause mode về Process để khi cái tree nó pause nhưng mà PauseMenu vẫn hoạt động được.

Sau đó Instance vào Map.

Đây là kết quả của mình

Level Map

À mình quên mất ở mấy phần trước đó là add thêm cái nút quay về ở scene Level map để quay về Menu chính.

Bạn thêm cái node Button rồi rename lại. Sau đó, thêm custom fonts, custom styles.

Tạo cho mình cái script ở Level Map.

Sau đó kết nối tín hiệu ở node QuayVe vào.

extends Node2D


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

Về code mình có như trên.

Và mình có kết quả như trên

Tổng Kết

Vậy trong phần này mình đã hướng dẫn bạn cách để có thể tạo pause menu cho game.