內置的 風格編輯器 是一個廣泛的工具,可以通過結合 代幣、設計表、風格規則 和 主題 來創建、管理和應用 Roblox 體驗的用戶介面風格。
使用 UI 標籤存取風格編輯器 (如果不可見,請從 首頁 標籤存取)。

一旦開啟,點擊 創建設計 按鈕以生成基礎風格集。

風格代幣
風格 代幣 ,通過 特性 定義的代幣 StyleSheet ,代表可以在不同風格和組件中使用的 UI 屬性變量;例如,可能會有一個共用顏色 Frame.BackgroundColor3 、 TextLabel.TextColor3 和 UIStroke.Color 。代幣與 CSS 變量 相當。
創建新的代幣風格表:
- 在風格編輯器的左列中,移過 代幣 , 按一下 ⊕ , 然後選擇 新代幣風格表 。
- 將新表重命名為 TokenSheet 。
設計表單
設計風格表會聚合風格規則,並可以與DataModel連結,以應用風格屬性到 UI 實例。只有一個 StyleSheet 可以適用於給定的樹狀結構,雖然您可以使用 主題 來在您的介面交換相關風格,這是本指南後面將討論的概念。
一個名為 風格表 的預填充設計表通過 創建設計 按鈕被創建。它包含普通 UI 對象的類規則,例如 Frame 和 TextLabel 。它還包含兩個StyleDerive 實例,它們從基礎風格表中派生(繼承)代幣 和風格,用於在自定义風格配置中使用。

