Trong phần này, mình sẽ hướng dẫn bạn cách để thiết kế UI cho game mà thay vì sử dụng các UI khác trên mạng. Mình sẽ chỉ bạn cách sử dụng trực tiếp trong Godot.
Styles
Đối với các phiên bản từ 3.3 trở xuống thì nó được gọi là Custom Styles ở bên ô Inspector của 1 node nào đó thuộc node Control.
Còn ở Godot phiên bản 3.4 trở lên thì nó nằm ở Theme Overrides -> Styles.
Và tất nhiên cái việc thiết kế các node Control này sẽ có hai cách:
+ Một là bạn sẽ sử dụng Theme và khi sử dụng Theme bạn chỉnh ở node gốc thì các node con cũng sẽ được chỉnh theo.
+ Hai là bạn sẽ chỉnh styles riêng của node.
![[Tạo 2D Platformer Game với Godot] Phần 17: Thiết kế UI với Custom Styles](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-12-53-56.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 30")
Ở đây, mình sẽ chọn node NutBatDau để design.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 27](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-12-54-10.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 31")
Bên bảng Inspector của node NutBatDau chọn Theme Overrides -> Styles.
Bạn sẽ thấy có 5 dòng:
- Hover: Kiểu dáng của node khi con chuột di chuyển vào node.
- Pressed: kiểu dáng khi nhấn vào node.
- Focus: tương tự với pressed nhưng mà khi nó focused
- Disabled: kiểu dáng khi bạn đang tắt node này.
- Normal: kiểu dáng khi ở trạng thái bình thường không làm gì cả.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 28](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-00-19.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 32")
Mình sẽ design cá Normal đầu tiên.
Bạn nhấn vào [empty] -> New StyleBoxFlat
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 29](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-01-05.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 33")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 30](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-01-12.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 34")
Sau đó các ban sẽ thấy cái Button đã chuyển sang màu xám và 1 tab các dòng mới xuất hiện bên dưới Normal.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 31](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-03-30.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 35")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 32](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-03-56.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 36")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 33](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-04-02.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 37")
Mình sẽ đổi Bg Color thành màu xanh lá cây và id Color ở đây mình có là 41d822.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 34](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-04-53.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 38")
Tiếp theo mình sẽ vào Conner Radius để chỉnh bán kính góc.
Bạn chỉnh lên cao thì cái góc nó sẽ cài tròn lại nhé.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 35](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-05-57.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 39")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 36](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-06-11.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 40")
Đây là sau khi mình chnhr Corner Radius lên 8.
Nhưng cái Button khá là nhỏ và chữ nó sát hết node rồi nên không đẹp lắm.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 37](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-07-06.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 41")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 38](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-07-13.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 42")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 39](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-07-34.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 43")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 40](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-07-49.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 44")
Do đó, mình sẽ qua phần rect và chỉnh lại ở min size sao cho hợp lí.
Nhớ là chỉnh ở min size chứ không phải ở size đâu nhé, nếu chỉnh ở size khi chạy game nó vẫn reset về size cũ đấy.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 41](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-11-15.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 45")
Tiếp đến, mình sẽ thêm những chi tiết bên ngoài = cách bạt Blend ở Border và chỉnh lại màu cho hợp lí. Ở đây màu của mình là: 385831.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 42](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-12-09.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 46")
Sau khi chỉnh xong Border thì vô Border width chỉnh từ 1 cho tới 3 để nó xuất hiên border nhé.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 43](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-13-31.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 47")
Sau đó mình thêm 1 chút shadow.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 44](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-14-00.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 48")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 45](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-14-22.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 49")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 46](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-14-40.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 50")
Tiếp đó mình sẽ làm với pressed nhưng thay vì phải làm lại từ đầu thì mình sẽ copy nó và dán lại.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 47](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-15-36.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 51")
Sau đó bạn nhấn vô mũi tên ở pressed và chọn make unique nhé.
Nếu không nhấn make unique thì khi bạn chỉnh sửa Styles ở Normal thì Pressed cũng bị thay đổi theo.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 48](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-17-11.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 52")
Mình sẽ chỉnh lại bg color của pressed sáng hơn 1 tý để người dùng biết rằng họ đã nhấn vào rồi.
Màu color của mình : 34fc0b.
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 49](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-18-27.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 53")
Tiếp đó, bạn làm tương tự với Hover.![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 50](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-20-13.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 54")
Mình sẽ có kết quả cuối.
Tổng kết
Vậy là mình đã hướng dẫn bạn cách thiết ké UI với Godot và trong phần tiếp theo sẽ chỉ bạn các tạo custom font.
Câu hỏi thường gặp
Tôi có thể thiết kế UI trong Godot như thế nào?
Bạn có thể thiết kế UI trực tiếp trong Godot bằng cách sử dụng Theme Overrides -> Styles trong Inspector của node Control. Bạn có thể chỉnh sửa styles riêng cho từng node hoặc sử dụng Theme để chỉnh sửa cho nhiều node cùng lúc.
Làm thế nào để tạo các trạng thái khác nhau cho một nút (button) như Hover, Pressed, Disabled?
Trong Theme Overrides -> Styles, bạn sẽ tìm thấy các trạng thái như Normal, Hover, Pressed, Focus, Disabled. Tạo một StyleBoxFlat mới cho mỗi trạng thái và tùy chỉnh màu sắc, hình dạng, bóng đổ,… cho từng trạng thái riêng biệt. Nhớ “Make Unique” để tránh chỉnh sửa một trạng thái ảnh hưởng đến các trạng thái khác.
Tôi nên chỉnh sửa “Size” hay “Min Size” của một nút để thay đổi kích thước?
Nên chỉnh sửa “Min Size” để thay đổi kích thước nút. Chỉnh sửa “Size” có thể bị reset khi chạy game.
![[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game 55](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 63")
![[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 56](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 64")
series quá hay ad , mong ad ra thêm các phần mới !