風格編輯器

*此內容是使用 AI(Beta 測試版)翻譯,可能含有錯誤。若要以英文檢視此頁面,請按一下這裡

內置的 風格編輯器 是一個廣泛的工具,可以通過結合 代幣設計表風格規則主題 來創建、管理和應用 Roblox 體驗的用戶介面風格。

使用 UI 標籤存取風格編輯器 (如果不可見,請從 首頁 標籤存取)。

Style Editor tool indicated in UI tab of Studio toolbar

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

Create Design button in opening dialog of Style Editor.

風格代幣

風格 代幣 ,通過 特性 定義的代幣 StyleSheet ,代表可以在不同風格和組件中使用的 UI 屬性變量;例如,可能會有一個共用顏色 Frame.BackgroundColor3TextLabel.TextColor3UIStroke.Color 。代幣與 CSS 變量 相當。

  1. 創建新的代幣風格表:

    1. 在風格編輯器的左列中,移過 代幣 , 按一下 , 然後選擇 新代幣風格表
    2. 將新表重命名為 TokenSheet
    New token sheet created in Style Editor.
  2. 選擇新的代幣片後,點擊主面板中的 添加代幣… 即可創建多個代幣。這些代幣將在此指南中用於 both 規則主題 的所有部分。

    代币名稱類型
    GoldColor3#ffcc00
    MagentaColor3#ff0099
    OrangeColor3#dd6030
    OswaldFontOswald
    Rad20UDim0, 20
    RectLUDim20, 300, 0, 160
    SquareLUDim20, 200, 0, 200
    Text24數字24
    Text32數字32
    Tokens added to TokenSheet in Style Editor.

設計表單

設計風格表會聚合風格規則,並可以與DataModel連結,以應用風格屬性到 UI 實例。只有一個 StyleSheet 可以適用於給定的樹狀結構,雖然您可以使用 主題 來在您的介面交換相關風格,這是本指南後面將討論的概念。

一個名為 風格表 的預填充設計表通過 創建設計 按鈕被創建。它包含普通 UI 對象的類規則,例如 FrameTextLabel 。它還包含兩個StyleDerive 實例,它們從基礎風格表中派生(繼承)代幣 和風格,用於在自定义風格配置中使用。

Initial configuration of design sheet in Style Editor.

一旦您擁有設計單,您可以設置一個測試在屏幕上的容器來使用風格編輯器,或是一個經驗內容容器,如果需要。

  1. 將鼠標懸停在 StarterGui 中的 探索器 上,然後插入 ScreenGui

  2. 確認新的 StyleLink 實例出現在 ScreenGui 下,其 StyleSheet 屬性設置為 風格表 設計單的設計。

風格規則

風格 規則 適用於每個匹配規則的 Selector 定義的實例,匹配特性,例如類別名稱、實例標籤和層級關係。在高等級上,通過規則的 Selector 定義匹配和修改實例操作通過:

類別規則

一種風格 類別 選擇器目標所有給定的 UI 類別的實例。以下規則設定風格全部Frames 使用一致的背景顏色和尺寸。

  1. 在風格編輯器的左列中,選擇 框架用戶介面元素 分支。

    Default class style in the Style Editor.
  2. 將兩個以前創建的 風格代幣 鏈結到兩個 Frame 屬性:

    屬性風格代幣
    BackgroundColor3$Magenta
    Size$SquareL
    1. 在主面板點擊 添加一個屬性… 然後選擇所需的屬性。請注意,您可以輸入關鍵字以更快地在下拉選單中找到屬性。
    2. 而不是輸入靜態值,點擊 按鈕,然後選擇 鏈接代幣
    3. 點擊值字段中出現的 $ ,然後選擇正確的關聯代幣。

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.
  3. 將新的 插入到你之前創建並鏈接的 中。你定義的風格應自動適用於它。

    Final styled class rule in the Style Editor.

標籤規則

