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.
| Tham gia kênh Telegram của AnonyViet 👉 Link 👈 |
Menu
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 30 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-27-01.png)
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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 31 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 27](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-26-08.png)
Sau đó bạn chọn Layout ở phía cuối thanh công cụ và chọn full rect![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 32 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 28](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-42-43.png)
Sau khi bạn chọn full rect nó sẽ ra như này.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 33 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 29](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-43-25.png)
Mình sẽ rename lại cho dễ nhận biết.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 34 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 30](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-44-09.png)
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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 36 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 32](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-46-08.png)
Mình sẽ add thêm 1 node Hbox và rename là TieuDe.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 37 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 33](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-46-19.png)
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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 38 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 34](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-46-38.png)
Ở bên phải có cái ô text.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 39 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 35](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-46-51.png)
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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 41 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 37](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-47-11.png)
Để chỉnh lại thì chọn node TieuDe bên Inspector chọn Center ở Aligment.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 42 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 38](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-47-30.png)
Sau đó nó sẽ được di chuyển ra giữa![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 43 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 39](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-51-05.png)
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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 44 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 40](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-51-22.png)
Ở 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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 45 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 41](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-51-34.png)
Sau khi chỉnh.![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 46 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 42](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-55-12.png)
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.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 47 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 43](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-56-25.png)
Mình rename lại.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 48 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 44](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-57-02.png)
Bạn sẽ phải căn chỉnh nó ra giữa như cách đã làm với Tieude.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 50 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 46](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-57-19.png)
Mình add thêm NinePatchRect để tạo khoảng trống.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 52 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 48](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-59-27.png)
Tương tự như vậy, mình add thêm 1 nút thoát game.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 53 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 49](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-01-00-59.png)
Lưu scene vào thư mục mói tên UI.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 54 [Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 50](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-01-01-47.png)
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.





![[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game 60 [Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game 53](https://anonyviet.com/wp-content/uploads/2021/11/25-11-2021-04-43-13.png)
![[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 61 [Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 54](https://anonyviet.com/wp-content/uploads/2021/11/25-11-2021-01-02-39-350x245.png)
![[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level 62 [Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level 55](https://anonyviet.com/wp-content/uploads/2021/11/24-11-2021-12-17-23.png)
![[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 64 [Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 57](https://anonyviet.com/wp-content/uploads/2021/11/23-11-2021-11-13-02.png)




