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

Trong phần này, mình sễ hướng dẫn bạn cách để có thể tạo Menu game cho con game Platformer này. Trong phần này mình sẽ chỉ cho bạn thêm 1 vài node mới của U.I của Godot.

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.