[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.

📢 Tham gia kênh Telegram của AnonyViet

👉 Vào Telegram AnonyViet

Cập nhật bài mới, tools hay và thủ thuật IT nhanh nhấ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

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.

Câu hỏi thường gặp

Bạn cần tạo một CanvasLayer, thêm các nút (buttons) và các phần tử giao diện người dùng (UI elements) khác vào đó. Sau đó, viết script để hiển thị và ẩn menu, đồng thời điều khiển trạng thái tạm dừng của game bằng get_tree().paused = true/false.

Tôi có cần phải sử dụng các kiểu tùy chỉnh (custom styles) và font chữ không?

Không bắt buộc, nhưng sử dụng các kiểu tùy chỉnh sẽ giúp menu của bạn trông chuyên nghiệp và hấp dẫn hơn. Bạn có thể tùy chỉnh màu sắc, phông chữ, và kích thước để phù hợp với phong cách game của bạn.

Tùy thuộc vào thiết kế game của bạn. Bạn có thể thêm các chức năng khác như chỉnh âm thanh, xem hướng dẫn, hoặc truy cập vào menu cài đặt.