實例 標籤 選擇器目標特定的用戶介面對象 標記 通過 CollectionService 。以下規則設定將標籤為 TextButton 的標籤標記為 ButtonPrimary 並配有自訂背景顏色、字體和文字尺寸。

  1. 在風格編輯器的左列中,將鼠標掃過 風格表 表,點擊 ⋮ 按鈕,然後導航到 新標籤 。

    Creation of tag rule in the Style Editor.
  2. 重命名新標籤規則 .ButtonPrimary (注意前面的 . )。

    Tag rule renamed in the Style Editor.
  3. 將三個以前創建的 風格代幣 鏈結到三個 TextButton 屬性:

    屬性風格代幣
    BackgroundColor3$Gold
    FontFace$Oswald
    TextSize$Text32
    1. 在主面板點擊 添加一個屬性… 然後選擇所需的屬性。記住,您可以輸入關鍵字以更快地在下拉選單中找到屬性。
    2. 而不是輸入靜態值,點擊 按鈕,然後選擇 鏈接代幣
    3. 點擊值字段中出現的 $ ,然後選擇正確的關聯代幣。

    Token linking workflow diagrammed in the Style Editor.
    Tag rule configured with tokens in the Style Editor.
  4. 插入新的 到你之前創建並鏈結過的 中,並將其標籤為 。一個方便的簡捷方式如下:

    1. 請確保新的 TextButton導航器 中被選擇。
    2. 在風格編輯器的左列中選擇 .ButtonPrimary 標籤規則後,點擊風格面板的 應用標籤 。你定義的風格應自動適用於按鈕。

    Tag linking workflow diagrammed in the Style Editor.
    Final styled tag rule in the Style Editor.

介面修改器

實例修改器選擇器會將幻影 UIComponents 例如 UICornerUIStroke 應用於進一步格式化對象。下列規則設定風格設置了一個 TextLabel 具有自定義文字尺寸和圓角的 。

  1. 在風格編輯器的左列中,選擇 文字標籤用戶介面元素 分支。

    Default class style in the Style Editor.
  2. 將先前創建的 風格代幣 鏈結到 TextSize 屬性:

    1. 在主面板按一下 添加一個屬性… 並選擇 TextSize 屬性。記住,您可以輸入關鍵字以更快地在下拉選單中找到屬性。
    2. 而不是輸入靜態值,點擊 按鈕,然後選擇 鏈接代幣
    3. 點擊值字段中出現的 $ ,然後選擇 $Text32 代幣。

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.

需要一個 假實例 來配置並應用圓角對其他元素。要創建一個:

  1. 在左欄中,移過 文字標籤 ,點擊 按鈕,然後導航到 > 假象實例 > UICorner

    Creation of a pseudo instance in the Style Editor.

    新的 UICorner 假想實例出現在左欄的 TextLabel 元素下。

    Resulting pseudo instance in the Style Editor.
  2. 在左欄選擇了新的 UICorner 實例後,將以前創建的 風格代幣 鏈接到 CornerRadius

    1. 在主面板按一下 添加一個屬性… 並選擇 CornerRadius 屬性。
    2. 而不是輸入靜態值,點擊 按鈕,然後選擇 鏈接代幣
    3. 點擊值字段中出現的 $ ,然後選擇 $Rad20 代幣。
    Pseudo instance configured with tokens in the Style Editor.
  3. 將新的 插入到你之前創建並鏈接的 中。你定義的風格應自動適用於它。

    Final styled modifier rule in the Style Editor.

國家規則

