Save and load

Các bước

Về các bước thực hiện mình sẽ mô tả ở bên dưới:

+ Đầu tiên, mình sẽ cần 1 autoload script mới có trọng trách là xử lý vấn đề lưu dữ liệu game và load dữ liệu game. Mình xài autoload cho nó dễ + không lằng nhằng rồi mình tạo 2 hàm đó là luu_game() và load_game() .

+Ở hàm luu_game() mình sẽ lưu dưới type ConfigFile thay vì Json file như mấy kênh Youtube hay làm bởi vì nó gọn không dài dòng như json file.

+ Khi lưu game mình sẽ có thể chọn lưu bình thường và lưu dưới dạng mã hoá. Vậy lưu mã hoá là gì? Đó là khi bạn lưu dưới dạng mã hoá file lưu game của bạn sẽ được mã hoá lại và người dùng không thể mở nó ra rồi edit nhằm việc gian lận.

+ Hàm load_game() thì mình sẽ tạo 1 biến và biến này có 2 trách nhiệm đó là vừa kiểm tra rằng file lưu dữ liệu có tồn tại và load file lưu dữ liệu.

Autoload

Mình tạo 1 script mới tên là DuLieu.

Sau đó vào Autoload và add cái script DuLieu vào.

Lưu game

Mình khai báo 1 biến const chứa địa chỉ lưu file dữ liệu. const SAVE_PATH = "user://file_dulieu.data"

File dữ liệu bạn có thể lưu với các đuôi khác nhau như data,ini,abc,jqk,cfg,file,… Và tuỳ vào bạn.

Về phần hàm:

func luu_game():
    var config = ConfigFile.new()
    config.set_value("player","diemso",PlayerData.diemso)
    config.set_value("player","unlocked_maps",PlayerData.Unlocked_map)
    config.save(SAVE_PATH)

Mình tạo 1 file Confìg mới rồi mình đưa dữ liệu điểm số và unlocked maps vào file đó.

Ở set_value() sẽ có 3 praramters:

+ Cái đâu tiên là Section: Đây là khu dữ liệu,mỗi khu dữ liệu sẽ có các giá trị của nó.

+ Key: Mình gọi đây là giá trị lưu trong 1 Section, nếu nhìn đoạn code trên thì sẽ thấy key ở đây là diemso,unlockedmap.

+ value: Đây là giá trị bạn cần gán cho key.

Sau đó, save file lại.

Load Game

func load_game():
    var config = ConfigFile.new()
    var check_file = config.load(SAVE_PATH)
    if check_file != OK: # Neu file khong bi loi hoac khong co
        return  # Huy bo load file
    PlayerData.diemso = config.get_value("player","diemso")
    PlayerData.Unlocked_map = config.get_value("player","unlocked_maps")

Ở load game thì mình khai báo 1 biến là check_file rồi gán nó = confg.load(SAVE_PATH) khi chạy thì config nó sẽ load file + với gán file vào check_file.

Rồi mình check nếu file OK thì tiếp tục và sau đó lấy giá trị từ save file.

Menu

Ở cái Menu mình sẽ thêm 2 dòng.

func _ready():
    DuLieu.load_game()

Mình gọi DuLieu sau đó thì load_game() để khi mới chạy game lên thì mình load dữ liệu luôn.

EndLevelMenu

Ở EndLevelMenu mình sẽ loại bỏ code tính điểm số và thêm nó vào trong KhuVucDiChuyen cho gọn.

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()
    pass # Replace with function body.


func _on_NutVeMenu_pressed():
    get_tree().paused = false
    get_tree().change_scene("res://Scences/Map/LevelMap.tscn")

KhuVucDiChuyen

Trong đây, mình sẽ tính toán hết mọi thứ rồi lưu dữ liệu lại.

extends Area2D


export (String,FILE) var LevelKeTiep
onready var endlevelmenu = get_parent().get_node("EndLevelMenu")
var diemso
onready var player = get_parent().get_node("Player")
onready var map = get_parent().name
func _on_KhuVucDiChuyen_body_entered(body):
    if body.name == "Player":
        endlevelmenu.get_node("EndLevelMenu").show()	
        get_tree().paused = true
        PlayerData.Unlocked_map[get_parent().name] = true
        diemso = int( float(player.dongxu /player.max_dongxu.size()) * 100)
        if diemso > PlayerData.diemso[map]: 
            PlayerData.diemso[map] = diemso
        DuLieu.luu_game()

Kết quả