一旦您擁有設計單,您可以設置一個測試在屏幕上的容器來使用風格編輯器,或是一個經驗內容容器,如果需要。
將鼠標懸停在 StarterGui 中的 探索器 上,然後插入 ScreenGui 。
風格規則
風格 規則 適用於每個匹配規則的 Selector 定義的實例,匹配特性,例如類別名稱、實例標籤和層級關係。在高等級上,通過規則的 Selector 定義匹配和修改實例操作通過:
- 依據 UI 對象的 Instance.Name 值選擇實例名稱。
類別規則
一種風格 類別 選擇器目標所有給定的 UI 類別的實例。以下規則設定風格全部Frames 使用一致的背景顏色和尺寸。
在風格編輯器的左列中,選擇 框架 在 用戶介面元素 分支。
屬性 風格代幣 BackgroundColor3 $Magenta Size $SquareL - 在主面板點擊 添加一個屬性… 然後選擇所需的屬性。請注意,您可以輸入關鍵字以更快地在下拉選單中找到屬性。
- 而不是輸入靜態值,點擊 ⋮ 按鈕,然後選擇 鏈接代幣 。
- 點擊值字段中出現的 $ ,然後選擇正確的關聯代幣。
將新的 插入到你之前創建並鏈接的 中。你定義的風格應自動適用於它。
標籤規則
實例 標籤 選擇器目標特定的用戶介面對象 標記 通過 CollectionService 。以下規則設定將標籤為 TextButton 的標籤標記為 ButtonPrimary 並配有自訂背景顏色、字體和文字尺寸。
在風格編輯器的左列中,將鼠標掃過 風格表 表,點擊 ⋮ 按鈕,然後導航到 新標籤 。
重命名新標籤規則 .ButtonPrimary (注意前面的 . )。
將三個以前創建的 風格代幣 鏈結到三個 TextButton 屬性:
屬性 風格代幣 BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - 在主面板點擊 添加一個屬性… 然後選擇所需的屬性。記住,您可以輸入關鍵字以更快地在下拉選單中找到屬性。
- 而不是輸入靜態值,點擊 ⋮ 按鈕,然後選擇 鏈接代幣 。
- 點擊值字段中出現的 $ ,然後選擇正確的關聯代幣。
插入新的 到你之前創建並鏈結過的 中,並將其標籤為 。一個方便的簡捷方式如下:
- 請確保新的 TextButton 在 導航器 中被選擇。
- 在風格編輯器的左列中選擇 .ButtonPrimary 標籤規則後,點擊風格面板的 應用標籤 。你定義的風格應自動適用於按鈕。
介面修改器
實例修改器選擇器會將幻影 UIComponents 例如 UICorner 或 UIStroke 應用於進一步格式化對象。下列規則設定風格設置了一個 TextLabel 具有自定義文字尺寸和圓角的 。
在風格編輯器的左列中,選擇 文字標籤 在 用戶介面元素 分支。
需要一個 假實例 來配置並應用圓角對其他元素。要創建一個:
在左欄中,移過 文字標籤 ,點擊 ⋮ 按鈕,然後導航到 新 > 假象實例 > UICorner 。
新的 UICorner 假想實例出現在左欄的 TextLabel 元素下。
在左欄選擇了新的 UICorner 實例後,將以前創建的 風格代幣 鏈接到 CornerRadius:
- 在主面板按一下 添加一個屬性… 並選擇 CornerRadius 屬性。
- 而不是輸入靜態值,點擊 ⋮ 按鈕,然後選擇 鏈接代幣 。
- 點擊值字段中出現的 $ ,然後選擇 $Rad20 代幣。
將新的 插入到你之前創建並鏈接的 中。你定義的風格應自動適用於它。
國家規則
GuiObject 狀態 選擇器對應於四個GuiState枚列值之一,例如Hover,讓您自動配置互動狀態的風格變更。以下規則設定創建了所有 ImageButtons 的漂浮狀態的 -4 度旋轉狀態。
在風格編輯器的左列中,選擇 圖像按鈕 在 UI 元素 分支。
點擊 ⋮ 按鈕並穿過到 新 > GuiState > 漂浮 。
一個新的 漂浮 狀態修改器實例出現在左欄的 圖像按鈕 元素下。
在左欄選擇新的 漂浮 修改器後,點擊主面板的 添加一個屬性… 並選擇 Rotation 。記住,您可以輸入關鍵字以更快地在下拉選單中找到屬性。
在屬性值欄中輸入 -4 。
插入新的 到你以前創建並連結的 中。當您在視窗上漂浮按鈕時,它應該轉4度順時針旋轉。
風格主題
風格 主題 由可交換的特定代幣組成,例如定義「光」和「黑」主題的顏色代幣。
主題創建
為了擴展,主題被組織成文件夾。雖然單一文件夾可以滿足大多數用途,但如果需要,您可以在「顏色」或「字體」等文件夾中組織主題。
創建新主題文件夾:
- 在風格編輯器的左列中,移動到 主題 ,點擊 ⊕ ,然後選擇 新主題 。
- 將新的 文件夾 項重命名為 一般 。
創建新主題風格表:
- 將鼠標懸停在新的 一般 文件夾上,點擊 ⋮ 按鈕,然後選擇 新主題風格表 。
- 重命名為 主題A 。
主題代幣
一旦主題被構建,您可以將其代幣鏈接到各種使用者介面對象屬性,例如 BackgroundColor3 的 TextButton 。主題表必須使用一組共用代幣來正確運作。
在風格編輯器的左列中選擇 主題A 時:
將三個以前創建的 風格代幣 鏈結到三個新主題代幣:
主題代幣 風格代幣 BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - 在主面板點擊 添加代幣… 並輸入主題代幣名稱。
- 點擊值字段中出現的 $ ,然後選擇相關的風格代幣。
在風格編輯器的左列中,選擇 文字按鈕 在 UI 元素 分支。
將主題的代幣連結到三個新的 TextButton 屬性:
屬性 主題代幣 BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - 在主面板點擊 添加一個屬性… 然後選擇所需的屬性。
- 而不是輸入靜態值,點擊 ⋮ 按鈕,然後選擇 鏈接代幣 。
- 點擊值字段中出現的 $ ,然後選擇正確的主題代幣。
主題複製
一旦您建立了主題,通常會將其複製 複製 並更改各種代幣來定義獨特的主題風格。
在風格編輯器的左欄中,將鼠標掃過 主題A 主題,點擊 ⋮ 按鈕,然後選擇 重複 。
將複製的主題重命名為 ThemeB 。
將主題的兩個代幣連結到兩個不同風格代幣:
主題代幣 風格代幣 BackColor $Magenta ButtonTextSize $Text24 - 到屬性值字段的右側,點擊 ⋮ 按鈕,然後選擇 解鏈代幣 。
- 再次點擊 ⋮ 並選擇 鏈接代幣 。
- 在其值欄中,單擊 $ 並選擇新的相關風格代幣。
主題切換
一旦您有 多個主題,您可以通過主題的文件夾進行切換,或通過 SetDerives() 中所述的腳本進行切換。
在風格編輯器的左列中,選擇 一般 文件夾在 主題 分支。
在主面板中,使用收音機按鈕切換主題。