[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles

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.

Ở đây, mình sẽ chọn node NutBatDau để design.

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ả.

Mình sẽ design cá Normal đầu tiên.

Bạn nhấn vào [empty] -> New StyleBoxFlat

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.

Mình sẽ đổi Bg Color thành màu xanh lá cây và id Color ở đây mình có là 41d822.

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é.

Đâ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.

 

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.

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.

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é.

Sau đó mình thêm 1 chút shadow.

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.

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.

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.

Tiếp đó, bạn làm tương tự với Hover.

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.