Sau khi chạy game bạn chơi xong 1 ván rồi thoát ra vô lại sẽ thấy nó được lưu và load dữ liệu game.

Bạn có thể thấy file_dulieu đã được tạo ra.

Bạn có thể tìm thấy vị trí lưu file ở Project -> Open Projec Data Folder

Tổng Kết

Vậy là Series lập trình game Platformer với Godot Engine đã hoàn thành, nếu như bạn nào khong hiểu thì có thể lên cộng đồng hỏi nhé.

Mình sẽ để project ở bên dưới:

DeathGM/platformer-game-voi-godot-engine

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

Tôi có thể lưu dữ liệu game ở định dạng nào?

Bài viết sử dụng định dạng ConfigFile vì tính gọn nhẹ. Bạn cũng có thể dùng các định dạng khác như data, ini, abc, jqk, cfg, file, …

Làm thế nào để mã hóa dữ liệu game khi lưu?

Bài viết không đề cập chi tiết về mã hóa, nhưng gợi ý rằng việc mã hóa có thể được thực hiện để ngăn chặn người dùng chỉnh sửa dữ liệu game.

Dữ liệu game được lưu ở đâu?

Dữ liệu game được lưu trong thư mục Project Data của dự án Godot. Bạn có thể tìm thấy nó bằng cách vào Project -> Open Project Data Folder.

Âm thanh

 Lấy âm thanh

Để lấy âm thanh thì ở đây mình sẽ không cần đưa bạn link tải, bạn chỉ cần vô Asset lib tìm Kenney là nó sẽ ra.

Bạn có thể chọn 1 trong 2 cái đều được.

Rồi nhấn download để tải nó xuống.

Tải xong rồi thì bạn nhấn vào Install để cài đặt.

Nó sẽ hiện lên 1 giao diện hiển thị địa chỉ của addon đó rồi nhấn Install

Sau đó 1 thư mục mới đc tạo tên addons và nó chứa âm thành mà mình vừa cài ở trong đó

Về các file âm thanh nó cũng được ghi thêm tên đằng trước để bạn có thể nhận biết nên xài cái nào và cái nào.

Thêm vào scene

Sau khi cài đặt thành công thì mình tiến hành thêm nó vào game.

Kiếm cho mình node AudioStreamPlayer2D

Ở đây mình đang add vào scene Menu.

Ở đây mình đang làm Audio khi nhấn vào nút Bắt đầu cho nên mình sẽ tìm sound có tên click và kéo nó vào dòng Stream của Audio Stream Player 2D.

Sau khi kéo xong thì bạn có thể gọi nó ở trong code với hàm play()

extends Control
func _on_NutBatDau_pressed():
    $AudioStreamPlayer2D.play()
    yield(get_tree().create_timer(0,1),"timeout")
    get_tree().change_scene("res://Scences/Map/LevelMap.tscn")
    pass # Replace with function body.
func _on_NutThoatGame_pressed():
    get_tree().quit()
    pass # Replace with function body.

Dòng code ở trên mình thêm dòng $AudioStreamPlayer2D.play() là mình sẽ chạy cái âm thanh khi bấm nút bắt đầu

yield(get_tree().create_timer(0,1),"timeout"): là mình tạo 1 cái timer với thời gin 0,1s sau khi hết 0,1s nó mới chạy lệnh change_scene(). Ở đây, mình dùng lệnh này là bởi vì khi mình nhấn chỉ thêm dòng play() rồi change_scene nó sẽ không chạy âm thanh ( tuỳ máy có máy không) nên là mình sẽ thêm lệnh yield để sau khi nó chạy âm thanh rồi mới change scene.

Bạn có thể không cần thêm yield() nếu như cái bạn muốn chạy âm thanh không cần phải change scene.

Mình sẽ làm thêm 1 cái nữa ở scene PauseMenu.

Bạn thêm âm thanh vào.

Sau đó ở hàm hiện âm thanh menu mình có:

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

Rồi sau khi bạn nhấn và chạy thử sẽ thấy nó có âm thanh click khi nhấn vào.

Tổng Kết

Vậy trong phần này mình đã hướng dẫn bạn cách để thêm âm thanh vào trong game.

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

Tôi tải âm thanh từ đâu?

Bạn có thể tìm và tải âm thanh miễn phí từ Kenney.nl trên AssetLib của Godot.

Làm thế nào để thêm âm thanh vào nút trong giao diện?

