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
![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 30")
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 27](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-26-08.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 31")
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 28](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-42-43.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 32")
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 29](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-43-25.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 33")
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 30](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-44-09.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 34")
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 31](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-45-58.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 35")
![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 36")
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 33](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-46-19.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 37")
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 34](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-46-38.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 38")
Ở bên phải có cái ô text.
![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 39")
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 36](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-47-02.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 40")
![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 41")
Để 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 38](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-47-30.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 42")
Sau đó nó sẽ được di chuyển ra giữa![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 43")
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 40](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-51-22.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 44")
Ở 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 41](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-51-34.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 45")
Sau khi chỉnh.![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 46")
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 43](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-56-25.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 47")
Mình rename lại.
![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 48")
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 45](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-57-12.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 49")
![[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 "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 50")
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 47](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-12-59-21.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 51")
![[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ạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 52")
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 49](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-01-00-59.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 53")
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 50](https://anonyviet.com/wp-content/uploads/2021/11/19-11-2021-01-01-47.png "[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 54")
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.
![[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 29: Lưu và load dữ liệu game 60")
![[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 28: Thêm âm thanh giao diện 61")
![[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 27: Mở khoá level 62")
![[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 "[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 64")
