Trình chỉnh sửa Kiểu tích hợp là một công cụ toàn diện cho phép bạn tạo, quản lý và áp dụng các kiểu UI cho các trò chơi Roblox thông qua sự kết hợp của các token, bảng thiết kế, quy tắc kiểu, và chủ đề.
Truy cập Trình chỉnh sửa kiểu qua tab UI.
Khi mở, nhấp vào nút Tạo thiết kế để tạo một bộ kiểu cơ bản.
Việc tạo một bộ kiểu thiết kế thông qua Trình chỉnh sửa kiểu sẽ tạo ra một BaseStyleSheet bên trong một thư mục Design trong ReplicatedStorage. Bảng cơ bản này đồng bộ hóa các giá trị mặc định cấp engine cụ thể như giá trị mặc định Color3 của [163, 162, 165] với các giá trị mặc định đến từ quy trình chèn trong Studio. Rất khuyến nghị bạn không xóa hoặc cố gắng sửa đổi bảng kiểu cơ bản — thay vào đó, hãy xây dựng các token và quy tắc kiểu xung quanh một bảng thiết kế để phù hợp với mục tiêu UI của bạn.
Ngoài ra, một bảng StyleSheet được tạo ra trong thư mục Design chứa một StyleDerive đến bảng kiểu cơ bản. Nếu bạn chọn xóa StyleDerive đó, các giá trị không kiểu cho GuiObjects có thể trở thành các giá trị không mong đợi, ví dụ như kích thước mặc định Size là 0, 0, 0, 0.
Các token kiểu
Các token kiểu, được định nghĩa thông qua thuộc tính của một token StyleSheet, đại diện cho các biến thuộc tính UI có thể được sử dụng trên nhiều kiểu và thành phần; ví dụ, có thể có một màu chung cho Frame.BackgroundColor3, TextLabel.TextColor3, và UIStroke.Color. Các token tương tự như biến CSS.
Mặc dù không bắt buộc cho việc tạo kiểu UI, nhưng các token được khuyến nghị cao cho thiết kế UI có thể mở rộng và cập nhật kiểu theo thời gian. Bạn nên bắt đầu bằng cách tạo các token sau để hiểu cách chúng liên kết với các khía cạnh khác của kiểu toàn cầu.
Tạo một bảng token kiểu mới:
- Trong cột bên trái của Trình chỉnh sửa kiểu, di chuột qua Tokens, nhấp vào ⊕, và chọn New Token StyleSheet.
- Đổi tên bảng mới thành TokenSheet.
Với bảng token mới được chọn, tạo một số token bằng cách nhấp vào Add a Token… trong bảng chính. Những token này sẽ được sử dụng trong toàn bộ hướng dẫn này cho cả quy tắc và chủ đề.
Tên Token Loại Giá trị Gold Color3 #ffcc00 Magenta Color3 #ff0099 Orange Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 number 24 Text32 number 32 
Bảng thiết kế
Một bảng thiết kế kiểu tổng hợp quy tắc kiểu và có thể được liên kết với các cây DataModel để áp dụng các thuộc tính kiểu cho các thể hiện UI. Chỉ một StyleSheet có thể áp dụng cho một cây nhất định, mặc dù bạn có thể sử dụng chủ đề để hoán đổi các kiểu liên quan trên UI của bạn, một khái niệm sẽ được đề cập sau trong hướng dẫn này.
Một bảng thiết kế được điền sẵn có tên StyleSheet được tạo ra thông qua nút Tạo Thiết kế. Nó chứa các quy tắc lớp cho các đối tượng UI phổ biến như Frame và TextLabel. Nó cũng chứa hai thể hiện StyleDerive mà kế thừa (thừa hưởng) các token và kiểu từ bảng kiểu cơ bản để sử dụng trong các cấu hình kiểu tùy chỉnh của bạn.
Khi bạn có một bảng thiết kế, bạn có thể thiết lập một thùng chứa trên màn hình để sử dụng với Trình chỉnh sửa kiểu, hoặc một thùng chứa trong trò chơi nếu muốn.
Di chuột qua StarterGui trong Explorer và chèn một ScreenGui.
Xác nhận rằng một thể hiện StyleLink mới xuất hiện dưới ScreenGui với thuộc tính StyleSheet được đặt thành bảng thiết kế StyleSheet.
Quy tắc kiểu
Các quy tắc kiểu áp dụng cho mọi thể hiện phù hợp với định nghĩa Selector của quy tắc để phù hợp với các đặc điểm như tên lớp, thẻ thể hiện và mối quan hệ phân cấp. Ở mức cao, việc khớp và sửa đổi thể hiện thông qua định nghĩa Selector của quy tắc hoạt động thông qua:
- Các bộ chọn lớp Roblox nhắm đến tất cả các thể hiện của một lớp UI nhất định, ví dụ như Frame, ImageLabel, TextButton, v.v.
- Lựa chọn tên thể hiện theo giá trị của thuộc tính Instance.Name của đối tượng UI.
Quy tắc lớp
Một bộ chọn lớp kiểu nhắm đến tất cả các thể hiện của một lớp UI nhất định. Cấu hình quy tắc sau đây kiểu hóa tất cả các Frames với một màu nền và kích thước đồng nhất.
Trong cột bên trái của Trình chỉnh sửa kiểu, chọn Frame trong nhánh UI Elements.
Liên kết hai token kiểu đã tạo trước đó với hai thuộc tính Frame:
Thuộc tính Token kiểu BackgroundColor3 $Magenta Size $SquareL - Nhấp vào Add a Property… trong bảng chính và chọn thuộc tính cần thiết. Lưu ý rằng bạn có thể nhập từ khóa để tìm thuộc tính nhanh hơn trong menu thả xuống.
- Thay vì nhập một giá trị tĩnh, nhấp vào nút ⋮ và chọn Link Token.
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token liên kết phù hợp.
Chèn một Frame mới vào ScreenGui mà bạn đã tạo và liên kết trước đó. Các kiểu bạn đã định nghĩa sẽ tự động áp dụng cho nó.
Quy tắc thẻ
Các bộ chọn thẻ thể hiện nhắm đến các đối tượng UI cụ thể được gán thẻ thông qua CollectionService. Cấu hình quy tắc sau đây kiểu hóa một TextButton được gán thẻ là ButtonPrimary với một màu nền tùy chỉnh, phông chữ và kích thước văn bản.
Trong cột bên trái của Trình chỉnh sửa kiểu, di chuột qua bảng StyleSheet, nhấp vào nút ⋮, và điều hướng đến New ⟩ Tag.
Đổi tên quy tắc thẻ mới thành .ButtonPrimary (lưu ý dấu . ở đầu).
Liên kết ba token kiểu đã tạo trước đó với ba thuộc tính TextButton:
Thuộc tính Token kiểu BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Nhấp vào Add a Property… trong bảng chính và chọn thuộc tính cần thiết. Nhớ rằng bạn có thể nhập từ khóa để tìm thuộc tính nhanh hơn trong menu thả xuống.
- Thay vì nhập một giá trị tĩnh, nhấp vào nút ⋮ và chọn Link Token.
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token liên kết phù hợp.
Chèn một TextButton mới vào ScreenGui mà bạn đã tạo và liên kết trước đó và gán thẻ nó là ButtonPrimary. Một phím tắt tiện lợi như sau:
- Đảm bảo rằng TextButton mới được chọn trong Explorer.
- Với quy tắc thẻ .ButtonPrimary được chọn trong cột bên trái của Trình chỉnh sửa kiểu, nhấp vào Apply Tag trong bảng chính. Các kiểu bạn đã định nghĩa sẽ tự động áp dụng cho nút.
Bộ sửa đổi UI
Các bộ chọn sửa đổi thể hiện áp dụng các UIComponents ảo như UICorner hoặc UIStroke để kiểu hóa thêm một đối tượng. Cấu hình quy tắc sau đây kiểu hóa một TextLabel với kích thước văn bản tùy chỉnh và các góc tròn.
Trong cột bên trái của Trình chỉnh sửa kiểu, chọn TextLabel trong nhánh UI Elements.
Liên kết một token kiểu đã tạo trước đó với thuộc tính TextSize:
- Nhấp vào Add a Property… trong bảng chính và chọn thuộc tính TextSize. Nhớ rằng bạn có thể nhập từ khóa để tìm thuộc tính nhanh hơn trong menu thả xuống.
- Thay vì nhập một giá trị tĩnh, nhấp vào nút ⋮ và chọn Link Token.
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token $Text32.
Một thể hiện giả là cần thiết để cấu hình và áp dụng các góc tròn cho các phần tử khác. Để tạo một cái:
Trong cột bên trái, di chuột qua TextLabel, nhấp vào nút ⋮, và điều hướng đến New ⟩ Pseudo Instance ⟩ UICorner.
Một thể hiện UICorner giả mới xuất hiện dưới phần tử TextLabel trong cột bên trái.
Với thể hiện UICorner mới được chọn trong cột bên trái, liên kết một token kiểu đã tạo trước đó với thuộc tính CornerRadius:
- Nhấp vào Add a Property… trong bảng chính và chọn thuộc tính CornerRadius.
- Thay vì nhập một giá trị tĩnh, nhấp vào nút ⋮ và chọn Link Token.
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token $Rad20.
Chèn một TextLabel mới vào ScreenGui mà bạn đã tạo và liên kết trước đó. Các kiểu bạn đã định nghĩa sẽ tự động áp dụng cho nó.
Quy tắc trạng thái
Các bộ chọn trạng thái GuiObject tương ứng với một trong bốn giá trị enum GuiState như Hover, cho phép bạn tự động cấu hình các thay đổi kiểu cho các trạng thái tương tác. Cấu hình quy tắc sau đây tạo ra một trạng thái hover với độ xoay -4 độ cho tất cả các ImageButtons.
Trong cột bên trái của Trình chỉnh sửa kiểu, chọn ImageButton trong nhánh UI Elements.
Nhấp vào nút ⋮ và điều hướng đến New ⟩ GuiState ⟩ Hover.
Một thể hiện sửa đổi Hover mới xuất hiện dưới phần tử ImageButton trong cột bên trái.
Với thể hiện sửa đổi Hover mới được chọn trong cột bên trái, nhấp vào Add a Property… trong bảng chính và chọn Rotation. Nhớ rằng bạn có thể nhập từ khóa để tìm thuộc tính nhanh hơn trong menu thả xuống.
Nhập -4 vào trường giá trị của thuộc tính.
Chèn một ImageButton mới vào ScreenGui mà bạn đã tạo và liên kết trước đó. Khi bạn di chuột qua nút trong viewport, nó sẽ xoay 4 độ ngược chiều kim đồng hồ.
Các truy vấn kiểu
Các truy vấn kiểu, tương tự như truy vấn container và media CSS, cho phép bạn áp dụng logic điều kiện cho UI của bạn dựa trên kích thước container, loại đầu vào, hoặc các yếu tố khác. Trình chỉnh sửa kiểu cung cấp một quy trình làm việc hợp lý để tạo cả logic truy vấn (các điều kiện) và các kiểu kết quả như một tập hợp thống nhất.
Truy vấn tích hợp
Một số điều kiện StyleQuery rất phổ biến, chẳng hạn như thay đổi thuộc tính dựa trên ViewportDisplaySize. Để đơn giản hóa điều này, Trình chỉnh sửa kiểu bao gồm các truy vấn tích hợp cho phép bạn tạo các quy tắc điều kiện mà không cần một thể hiện giả hoặc thực của StyleQuery; thay vào đó, bạn chỉ cần sử dụng một quy tắc truy vấn với một bộ chọn được định nghĩa trước như ViewportDisplaySizeSmall.
Các bước sau đây minh họa cách tạo các truy vấn tích hợp cho một TextLabel để xử lý các kích thước viewport Small, Medium, và Large.
Trong cột bên trái của Trình chỉnh sửa kiểu, di chuột qua TextLabel, nhấp vào nút ⋮, và điều hướng đến New ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
Điều này tạo ra một thư mục Queries dưới quy tắc TextLabel chứa ba quy tắc truy vấn:
- @ViewportDisplaySizeLarge — Định nghĩa các thuộc tính áp dụng khi viewport là Large.
- @ViewportDisplaySizeMedium — Định nghĩa các thuộc tính áp dụng khi viewport là Medium.
- @ViewportDisplaySizeSmall — Định nghĩa các thuộc tính áp dụng khi viewport là Small.
Để xác minh các truy vấn, hãy sử dụng Trình giả lập thiết bị để kiểm tra cách UI phản ứng với các độ phân giải khác nhau trên ba thiết bị khác nhau:
Thay đổi Thiết bị trong Trình giả lập thiết bị để xem văn bản thay đổi theo thời gian thực.
Truy vấn tùy chỉnh
Bạn có thể thêm một truy vấn kiểu vào bất kỳ quy tắc hiện có nào để tạo UI phản hồi tự động thay đổi theo container của nó. Cấu hình sau đây thiết lập một TextLabel để tự động thay đổi diện mạo của nó chỉ khi nó mở rộng đến chiều rộng 400 pixel hoặc hơn.
Trong cột bên trái của Trình chỉnh sửa kiểu, di chuột qua TextLabel, nhấp vào nút ⋮, và điều hướng đến New ⟩ StyleQuery ⟩ Custom.
Hành động này tạo ra một thư mục Queries dưới quy tắc TextLabel chứa hai mục liên kết:
- ::StyleQuery quy tắc thể hiện giả nơi bạn định nghĩa Điều kiện.
- @StyleQuery quy tắc nơi bạn định nghĩa Thuộc tính sẽ áp dụng khi các điều kiện đó được đáp ứng.
Chọn quy tắc TextLabel cha trong bảng chính và định nghĩa các thuộc tính mặc định sau:
Thuộc tính Giá trị BackgroundColor3 $Magenta Text Default Text Chọn quy tắc ::StyleQuery trong bảng chính, nhấp vào Add a Condition…, và cấu hình như sau:
Điều kiện Giá trị MinSize 400, 0 Xem StyleQuery.IsActive như một tham khảo cho các điều kiện khác có sẵn thông qua quy tắc ::StyleQuery.
Chọn quy tắc @StyleQuery trong bảng chính và đặt các thuộc tính sẽ áp dụng khi truy vấn đang hoạt động:
Thuộc tính Giá trị BackgroundColor3 $Gold Text Large Text
Để xác minh truy vấn, bạn có thể thay đổi kích thước thủ công một TextLabel trong viewport.
Điều chỉnh chiều rộng của nó để xem kiểu thay đổi theo thời gian thực.
Trong khi chiều rộng của TextLabel nhỏ hơn, điều kiện MinSize không được đáp ứng và nhãn sử dụng màu nền và văn bản mặc định của nó.
Trong khi việc thay đổi kích thước thủ công là một cách nhanh chóng để kiểm tra logic phản hồi, bạn cũng có thể sử dụng các công cụ giả lập tích hợp của Studio để kiểm tra chính xác hơn:
- Sử dụng Trình giả lập thiết bị để kiểm tra cách UI của bạn phản ứng với các độ phân giải màn hình cụ thể và các điều kiện ViewportDisplaySize.
- Sử dụng Trình giả lập điều khiển để xác minh logic PreferredInput, chẳng hạn như chuyển đổi kiểu khi phát hiện gamepad.
Các chuyển tiếp kiểu
Các chuyển tiếp kiểu, tương tự như chuyển tiếp CSS, cho phép bạn tween các giá trị thuộc tính trong một khoảng thời gian nhất định.
Mặc định
Để tween nhiều thuộc tính UI với cùng một tham số, bạn có thể đặt một chuyển tiếp mặc định áp dụng cho tất cả các thuộc tính trừ khi một chuyển tiếp khác được đặt rõ ràng cho một thuộc tính cụ thể.
Chọn TextButton trong nhánh UI Elements và sau đó, trong bảng chính, thêm ba thuộc tính mới với các giá trị sau:
Thuộc tính Giá trị AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Di chuột qua hàng TextButton cha, nhấp vào nút ⋮ và điều hướng đến New ⟩ GuiState ⟩ Hover.
Đối với thể hiện sửa đổi Hover mới, thêm hai thuộc tính mới làm mục tiêu cho trạng thái hover.
Thuộc tính Giá trị BackgroundColor3 #33AAFF Rotation -5 
Chèn một TextButton mới vào ScreenGui mà bạn đã tạo và liên kết trước đó. Khi bạn di chuột qua nút trong viewport, nó sẽ dần sáng lên và xoay 5 độ ngược chiều kim đồng hồ.
Liên kết token
Để tái sử dụng các hành vi chuyển tiếp trên nhiều quy tắc, bạn có thể định nghĩa các token đại diện cho kiểu dữ liệu TweenInfo. Cấu hình quy tắc sau đây tạo ra một trạng thái hover để chuyển tiếp tất cả các TextButtons đến/từ độ xoay -5 độ và một màu nền sáng hơn.
Nếu bạn chưa làm, hãy tạo một bảng token kiểu có tên TokenSheet.
Chọn TextButton trong nhánh UI Elements và sau đó, trong bảng chính, thêm ba thuộc tính mới với các giá trị sau:
Thuộc tính Giá trị AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Đối với mỗi thuộc tính mới ngoại trừ AutoButtonColor, di chuột qua hàng của nó, nhấp vào nút ⋮ và chọn Insert ⟩ Transition.
Di chuột qua hàng Transition mới dưới mỗi thuộc tính, nhấp vào nút ⋮ và chọn Link Token. Sau đó, thay vì nhập một giá trị tĩnh, nhấp vào $ xuất hiện trong trường giá trị và chọn token chuyển tiếp phù hợp.
Chuyển tiếp thuộc tính Token chuyển tiếp BackgroundColor3 $CubicOut Size $QuadInOut 
Di chuột qua hàng TextButton cha, nhấp vào nút ⋮ và điều hướng đến New ⟩ GuiState ⟩ Hover.
Đối với thể hiện sửa đổi Hover mới, thêm hai thuộc tính mới làm mục tiêu cho trạng thái hover.
Thuộc tính Giá trị BackgroundColor3 #33AAFF Rotation -5 Chèn một TextButton mới vào ScreenGui mà bạn đã tạo và liên kết trước đó. Khi bạn di chuột qua nút trong viewport, nó sẽ dần sáng lên và xoay 5 độ ngược chiều kim đồng hồ.
Các chủ đề kiểu
Các chủ đề kiểu bao gồm các bộ token cụ thể có thể được hoán đổi, chẳng hạn như các token màu xác định một chủ đề "sáng" và "tối".
Tạo chủ đề
Để mở rộng, các chủ đề được tổ chức thành các thư mục. Trong khi một thư mục duy nhất có thể đủ cho hầu hết các mục đích, bạn có thể tự do tổ chức các chủ đề trong các thư mục như "màu sắc" hoặc "phông chữ" nếu muốn.
Tạo một thư mục chủ đề mới:
- Trong cột bên trái của Trình chỉnh sửa kiểu, di chuột qua Themes, nhấp vào ⊕, và chọn New Theme.
- Đổi tên mục Folder mới thành General.
Tạo một bảng kiểu chủ đề mới:
- Di chuột qua thư mục General mới, nhấp vào nút ⋮, và chọn New Theme StyleSheet.
- Đổi tên nó thành ThemeA.
Các token chủ đề
Khi một chủ đề được xây dựng, bạn có thể liên kết các token của nó với các thuộc tính của các đối tượng UI khác nhau như BackgroundColor3 của một TextButton. Các bảng chủ đề phải sử dụng một tập hợp token chung để hoạt động chính xác.
Với ThemeA được chọn trong cột bên trái của Trình chỉnh sửa kiểu:
Liên kết ba token kiểu đã tạo trước đó với ba token chủ đề mới:
Token chủ đề Token kiểu BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Nhấp vào Add a Token… trong bảng chính và nhập tên token chủ đề.
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token kiểu liên kết.
Trong cột bên trái của Trình chỉnh sửa kiểu, chọn TextButton trong nhánh UI Elements.
Liên kết các token của chủ đề với ba thuộc tính mới của TextButton:
Thuộc tính Token chủ đề BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Nhấp vào Add a Property… trong bảng chính và chọn thuộc tính cần thiết.
- Thay vì nhập một giá trị tĩnh, nhấp vào nút ⋮ và chọn Link Token.
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token chủ đề phù hợp.
Khi liên kết các token của chủ đề, hãy tìm $[Token] in ThemeA trong phần hover để biết token đến từ chủ đề và không phải từ bảng token toàn cầu (nhớ rằng chủ đề đã kế thừa các token toàn cầu).
Nhân bản chủ đề
Khi bạn đã thiết lập một chủ đề chung, bạn có thể nhân bản nó và thay đổi các token khác nhau để xác định một kiểu chủ đề độc đáo.
Trong cột bên trái của Trình chỉnh sửa kiểu, di chuột qua chủ đề ThemeA, nhấp vào nút ⋮, và chọn Duplicate.
Đổi tên chủ đề đã nhân bản thành ThemeB.
Liên kết hai token của chủ đề với hai token kiểu khác nhau:
Token chủ đề Token kiểu BackColor $Magenta ButtonTextSize $Text24 - Ở bên phải trường giá trị của thuộc tính, nhấp vào nút ⋮ và chọn Unlink Token.
- Nhấp vào ⋮ một lần nữa và chọn Link Token.
- Trong trường giá trị của nó, nhấp vào $ và chọn token kiểu liên kết mới.
Hoán đổi chủ đề
Khi bạn đã có nhiều chủ đề, bạn có thể hoán đổi giữa chúng thông qua thư mục của chủ đề, hoặc thông qua một script như đã nêu trong SetDerives().
Trong cột bên trái của Trình chỉnh sửa kiểu, chọn thư mục General trong nhánh Themes.
Trong bảng chính, hoán đổi giữa các chủ đề bằng cách sử dụng các nút radio.