Thêm một nút AudioStreamPlayer2D vào scene của bạn. Kéo thả file âm thanh vào thuộc tính “Stream” của nút. Gọi hàm `play()` của nút AudioStreamPlayer2D trong hàm xử lý sự kiện nhấn nút (ví dụ: `_on_NutBatDau_pressed()`).

Tôi cần sử dụng lệnh `yield()` khi chơi âm thanh không?

Bạn chỉ cần sử dụng `yield()` nếu bạn cần đảm bảo âm thanh được phát hoàn toàn trước khi thực hiện các hành động khác, đặc biệt là khi chuyển scene. Nếu không cần chuyển scene, bạn có thể bỏ qua lệnh này.

Chứ không phải là bạn thích nhấn vô level nào là chơi level đó.

Unlock level

Thuật toán

Về phần này thì mình sẽ có thuật toán như sau:

+ Mình sẽ thêm 1 biến ở PlayerData để lưu trữ dữ liêu là đã mở khoá map nào, có cấu trúc như bên dướ:

var Unlocked_map = {
    "Map1": false,
    "Map2":false,
    "Map3":false,
}

+ Sau đó ở KhuVucDiChuyen sau khi Player đã đến đó tức là thắng game rồi ý thì mình sẽ set Map đang chơi ở biến Unlocked_map thành true

func _on_KhuVucDiChuyen_body_entered(body):
        PlayerData.Unlocked_map[get_parent().name] = true

+ Sau đó, ở scene Level mình sẽ check nếu như nhấn vào cái Level đó và cái Level đó nếu như là Map1 thì nó sẽ chơi Map1 vì đây là map đầu tiên mình cần chơi mà.

+ Rồi tiếp đó nếu như không phải Map1 tức là bạn đã nhấn vào Level 2 trở lên rồi mình kiểm tra nếu như Map trước Map mà bạn nhấn vào đã hoàn thành thì sẽ chuyển sang chơi Map đó.

VD: Nếu mình chưa chơi Map1 thì Unlocked_map[“Map1”] đang = false, mình nhấn vào Level 2 rồi Level2 kiểm tra nếu như Unlocked_map[“Map1”] đang = false thì tức là bạn chưa hoàn thành nó và chưa thể chơi level2 và ngược lại.

PlayerData

extends Node


var diemso = {
    "Map1": 0,
    "Map2":0,
    "Map3": 0,
}
var Unlocked_map = {
    "Map1": false,
    "Map2":false,
    "Map3":false,
}

Mình add thêm 1 từ điển chứa dữ liệu các map đã mở khoá.

KhuVucDiChuyen

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":
        endlevelmenu.get_node("EndLevelMenu").show()	
        get_tree().paused = true
        PlayerData.Unlocked_map[get_parent().name] = true

Khu vực di chuyển thì mình bỏ thêm 1 dòng nữa ở cuối.

Và nếu như bạn để ý trong phần trước mình có để mấy dòng code thêm điểm số, nhưng mà để thêm điểm số vào PlayerData thì nó lại phải bấm 1 trong 2 nút. Vậy, nếu như người chơi vừa đi vào và hiên menu chiến thắng xong out game thì sao? Thì chắc chắn là phải chơi lại từ đầu rồi.

+ Cho nên mình sẽ đặt 1 bài tập nho nhỏ ở đây là chuyển dòng code thêm điểm số vào PlayerData ở EndLevelMap qua KhuVucDiChuyen.

Level Scene

Ở Scene level thì mình chỉ thêm code vào hà Hinhtron_pressed():

func _on_HinhTron_pressed():
    var level_truocdo = int(Level) - 1
    if MapName != "Map1":
        if PlayerData.Unlocked_map["Map"+ str(level_truocdo)] == true :
            get_tree().change_scene(Scene)
    else: 
        get_tree().change_scene(Scene)

Mình tạo thêm 1 biến level_truocdo và mình thêm int() ở Level là vì cái biến Level đang được khai báo là String nếu như bạn không thêm int vào thì nó sẽ là String – Integer và gây ra lỗi.

Kết quả

Bây giờ nếu bạn chạy game và bấm vào level sẽ thấy là nó không chuyển qua scene level 2 nữa mà phải hoàn thành level 1.

Vì cái này mình không biết nên lấy hình ảnh kiểu gì cho bạn xem nên là đọc chay nha @@.

Tổng Kết

Ở phần này mình đã hướng dẫn bạn cách để có thể thêm tính năng mở khoá level rồi nhé. Ở phần sau thì sẽ add âm thanh.

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

