Trình soạn thảo phong cách 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 kiểu UI cho trải nghiệm Roblox thông qua sự kết hợp của token , tờ thiết kế , quy tắc kiểu và chủ đề .
Truy cập Trình soạn thảo phong cách thông qua tab UI (nếu nó không hiển thị, truy cập từ tab Trang chủ).

Khi mở, hãy nhấp vào nút Tạo thiết kế để tạo một bộ bảng phong cách cơ bản.

Xu phong cách
Phong cách token , được xác định 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 các phong cách và thành phần; ví dụ, có thể có một màu chung cho một Frame.BackgroundColor3 , TextLabel.TextColor3 và UIStroke.Color .Token có thể so sánh với biến CSS.
Tạo một trang phong cách token mới:
- Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua Token , nhấp vào ⊕ và chọn Tờ phong cách Token mới .
- Đổi tên trang tính mới thành TokenSheet.
Với trang bảng mã mới được chọn, tạo một số token bằng cách nhấp vào Thêm một token… trong bảng điều khiển chính.Các token này sẽ được sử dụng suốt 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 số 24 Text32 số 32
Tờ thiết kế
Một tờ phong cách thiết kế tổng hợp các quy tắc kiểu style và có thể được liên kết với DataModel cây để áp dụng các thuộc tính phong cách cho các thực thể 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ủ đề để thay đổi các phong cách liên quan trên UI của bạn, một khái niệm được bao gồm sau này trong hướng dẫn này.
Một tờ thiết kế đã được lấp đầy có tên là Tờ phong cách được tạo bằng nút Tạo thiết kế .Nó bao gồm các quy tắc lớp cho các đối tượng UI phổ biến như Frame và TextLabel .Nó cũng bao gồm hai StyleDerive instance mà có nguồn gốc (thừa kế) token và phong cách từ trang phong cách cơ bản để sử dụng trong cấu hình phong cách tùy chỉnh của bạn.

