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 26")
Ở đâ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 25](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 27")
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 26](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 28")
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 27](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 29")
![[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-01-12.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 30")
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 29](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 31")
![[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-03-56.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 32")
![[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-04-02.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 33")
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 32](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 34")
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 33](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 35")
![[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-06-11.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 36")
Đâ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 35](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 37")
![[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-07-13.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 38")
![[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-34.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 38](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 40")
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 39](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 41")
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 40](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 42")
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 41](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 43")
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 42](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 44")
![[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-14-22.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 45")
![[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-40.png "[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 46")
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 45](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 47")
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 46](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 48")
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 47](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 49")
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 48](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 50")
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.