Làm sao để lưu trữ thông tin level đã mở khoá?

Sử dụng một biến từ điển (dictionary) trong PlayerData, ví dụ: Unlocked_map = {"Map1": false, "Map2": false, "Map3": false}. Mỗi key là tên level, và value là boolean (true nếu đã mở khoá, false nếu chưa).

Khi nào thì một level được đánh dấu là đã mở khoá?

Khi người chơi hoàn thành level (ví dụ, chạm vào vùng “KhuVucDiChuyen”), giá trị tương ứng trong Unlocked_map sẽ được cập nhật thành true.

Làm thế nào để kiểm tra xem người chơi có thể chơi level tiếp theo hay không?

Trước khi chuyển sang level tiếp theo, kiểm tra xem level trước đó (level_truocdo) đã được mở khoá hay chưa (PlayerData.Unlocked_map["Map" + str(level_truocdo)] == true). Nếu chưa, không cho phép chuyển scene.

Menu khi hết level

Copy Scene

Thì thay vì phải tạo lại từ đầu, bạn có thể duplicate 1 scene mới từ scene pause menu.

Bạn tìm pause menu ở filesystem chuột phải nhấn duplicate

Mình sẽ rename nó lại là EndLevelMenu

Rồi bạn xoá mấy node kia và chừa lại như hình, mình đổi tên luôn NutTepTuc thành LevelKeTiep

Chỉnh lại text ở TieuDe

Bạn sẽ clear cái script cũ đi bằng cách nhấn nút có cái tờ giấy mà có dấu x

Sau đó tạo cái mới.

Rồi 3 cái nút thì bạn disconnect đi vì nó đang kết nối với script cũ.

Rồi connect lại 3 cái mới.

Rồi Instance EndLevelMenu vào Map.

Rồi các bạn nhớ là hide cái EndLevelMenu mà thuộc loại Control Node đi ấy.

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.

Đây là đoạn code của script EndLevelMenu.

2 tín hiệu của nút chơi lại và về menu mình sẽ giữ nguyên.

Đối vơi LevelKeTiep để tiết kiệm thời gian thay vì mình phải tự setup coi nó di chuyển đến level nào kế tiếp thì mình sẽ lấy nó luôn. Ở node KhuVucDiChuyen mình đã có tạo 1 biến là LevelKeTiep và nó mang dữ liệu của scene kế tiếp nên là mình sẽ gọi cái biến đó thay vì làm thủ công.

onready var level = get_parent().get_node("KhuVucDiChuyen"): là mình khai báo xong gán nó bằng nút parent của EndLevelMenu ( như trên ảnh) và từ nút parent đó mình có thể truy cập vào node KhuVucDiChuyen để lấy dữ liệu của biến LevelKeTiep.

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

Ở phần script của KhuVucDIChuyen mình có đổi lại 1 xíu.

Ở đây, thay vì là di chuyển sang level kế tiếp như thường lệ thì mình sẽ cho nó hiển thị cái EndLevelMenu lên và sau đó thì dừng tree lại như ở pausemenu.

Nếu bạn nào thắc mắc tại sao mình lại get_node() 2 cái EndLevelMenu thì hãy nhìn vào như hình dưới.

Mình gọi 2 cái EndLevelMenu là vì mình có 2 node đó :).

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

Tổng Kết

Trong phần tiếp, mình sẽ hướng dẫn bạn cách để thống kê điểm số sau khi thu thập đồng xu và khi ra ngoài LevelMap bạn sẽ có được số sao tương ứng với số điểm.

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

Làm sao để tạo menu khi hết level trong Godot?

Bạn có thể tạo một menu mới bằng cách sao chép (duplicate) scene của menu tạm dừng (pause menu), chỉnh sửa nội dung và script cho phù hợp. Sau đó, instance menu này vào scene của level và hiển thị khi người chơi hoàn thành level.

Script nào được sử dụng để điều khiển menu khi hết level?

Script sử dụng các hàm `_on_NutLevelKeTiep_pressed()`, `_on_NutChoiLai_pressed()`, và `_on_NutVeMenu_pressed()` để xử lý các sự kiện nhấn nút “Level Kế Tiếp”, “Chơi Lại” và “Về Menu”. Script khác được sử dụng để kích hoạt hiển thị menu khi người chơi hoàn thành level.

Làm thế nào để chuyển sang level kế tiếp từ menu khi hết level?