Khi bạn có một tờ thiết kế, bạn có thể thiết lập một thùng chứa kiểm tra trên màn hình để sử dụng với Trình biên tập phong cách, hoặc một thùng chứa trong kinh nghiệm nếu muốn.
Chuyển qua StarterGui trong Trình khám phá và chèn ScreenGui .
Xác nhận rằng một instance mới StyleLink xuất hiện dưới ScreenGui với bộ đặt tính StyleSheet của nó được đặt vào trang thiết kế Sheet phong cách .
Quy tắc phong cách
Phong cách quy tắc áp dụng cho mọi ví dụ phù hợp với định nghĩa Selector để phù hợp với các tính năng như tên lớp, thẻ của thực thể và các mối quan hệ cấu trúc.Ở cấp cao, phù hợp và chỉnh sửa ví dụ thông qua định nghĩa Selector của một quy tắc hoạt động thông qua:
- Các máy chọn lớp Roblox class mục tiêu tất cả các thực thể của một lớp UI cụ thể, ví dụ Frame , ImageLabel , TextButton , v.v.
- trạng thái lựa chọn phù hợp với một trong bốn giá trị enum như .
- Lựa chọn tên của instance theo giá trị của đối tượng UI Instance.Name.
Quy tắc lớp
Một style lớp selector mục tiêu tất cả các ví dụ của một lớp UI cụ thể.Các kiểu cài đặt quy tắc sau đây tất 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 soạn thảo phong cách, chọn Khung trong chi nhánh Nguyên tố UI .
Kết nối hai thẻ phong cách đã tạo trước style token đến hai thuộc tính Frame:
Tài sản Xu phong cách BackgroundColor3 $Magenta Size $SquareL - Nhấp vào Thêm một thuộc tính… 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 nhanh hơn các thuộc tính trong menu thả xuống.
- Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút ⋮ và chọn Token Liên kết .
- Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ liên quan thích hợp.
Chèn một kiểu mới vào 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 nhãn
Thẻ instance tag chọn các đối tượng UI cụ thể tagged thông qua CollectionService .Các kiểu cài đặt quy tắc sau đây thiết lập thẻ TextButton được gắn thẻ là ButtonPrimary với một màu nền, phông chữ và kích thước văn bản tùy chỉnh.
Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua tờ Tờ phong cách tờ, nhấp vào nút ⋮ và điều hướng đến Mới ⟩ Thẻ .
Đổi tên quy tắc thẻ mới (lưu ý dẫn đầu ) .
Kết nối ba thẻ phong cách đã tạo trước style token đến ba đặc tính TextButton :
Tài sản Xu phong cách BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính cần thiết.Hãy nhớ rằng bạn có thể nhập từ khóa để tìm kiếm các thuộc tính nhanh hơn trong menu thả xuống.
- Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút ⋮ và chọn Token Liên kết .
- Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ liên quan thích hợp.
Thêm một mới vào bạn đã tạo và liên kết trước đó và thẻ nó như .Một lối tắt thuận tiện như sau:
- Hãy chắc chắn rằng mới TextButton đượ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 soạn thảo phong cách, nhấp vào Áp dụng thẻ trong bảng điều khiển chính.Các kiểu bạn đã xác định sẽ tự động áp dụng cho nút.
Người thay đổi UI
Các trình biến thể ví dụ chọn phantom UIComponents như UICorner hoặc UIStroke để làm cho một đối tượng trở nên phong phú hơn.Các kiểu cài đặt quy tắc sau đây thiết lập một TextLabel với kích thước văn bản tùy chỉnh và các cạnh bo tròn.
Trong cột bên trái của Trình soạn thảo phong cách, chọn Thẻ văn bản trong chi nhánh Các thành phần UI .
Kết nối một thẻ phong cách đã tạo trước style token với thuộc tính TextSize:
- Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính TextSize.Hãy nhớ rằng bạn có thể nhập từ khóa để tìm kiếm các thuộc tính nhanh hơn trong menu thả xuống.
- Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút ⋮ và chọn Token Liên kết .
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token $Text32.
Một pseudo instance là cần thiết để cấu hình và áp dụng các cạnh bo tròn cho các thành phần khác. Để tạo một:
Trong cột bên trái, di chuột qua Nhãn văn bản , nhấp vào nút ⋮ , và điều hướng đến Mới > Pseudo Instances > Góc UICorner .
Một ví dụ mới UICorner hiện lên dưới thành phần TextLabel trong cột bên trái.
Với ví dụ mới UICorner được chọn trong cột bên trái, liên kết một token phong cách đã tạo trước style token đến thuộc tính CornerRadius
- Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính CornerRadius.
- Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút ⋮ và chọn Token Liên kết .
- Nhấp vào $ xuất hiện trong trường giá trị và chọn token $Rad20.
Chèn một kiểu mới vào 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 tiểu bang
trạng thái selectors tương ứng với một trong bốn giá trị enum như , cho phép bạn tự động cấu hình thay đổi phong cách cho các trạng thái tương tác.Cài đặt quy tắc sau đây tạo ra một trạng thái di chuột của -4 độ xoay cho tất cả ImageButtons .
Trong cột bên trái của Trình soạn thảo phong cách, chọn Nút hình ảnh trong chi nhánh Các thành phần UI .
Nhấp vào nút ⋮ và di chuyển qua đến Mới ⟩ GuiState > Chuyển sang .
Một ví dụ chỉnh sửa trạng thái mới Hover xuất hiện dưới đoạn ImageButton trong cột bên trái.
Với người thay đổi mới Hover được chọn trong cột bên trái, nhấp vào Thêm một thuộc tính… trong bảng điều khiển chính và chọn Rotation .Hãy nhớ rằng bạn có thể nhập từ khóa để tìm kiếm các 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 cái mới vào bạn đã tạo và liên kết trước đó .Khi bạn di chuột qua nút trong viewport, nó nên xoay 4 độ theo chiều kim đồng hồ.
Chủ đề phong cách
Chủ đề phong cách bao gồm các bộ token cụ thể có thể được thay thế, ví dụ như token màu định nghĩa một chủ đề "ánh sáng" và "bóng tối".
Tạo chủ đề
Đối với khả năng mở rộng, 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 mục đích, bạn có thể tự do sắp xếp chủ đề trong các thư mục như "màu" 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 soạn thảo phong cách, di chuột qua Chủ đề , nhấp vào ⊕ và chọn Chủ đề mới .
- Đổi tên mục thư mới Thư mục thành Tổng quát .
Tạo một trang phong cách chủ đề mới:
- Chuyển qua trên thư mục mới Chung , nhấp vào nút ⋮ và chọn Tờ phiếu chủ đề mới .
- Đổi tên thành ThemeA .
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 UI khác nhau như BackgroundColor3 của một TextButton.Các tờ nhạc phải sử dụng một bộ thẻ chung để hoạt động đúng cách.
Với Chủ đềA được chọn trong cột bên trái của Trình soạn thảo phong cách:
Kết nối ba thẻ phong cách đã tạo trước style tokens đến ba thẻ chủ đề mới:
Token chủ đề Xu phong cách BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Nhấp vào Thêm một token… trong bảng chính và nhập tên token chủ đề.
- Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ phong cách liên quan.
Trong cột bên trái của Trình soạn thảo phong cách, chọn TextButton trong chi nhánh UI Elements .
Kết nối các token chủ đề với ba thuộc tính mới TextButton :
Tài sản Token chủ đề BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Nhấp vào Thêm một thuộc tính… 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, hãy nhấp vào nút ⋮ và chọn Token Liên kết .
- Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ chủ đề thích hợp.
Sao chép chủ đề
Khi bạn đã có một chủ đề chung được thiết lập, bạn có thể sao chép nó và thay đổi các token khác nhau để xác định một phong cách chủ đề duy nhất.
Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua chủ đề ThemeA , nhấp vào nút ⋮ và chọn Lặp lại .
Đổi tên chủ đề bị sao chép thành ThemeB .
Liên kết hai token chủ đề đến hai token phong cách khác nhau:
Token chủ đề Xu phong cách BackColor $Magenta ButtonTextSize $Text24 - Bên phải của trường giá trị của thuộc tính, nhấp vào nút ⋮ và chọn Phá vỡ liên kết Token .
- Nhấp lại ⋮ và chọn Token Liên kết .
- Trong trường giá trị của nó, nhấp vào $ và chọn thẻ phong cách mới liên quan.
Chuyển đổi chủ đề
Khi bạn có nhiều chủ đề, bạn có thể chuyển đổi giữa chúng thông qua thư mục của chủ đề, hoặc thông qua một kịch bản như được mô tả trong SetDerives() .
Trong cột bên trái của Trình soạn thảo phong cách, hãy chọn thư mục Tổng quát trong nhánh Chủ đề .
Trong bảng chính, thay đổi giữa các chủ đề bằng cách sử dụng nút radio.