GuiObject 狀態 選擇器對應於四個GuiState枚列值之一,例如Hover,讓您自動配置互動狀態的風格變更。以下規則設定創建了所有 ImageButtons 的漂浮狀態的 -4 度旋轉狀態。

  1. 在風格編輯器的左列中,選擇 圖像按鈕UI 元素 分支。

    Default class style in the Style Editor.
  2. 點擊 按鈕並穿過到 > GuiState > 漂浮

    Creation of state rule in the Style Editor.

    一個新的 漂浮 狀態修改器實例出現在左欄的 圖像按鈕 元素下。

    Resulting state rule in the Style Editor.
  3. 在左欄選擇新的 漂浮 修改器後,點擊主面板的 添加一個屬性… 並選擇 Rotation 。記住,您可以輸入關鍵字以更快地在下拉選單中找到屬性。

  4. 在屬性值欄中輸入 -4

    State rule configured with tokens in the Style Editor.
  5. 插入新的 到你以前創建並連結的 中。當您在視窗上漂浮按鈕時,它應該轉4度順時針旋轉。

    Final styled state rule in the Style Editor.

風格主題

風格 主題 由可交換的特定代幣組成,例如定義「光」和「黑」主題的顏色代幣。

主題創建

為了擴展,主題被組織成文件夾。雖然單一文件夾可以滿足大多數用途,但如果需要,您可以在「顏色」或「字體」等文件夾中組織主題。

  1. 創建新主題文件夾:

    1. 在風格編輯器的左列中,移動到 主題 ,點擊 ,然後選擇 新主題
    2. 將新的 文件夾 項重命名為 一般
    New themes folder created in the Style Editor.
  2. 創建新主題風格表:

    1. 將鼠標懸停在新的 一般 文件夾上,點擊 按鈕,然後選擇 新主題風格表
    2. 重命名為 主題A
    New theme created in the Style Editor.

主題代幣

一旦主題被構建,您可以將其代幣鏈接到各種使用者介面對象屬性,例如 BackgroundColor3TextButton 。主題表必須使用一組共用代幣來正確運作。

在風格編輯器的左列中選擇 主題A 時:

  1. 將三個以前創建的 風格代幣 鏈結到三個新主題代幣:

    主題代幣風格代幣
    BackColor$Gold
    ButtonFont$Oswald
    ButtonTextSize$Text32
    1. 在主面板點擊 添加代幣… 並輸入主題代幣名稱。
    2. 點擊值字段中出現的 $ ,然後選擇相關的風格代幣。
    Theme configured with tokens in the Style Editor.
  2. 在風格編輯器的左列中,選擇 文字按鈕UI 元素 分支。

    Default class style in the Style Editor.
  3. 將主題的代幣連結到三個新的 TextButton 屬性:

    屬性主題代幣
    BackgroundColor3$BackColor
    FontFace$ButtonFont
    TextSize$ButtonTextSize
    1. 在主面板點擊 添加一個屬性… 然後選擇所需的屬性。
    2. 而不是輸入靜態值,點擊 按鈕,然後選擇 鏈接代幣
    3. 點擊值字段中出現的 $ ,然後選擇正確的主題代幣。

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with theme tokens in the Style Editor.

主題複製

一旦您建立了主題,通常會將其複製 複製 並更改各種代幣來定義獨特的主題風格。

  1. 在風格編輯器的左欄中,將鼠標掃過 主題A 主題,點擊 按鈕,然後選擇 重複

  2. 將複製的主題重命名為 ThemeB

    Theme duplicated in the Style Editor.
  3. 將主題的兩個代幣連結到兩個不同風格代幣:

    主題代幣風格代幣
    BackColor$Magenta
    ButtonTextSize$Text24
    1. 到屬性值字段的右側,點擊 按鈕,然後選擇 解鏈代幣
    2. 再次點擊 並選擇 鏈接代幣
    3. 在其值欄中,單擊 $ 並選擇新的相關風格代幣。
    Theme configured with tokens in the Style Editor.

主題切換

一旦您有 多個主題,您可以通過主題的文件夾進行切換,或通過 SetDerives() 中所述的腳本進行切換。

  1. 在風格編輯器的左列中,選擇 一般 文件夾在 主題 分支。

  2. 在主面板中,使用收音機按鈕切換主題。

    ThemeA swapped in the Style Editor.