Script sử dụng `get_tree().change_scene()` để chuyển đến scene level kế tiếp. Thông tin về scene level kế tiếp được lưu trữ trong biến `LevelKeTiep` trong một node khác của scene level hiện tại.

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.

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.

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

Làm thế nào để tạo một menu tạm dừng trong game Godot 2D Platformer của tôi?

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.

Menu tạm dừng có thể thực hiện các chức năng nào ngoài tiếp tục, chơi lại và thoát?

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.

Chọn Level

Scene

Bạn tạo cho mình 1 scene mới có Control là node gốc và 1 TextureButton và 3 Texturect.

TextureButton là  mình dùng để tạo hình ành cho cái level và tiện thể check nếu được bấm vào.

3 cái Texture Rect là dùng để hiển thị ngôi sao.

Bạn copy cái hình tròn ở bên thư mục UI trong Level map vào TextureButton

Rồi cái Texture Rect thì 3 cái kéo ngôi sao vào.

Sau đó chỉnh ngôi sao theo thứ tự từ trái qua.

Sau đó mình rename lại.

Add thêm 1 cái Label tên là SoLevel để hiển thị Level.

Mình dùng Customs Font ở phần trước.

Sau đó save scenes lại.

Rồi add thêm cho nó cái Script.

Sau đó connect cái signal pressed của HinhTron.

Script

extends Control

export (String) var MapName
export (String,FILE) var Scene
export (String) var Level
onready var ngoisaovang = preload("res://Assets/LevelMap/3 UI/Star1.png")
var SoDiem = 0

func _ready():
    $SoLevel.text = Level
func _process(delta):
    if SoDiem >= 1 and SoDiem <= 30:
        $NgoiSao1.texture = ngoisaovang
    elif SoDiem >= 30 and SoDiem <= 95:
        $NgoiSao1.texture = ngoisaovang
        $NgoiSao2.texture = ngoisaovang
    elif SoDiem >= 95:
        $NgoiSao1.texture = ngoisaovang
        $NgoiSao2.texture = ngoisaovang
        $NgoiSao3.texture = ngoisaovang


func _on_HinhTron_pressed():
    get_tree().change_scene(Scene)
    pass # Replace with function body.

Về phần code mình sẽ có như trên.

Ở đây mình sẽ dùng export để xuất 3 biến ra Inspector

Và Sodiem ở đây mình sẽ để theo thang đo 100. SoDiem ở đây sẽ được quy ra từ số sao mà bạn thu thập được khi chơi 1 level nếu đủ tất cả sao thì SoDiem là 100 và $NgoiSao1,2,3 sẽ chuyển sang màu vàng.

dòng có onready var là mình dùng để load trước hình ảnh của ngôi sao vàng tức là vừa chạy game thì nó load luôn còn nếu ban dùng load() là khi nào đụng tới thì nó mới load hình ảnh

Sau đó Instance cái Level vừa tạo vào LevelMap.

Bạn điền thông tin vào.

MapName là tên của node gốc của cái Scene ở bên dưới.

Scene là bạn chọn scene của level đó.

Level là dùng để hiển thị level.

MapName bằng tên node gốc nha.

Và sau khi chạy game mình sẽ có kết quả nó được như trên.

Sau khi nhấn vào đó mình sẽ được đi chuyển tới Level 1.

Tổng kết

Ở trong phần sau mình sẽ hướng dẫn bạn cách để tạo menu dừng và khi chiến thăng 1 level.

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

Làm thế nào để tạo nút chọn level trong game?

Bạn cần tạo một scene mới với Node gốc là Control, chứa một TextureButton (cho hình ảnh level) và ba TextureRect (cho các ngôi sao biểu thị độ hoàn thành). Kết nối tín hiệu “pressed” của TextureButton với một hàm trong script để chuyển scene khi nút được nhấn.

Script điều khiển nút chọn level hoạt động như thế nào?

Script sử dụng biến `SoDiem` để theo dõi điểm số và hiển thị số sao tương ứng. Biến `export` cho phép bạn thiết lập tên scene level, đường dẫn scene và số level từ Inspector. Hàm `_on_HinhTron_pressed()` dùng `get_tree().change_scene()` để chuyển đến scene level đã chọn.

Làm sao để hiển thị sao vàng dựa trên điểm số?

Script sử dụng điều kiện `if-elif-else` để kiểm tra giá trị `SoDiem`. Tùy thuộc vào điểm số, các TextureRect (ngôi sao) sẽ được gán texture sao vàng tương ứng, cho biết mức độ hoàn thành của level.

