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.
![[Tạo 2D Platformer Game với Godot] Phần 26: Thêm điểm số khi hết game 109](https://anonyviet.com/wp-content/uploads/2021/11/24-11-2021-12-17-23-120x86.png "[Tạo 2D Platformer Game với Godot] Phần 26: Thêm điểm số khi hết game 113")
![[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 110](https://anonyviet.com/wp-content/uploads/2021/11/23-11-2021-11-13-02-120x86.png "[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 114")
![[Tạo 2D Platformer Game với Godot] Phần 24: Tạo Pause Menu 111](https://anonyviet.com/wp-content/uploads/2021/11/22-11-2021-02-07-33-120x86.png "[Tạo 2D Platformer Game với Godot] Phần 24: Tạo Pause Menu 115")
![[Tạo 2D Platformer Game với Godot] Phần 23: Chọn Level 112](https://anonyviet.com/wp-content/uploads/2021/11/22-11-2021-12-44-02-1-120x86.png "[Tạo 2D Platformer Game với Godot] Phần 23: Chọn Level 116")
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 85](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 86](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 87](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 88](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 89](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 90](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 91](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 92](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 93](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 94](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 95](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 96](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 97](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 98](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 99](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 100](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 101](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 102](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 103](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 104](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 105](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 106](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 107](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 108](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 26: Thêm điểm số khi hết game 113](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 26: Thêm điểm số khi hết game 117")
![[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 114](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 118")
![[Tạo 2D Platformer Game với Godot] Phần 24: Tạo Pause Menu 115](https://anonyviet.com/wp-content/uploads/2021/11/22-11-2021-02-07-33-283x250.png "[Tạo 2D Platformer Game với Godot] Phần 24: Tạo Pause Menu 119")
![[Tạo 2D Platformer Game với Godot] Phần 23: Chọn Level 116](https://anonyviet.com/wp-content/uploads/2021/11/22-11-2021-12-44-02-1.png "[Tạo 2D Platformer Game với Godot] Phần 23: Chọn Level 120")
![[Tạo 2D Platformer Game với Godot] Phần 22: Thiết kế Level Map. 117](https://anonyviet.com/wp-content/uploads/2021/11/output-onlinepngtools-1-350x250.png "[Tạo 2D Platformer Game với Godot] Phần 22: Thiết kế Level Map. 121")
![[Tạo 2D Platformer Game với Godot] Phần 20: Thiết kế Custom Fonts 118](https://anonyviet.com/wp-content/uploads/2021/11/20-11-2021-01-44-23-350x250.png "[Tạo 2D Platformer Game với Godot] Phần 20: Thiết kế Custom Fonts 122")
series quá hay ad , mong ad ra thêm các phần mới !