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 88")
Ở đâ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 79](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 89")
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 80](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 90")
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 81](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 91")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 82](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 92")
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 83](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 93")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 84](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 94")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 85](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 95")
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 86](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 96")
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 87](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 97")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 88](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 98")
Đâ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 89](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 99")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 90](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 100")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 91](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 101")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 92](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 102")
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 93](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 103")
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 94](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 104")
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 95](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 105")
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 96](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 106")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 97](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 107")
![[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 98](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 108")
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 99](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 109")
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 100](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 110")
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 101](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 111")
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 102](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 112")
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.
![[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")
series quá hay ad , mong ad ra thêm các phần mới !