Art

Bạn có thể tải tileset ở đây : Level Map Pixel Art | OpenGameArt.org

Sau khi tải về thì bạn copy cho mình Map_tiles.png và 2 Folders là Objects,UI vào thư mục mới tên là LevelMap ở trong Assets nha.

Tilemap

Như với cách thiết kế level ở phần 2 thì mình làm tương tự là thêm 1 scene mới tên là LevelMap và thêm tilemap vào.

Tạo 1 tileset mới.

Rồi thêm file tileset vào.

Bạn chọn New Single Tile và chọn icon grid để hiển thị grid lên nhé

Chọn cho mình 1 cái này

Xong nhấn vô New Single tile 1 lần nữa và chọn cái bên dưới.

Sau khi ra bên ngoài bạn sẽ có 2 cái tile.

Rồi tạo thêm cho mình 1 tile đất như hình.

Tạo cho mình 1 atlas tilemap và bôi trắng 3 cái ô trên.

Sau khi nhấn vào cái tile mà vừa được tạo bằng atlast nó sẽ hiện ra các ô tile trong đó.

Mình tạo thêm 1 cái atlas là biển.

Mình sẽ xoá cái single tile đi để thay thế bằng atlas cho tiên.

Mình tạo thêm 1 cái atlas là lấy full tile màu xanh.

Rồi bạn có thể thêm các tile khác tương tự.

Mình sẽ tạo 1 node mới và node này dùng để chứa các object khác như cây, bui cây, đá , cỏ , thuyền,vv mà bạn đã tải xuông.

Xong sau đó thì bạn sẽ kéo thả mấy cái ảnh của object vào trong game thôi.

Sau đó thì ban lưu lại cho mình, mình sẽ lưu nó lại ở thư mục Map trong Scenes.

Và đây là kết quả của mình sau khi ngồi mày mò thiết kế.

Bạn không được thiết kế theo mình vì mất thời gian và lâu cho nên là nên thiết kế theo ý của bạn nhé.

Tổng Kết

Vậy là trong phần này mình đã hướng dẫn xong bạn cách để thiết kế tilemap cho Level Map. Nếu bạn không hiểu thì có thể tham gia Group Cộng Đồng GodotVN để được giải đáp thắc mắc cũng như thông cảm cho mình nếu như viết mà bạn đọc khó hiểu nhé, vì mình viết lúc 1h sáng nên cũng hơi lú lú.

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

Tôi cần chuẩn bị những gì trước khi bắt đầu thiết kế Level Map?

Bạn cần tải bộ tileset từ Level Map Pixel Art | OpenGameArt.org và đặt các file vào thư mục LevelMap trong Assets của project Godot.

Làm thế nào để tạo một TileSet mới trong Godot?

Trong scene LevelMap, thêm một TileMap node. Tạo một tileset mới, thêm ảnh tileset vào, và tạo các single tile hoặc atlas tile cho các loại địa hình (đất, nước, v.v.) theo ý muốn.

Tôi có thể thêm các object như cây cối, đá vào Level Map như thế nào?

Tạo một node con trong TileMap để chứa các object. Sau đó, bạn có thể kéo thả các hình ảnh object từ thư mục Assets vào node này để thêm chúng vào map.

Custom Fonts

Tải xuống

Bạn có thể truy cập vào link sau để có thể tải xuống font mà bạn muốn: 39 Free Retro, Video Game Fonts

Lưu ý: nếu như muốn gõ và hiển thị tiếng việt trên Gôt thì bạn cần phải kiếm 1 cái font tiếng việt nhé.

Ở đây, mình đã tải xuống 1 font tên Atarian và bỏ nó vào thư mục mới mình vừa tạo tên Fonts nằm trong thư mục Assets.

Thiết lập

Thì ở trong phần trước mình đã chỉ bạn cách để có thể tạo custom styles cho game và cái custom fonts này nó cũng ở trong Theme Overrides đối với Godot 3.4 trở lên.

Còn nêú là 3.3 trở xuống thì nó sẽ có 1 mục đó là Custom Fonts.

Bạn chọn cho mình Nutbatdau và chọn New Dynamic Font.

Sau đó vào Font Data và nhấn vào nút Load.

Sau đó tìm fonts mà bạn muốn sử dụng rồi nhấn vào open để mở nó lên nha.

Sau khi làm xong thì font đã được apply vào node NutBatDau.

Bạn có thể chỉnh Size và Outline, Outlinesize, Color Outline, Mipmap, Filter ở phần Settings của Fonts.

