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 88")
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 79](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 89")
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 80](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 90")
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 81](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 91")
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 82](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 92")
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 83](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 93")
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 84](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 94")
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 85](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 95")
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 86](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 96")
Ở bên phải có cái ô text.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 87](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 97")
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 88](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 98")
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 89](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 99")
Để 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 90](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 100")
Sau đó nó sẽ được di chuyển ra giữa![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 91](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 101")
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 92](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 102")
Ở 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 93](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 103")
Sau khi chỉnh.![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 94](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 104")
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 95](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 105")
Mình rename lại.
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 96](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 106")
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 97](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 107")
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 98](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 108")
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 99](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 109")
![[Tạo 2D Platformer Game với Godot] Phần 17: Tạo Menu 100](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 110")
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 101](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 111")
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 102](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 112")
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 105](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 118")
![[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 106](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 119")
![[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level 107](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 120")
![[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 109](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 122")