Ở đây mình sẽ chỉnh size lên 30 cho to và Outline size lên 1, Color Outline thành màu đen

Đây là sau khi mình làm xong, và cái chữ nó sát với lề button nên là chỉnh lại nha.

Mình sẽ chỉnh nó lên 1 xíu.

Sau đó copy và paste lại qua nút thoát game giống như ở phần trước khi mà bạn copy cái styles ấy nhé.

Chỉnh size lên thêm tý nhé.

Sau khi mình chỉnh lên thêm xí thì nhìn nó đã thuận mắt hơn rất nhiều rồi.

Tiêu đề

Tiếp theo mình sẽ chỉnh tiêu đề.

Tiêu đề thì các bạn nên xài Font khác với Button nhé, làm như vậy sẽ tránh bị chán, trùng khi nhìn vào.

Làm tương tự như với cái trên.

Chọn Label -> New Dymanic Fonts -> Chọn Fonts.

Sau khi xong mình sẽ có kết quả như sau.

Mình chỉnh size lên cho to 1 chút.

Sau đó mình sẽ chỉnh lại Outline Size, Color và bật Filter lên.

Đây sẽ là kết quả cuối cùng mà mình có được sau khi hoàn thành tất cả các cái trên.

Tổng Kết

Vậy ở trong phần này mình đã hướng dẫn bạn xong cách thêm và thết kế fonts trong Godot. Ở phần tiếp theo mình sẽ hướng dẫn bạn cách thêm background vào cho Menu.

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

Làm thế nào để thêm font tùy chỉnh vào Godot?

Bạn tải font xuống, đặt nó vào thư mục “Fonts” trong thư mục “Assets” của project Godot. Sau đó, trong Godot Editor, bạn tạo một Dynamic Font mới và tải font đã thêm vào.

Tôi có thể tùy chỉnh font như thế nào?

Sau khi tải font, bạn có thể điều chỉnh kích thước, thêm viền (outline), thay đổi màu viền, bật/tắt Mipmap và Filter trong phần Settings của Dynamic Font.

Nếu tôi muốn sử dụng font hiển thị tiếng Việt, tôi cần làm gì?

Bạn cần tìm và tải xuống một font hỗ trợ tiếng Việt, sau đó làm theo các bước thêm font tùy chỉnh như đã hướng dẫn.

Sử dụng

Add script

Bạn add thêm cho mình 1 cái script mới ở scene Menu.

Kết nối tín hiệu

Mình sẽ kết nối tín hiệu của node NutBatDau để có thể là khi nhấn vào thì sẽ di chuyển tới scene level 1

Tìm và kết nối tín hiệu pressed(). Tín hiệu này sẽ thực hiện lệnh khi button được người dùng nhấn vào.

Nhấn vào connect

Connect thành công.

Bạn sẽ làm tương tự cho mình đối với nút thoát game.

Code

extends Control




func _on_NutBatDau_pressed():
    pass # Replace with function body.


func _on_NutThoatGame_pressed():
    pass # Replace with function body.

Đây là code ban đầu.

extends Control




func _on_NutBatDau_pressed():
    get_tree().change_scene("res://Scences/Map/Map.tscn")
    pass # Replace with function body.


func _on_NutThoatGame_pressed():
    get_tree().quit()
    pass # Replace with function body.

Còn đây là code mà mình đã thêm vào và nó chỉ thêm có 2 dòng thôi.

Ở nút bắt đầu mình sẽ thêm hàm change_sence() để thay đổi qua scene mà mình muốn và change_scene() chỉ có thể được gọi thông qua get_tree() nhé.

Ở nút thoát game thì mình dùng lênh quit() lệnh này sẽ tự đóng game của bạn lại

Sau đó bạn nhấn F6 chạy game và sẽ thấy khi nhấn BAT DAU bạn sẽ được di chuyển qua scene khác và khi nhấn THOAT GAME thì game của bạn sẽ bị thoát ra ngoài.

Tổng kết

Phần này thì nó toàn mấy cái khá là dễ để thực hiện.

Ở phần tiếp, mình sẽ hướng dẫn bạn cách để design , trang trí lại cái giao diện Menu sao cho đẹp và hợp lý nha. Dự tính phần Menu sẽ kéo dài thêm 2,3 phần và sau đó là sẽ tạo Menu dừng game khi đang chơi game.

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

Làm thế nào để kết nối tín hiệu của nút với một hàm trong Godot?

Bạn cần kết nối tín hiệu “pressed()” của nút (button) trong editor của Godot với một hàm tương ứng trong script của bạn. Hàm này sẽ được gọi khi người dùng nhấn vào nút.

Hàm nào dùng để chuyển đổi scene trong Godot?

Sử dụng get_tree().change_scene("path/to/your/scene.tscn"), thay thế “path/to/your/scene.tscn” bằng đường dẫn đến scene bạn muốn chuyển đến.

Làm thế nào để thoát game bằng GDScript?

Sử dụng hàm get_tree().quit().

Menu

Thì điều đầu tiên là bạn tạo cho mình 1 scene mới với Control Node là node gốc và rename lại thành Menu.

Và add thêm 1 node mới đó là Vboxcontanier.

VBoxContainer: đây là node mà nó sẽ tạo ra 1 cái vùng giống như 1 cái container và nó làm cho những node bên trong nó đều được sắp xếp theo thứ tự đường dọc.

HBoxContainer: Hbox thì ngược lại với Vbox là nó sắp xếp theo đường ngang.

Nếu bạn để ý thì có chữ  V và H ở đầu tên, và V – H này chính là tên của 2 trục hoành và độ theo tiếng anh.

Sau đó bạn chọn Layout ở phía cuối thanh công cụ và chọn full rect

Sau khi bạn chọn full rect nó sẽ ra như này.

Mình sẽ rename lại cho dễ nhận biết.

Và mình add thêm 2 Vbox rồi rename nó 1 cái là PhanDau và 1 là PhanCuoi.

Về lý do mình thêm 2 cái này là vì mình muốn PhanDau là phần mình sẽ thêm Text vào VD như là tên game.vv. Còn PhanCuoi là mình sẽ thêm nút để bấm.

Mình sẽ add thêm 1 node Hbox và rename là TieuDe.

Vì mình muốn tạo 1 cái tiêu đề game cho nên mình sẽ sử dụng 1 node cho phép mình hiển thị text đó là Label.

Ở bên phải có cái ô text.

Và cái label của bạn sẽ bị di chuyển sang góc trái mà mình muốn di chuyển sang phải, à và bạn không thể chỉnh thủ công được nha.

Để chỉnh lại thì chọn node TieuDe bên Inspector chọn Center ở Aligment.

Sau đó nó sẽ được di chuyển ra giữa

Nếu bạn để ý thì có thể thấy rằng là cái TieuDe nó bị ở sát trên tít màn hình do đó mình sẽ làm cho nó rộng ra.

Bạn add thêm node là NinePatchRect ( và bỏ lên đầ ) thì ở đây bạn có thể dùng node khác để có thể tạo khoảng trống như Vbox,vv. Ở đây, mình chỉ chọn đại thôi.

Ở phần Rect của NinePatchRect bạn chỉnh Min Size lên 50.

Lưu ý chỉnh ở Min size chứ không phải size vì có 1 số trường hợp chỉnh size nhưng nó sẽ reset về size ban đầu.

Sau khi chỉnh.

Tiếp đến là phần nút bấm. Cũng như Tieude mình add 1 cái Hbox và thêm 1 node cho phép chúng ta bấm nút đó là Button.

Mình rename lại.

Bạn sẽ phải căn chỉnh nó ra giữa như cách đã làm với Tieude.

Mình add thêm NinePatchRect để tạo khoảng trống.

Tương tự như vậy, mình add thêm 1 nút thoát game.

Lưu scene vào thư mục mói tên UI.

Tổng kết

Vậy trong phần này, mình đã chỉ bạn các để tạo 1 cái menu cơ bản cho game.

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

VBoxContainer và HBoxContainer là gì và chúng khác nhau như thế nào?

VBoxContainer là node sắp xếp các node con theo chiều dọc, còn HBoxContainer sắp xếp các node con theo chiều ngang. Sự khác biệt nằm ở hướng sắp xếp các thành phần UI.

Làm thế nào để căn chỉnh các nút và văn bản trong menu cho chính giữa?

Chọn node chứa các nút hoặc văn bản (ví dụ: HBoxContainer), trong Inspector, tìm thuộc tính Alignment và chọn Center.

NinePatchRect được sử dụng để làm gì trong việc thiết kế menu này?

NinePatchRect được sử dụng để tạo khoảng trống hoặc tạo vùng nền cho các phần tử khác trong menu, giúp cho bố cục trở nên cân đối và đẹp mắt hơn.