Stilbearbeiter

*Dieser Inhalt wurde mit KI (Beta) übersetzt und kann Fehler enthalten. Um diese Seite auf Englisch zu sehen, klicke hier.

Der integrierte Style-Editor ist ein umfassendes Werkzeug, mit dem Sie Benutzeroberflächen-Styles für Roblox-Erlebnisse durch eine Kombination aus Token, Designblättern, Style-Regeln und Themen erstellen, verwalten und anwenden können.

Greife über die UI -Registerkarte auf den Stil-Editor zu (wenn er nicht sichtbar ist, greife über die Home-Registerkarte darauf zu).

Style Editor tool indicated in UI tab of Studio toolbar

Sobald es geöffnet ist, klicke auf die Schaltfläche Design erstellen , um eine Grundstilpalette zu generieren.

Create Design button in opening dialog of Style Editor.

Stil-Token

Style Token, definiert durch Attributen eines Tokens, repräsentieren UI-Eigenschaftsvariablen, die über Stile und Komponenten verwendet werden können; zum Beispiel könnte es eine gemeinsame Farbe für ein , und geben.Token sind vergleichbar mit CSS-Variablen.

  1. Erstellen Sie ein neues Token-Stilblatt:

    1. In der linken Spalte des Stil-Editors bewegen Sie den Mauszeiger über Token , klicken Sie auf die und wählen Sie Neues Token-Style-Blatt aus.
    2. Benenne die neue Tabelle auf TokenSheet um.
    New token sheet created in Style Editor.
  2. Mit der neuen Token-Tabelle ausgewählt, erstelle mehrere Token, indem du auf Füge ein Token hinzu… im Hauptpanel klickst.Diese Token werden während dieses Leitfadens sowohl für Regeln als auch für Themen verwendet.

    TokennameTypWert
    GoldColor3#ffcc00
    MagentaColor3#ff0099
    OrangeColor3#dd6030
    OswaldFontOswald
    Rad20UDim0, 20
    RectLUDim20, 300, 0, 160
    SquareLUDim20, 200, 0, 200
    Text24zahl24
    Text32zahl32
    Tokens added to TokenSheet in Style Editor.

Designblätter

Ein Designstil-Blatt sammelt Stilregeln und kann mit DataModel Bäumen verknüpft werden, um Stileigenschaften auf UI-Instanzen anzuwenden.Nur eine StyleSheet kann sich auf einen bestimmten Baum beziehen, obwohl Sie Themen verwenden können, um verwandte Stile über Ihre UI zu wechseln, ein Konzept, das später in diesem Leitfaden abgedeckt wird.

Ein vorausgefülltes Designblatt mit dem Namen StyleSheet wird über die Schaltfläche Design erstellen erstellt.Es enthält Klassenregeln für häufige UI-Objekte wie Frame und TextLabel.Es enthält auch zwei StyleDerive, die (vererben) Token und Stile vom Basis-Stilblatt für die Verwendung in deinen benutzerdefinierten Stilkonfigurationen abstrahieren.

Initial configuration of design sheet in Style Editor.

Sobald du ein Designblatt hast, kannst du einen Test auf-Bildschirm-Container einrichten, um ihn mit dem Stil-Editor zu verwenden, oder einen In-Erlebnis-Container, wenn gewünscht.

  1. Bewegen Sie den Mauszeiger über StarterGui in der Explorer und fügen Sie ein ScreenGui ein.

  2. Bestätigen Sie, dass eine neue StyleLink Instanz unter der ScreenGui mit ihrer StyleSheet Eigenschaft auf die StyleSheet Designseite erscheint.

Stilregeln

Style Regeln gelten für jede Instanz, die die Definition der Regel Selector mit Merkmalen wie Klassenname, Instanz-Tag und Hierarchiebeziehungen übereinstimmt.Auf einer hohen Ebene funktioniert das Übereinstimmen und Modifizieren von Instanzen durch eine Selector-Definition wie folgt:

Klassenregel

Ein Stil Klassen-Selektor zielt auf alle Instanzen einer bestimmten UI-Klasse.Die folgenden Regel-Setup-Stile stellen alle Frames mit einer einheitlichen Hintergrundfarbe und Größe ein.

  1. Wählen Sie in der linken Spalte des Stil-Editors Rahmen in der UI-Elemente -Zweig.

    Default class style in the Style Editor.
  2. Verknüpfe zwei zuvor erstellte Stil-Token mit zwei Frame:

    EigenschaftStil-Token
    BackgroundColor3$Magenta
    Size$SquareL
    1. Klicke auf Füge ein Eigenschaft hinzu… im Hauptfeld und wähle die notwendige Eigenschaft aus.Beachten Sie, dass Sie Schlüsselwörter eingeben können, um die Eigenschaften im Dropdown-Menü schneller zu finden.
    2. Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche und wählen Sie Link-Token .
    3. Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das richtige zugeordnete Token aus.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.
  3. Füge einen neuen Frame in das ScreenGui ein, das du zuvor erstellt und verknüpft hast. Die von dir definierten Stile sollten automatisch darauf angewendet werden.

    Final styled class rule in the Style Editor.

Regel zum Tag

Instance Tag Auswahl spezifische UI-Objekte markiert durch .Die folgende Regelrichtlinie konfiguriert ein -Tag mit einer benutzerdefinierten Hintergrundfarbe, Schriftart und Textgröße.

  1. In der linken Spalte des Stil-Editors bewegen Sie den Mauszeiger über die Style-Tabelle , klicken Sie auf die Schaltfläche und navigieren Sie durch zu Neu > Tag .

    Creation of tag rule in the Style Editor.
  2. Benenne die neue Tagregel umbenennen .ButtonPrimary (merke die führende . an).

    Tag rule renamed in the Style Editor.
  3. Verknüpfe drei zuvor erstellte Stil-Token mit drei TextButton:

    EigenschaftStil-Token
    BackgroundColor3$Gold
    FontFace$Oswald
    TextSize$Text32
    1. Klicke auf Füge ein Eigenschaft hinzu… im Hauptfeld und wähle die notwendige Eigenschaft aus.Denke daran, dass du Schlüsselwörter eingeben kannst, um Eigenschaften schneller im Dropdown-Menü zu finden.
    2. Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche und wählen Sie Link-Token .
    3. Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das richtige zugeordnete Token aus.

    Token linking workflow diagrammed in the Style Editor.
    Tag rule configured with tokens in the Style Editor.
  4. Füge einen neuen TextButton in das ScreenGui ein, das du zuvor erstellt und verknüpft hast und tag es als ButtonPrimary .Ein bequemer Kurzweg ist wie folgt:

    1. Stellen Sie sicher, dass das neue TextButton im Explorer ausgewählt ist.
    2. Mit der .ButtonPrimary Tag-Regel, die in der linken Spalte des Stil-Editors ausgewählt wurde, klicken Sie auf Tag anwenden im Hauptfeld.Die von dir definierten Stile sollten automatisch auf die Schaltfläche angewendet werden.

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

UI-Modifizierer

Instanzmodifizierungs-Selektoren wenden Phantom UIComponents wie UICorner oder UIStroke auf, um ein Objekt weiter zu stylen.Die folgende Regelrichtlinie stellt einen TextLabel mit einer benutzerdefinierten Textgröße und gerundeten Ecken ein.

  1. Wählen Sie in der linken Spalte des Stil-Editors TextLabel in der UI-Elemente -Zweig.

    Default class style in the Style Editor.
  2. Verknüpfe ein zuvor erstelltes Style-Token mit der TextSize:

    1. Klicken Sie auf Fügen Sie ein Eigenschaft hinzu… im Hauptpanel und wählen Sie das Eigenschaft TextSize aus.Denke daran, dass du Schlüsselwörter eingeben kannst, um Eigenschaften schneller im Dropdown-Menü zu finden.
    2. Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche und wählen Sie Link-Token .
    3. Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das $Text32-Token aus.

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

Eine psudoinstanz ist erforderlich, um abgerundete Ecken auf andere Elemente anzuwenden und zu konfigurieren. Um eine zu erstellen:

  1. In der linken Spalte, bewegen Sie den Mauszeiger über TextLabel , klicken Sie auf die Schaltfläche und navigieren Sie durch zu NeuPseudo-InstanzUICorner .

    Creation of a pseudo instance in the Style Editor.

    Eine neue UICorner -Pseudo-Instanz erscheint unter dem TextLabel -Element in der linken Spalte.

    Resulting pseudo instance in the Style Editor.
  2. Mit der neuen UICorner Instanz, die in der linken Spalte ausgewählt wurde, verknüpfen Sie ein zuvor erstelltes Stil-Token mit der CornerRadius:

    1. Klicken Sie auf Fügen Sie ein Eigenschaft hinzu… im Hauptpanel und wählen Sie das Eigenschaft CornerRadius aus.
    2. Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche und wählen Sie Link-Token .
    3. Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das $Rad20-Token aus.
    Pseudo instance configured with tokens in the Style Editor.
  3. Füge einen neuen TextLabel in das ScreenGui ein, das du zuvor erstellt und verknüpft hast. Die von dir definierten Stile sollten automatisch darauf angewendet werden.

    Final styled modifier rule in the Style Editor.

Zustandsregel

GuiObject Zustandsauswahl entspricht einer der vier GuiState Enum-Werte wie Hover, mit denen Sie automatisch Stiländerungen für interaktive Zustände konfigurieren können.Die folgende Regelkonfiguration erstellt einen Hover-Zustand von -4 Grad Rotation für alle ImageButtons.

  1. Wählen Sie in der linken Spalte des Stil-Editors Bild-Button in der UI-Elemente -Zweig.

    Default class style in the Style Editor.
  2. Klicken Sie auf die Schaltfläche und navigieren Sie durch zu Neu > GuiState > Schweben .

    Creation of state rule in the Style Editor.

    Eine neue Schwebe -Zustandsmodifizierungsinstanz erscheint unter dem Bildknopf -Element in der linken Spalte.

    Resulting state rule in the Style Editor.
  3. Mit dem neuen Hover -Modifizierer, der in der linken Spalte ausgewählt wurde, klicken Sie in der Hauptliste auf Eigenschaft hinzufügen... und wählen Sie Rotation.Denke daran, dass du Schlüsselwörter eingeben kannst, um Eigenschaften schneller im Dropdown-Menü zu finden.

  4. Geben Sie -4 in das Wertfeld der Eigenschaft ein.

    State rule configured with tokens in the Style Editor.
  5. Füge einen neuen ImageButton in das ScreenGui ein, das du zuvor erstellt und verknüpft hast.Wenn du über die Schaltfläche im Ansichtsfenster fährst, sollte sie sich um 4 Grad im Uhrzeigersinn drehen.

    Final styled state rule in the Style Editor.

Stilthemen

Style Themen bestehen aus Reihen von spezifischen Tokens, die ausgetauscht werden können, zum Beispiel Farben-Token, die ein "lichtes" und "dunkles" Thema definieren.

Themenerstellung

Für Erweiterbarkeit werden Themen in Ordnern organisiert.Während ein einzelner Ordner für die meisten Zwecke ausreicht, bist du frei, Themen in Ordnern wie "Farben" oder "Schriften" zu organisieren, wenn du es wünschst.

  1. Erstelle einen neuen Themenordner:

    1. In der linken Spalte des Stil-Editors bewegen Sie sich über Themen , klicken Sie auf die und wählen Sie Neues Thema aus.
    2. Benennen Sie das neue Ordner -Element in Allgemein um.
    New themes folder created in the Style Editor.
  2. Erstellen Sie ein neues Thema-Stilblatt:

    1. Bewegen Sie den Mauszeiger über den neuen Allgemeinen Ordner, klicken Sie auf die Schaltfläche und wählen Sie Neues Thema-Style-Sheet .
    2. Benennen Sie es umbenennen zu ThemaA .
    New theme created in the Style Editor.

Thema-Token

Sobald ein Thema erstellt wurde, kannst du seine Token mit verschiedenen UI-Objekt-Eigenschaften wie dem BackgroundColor3 eines TextButton verknüpfen.Themenblätter müssen eine gemeinsame Reihe von Tokens verwenden, um richtig zu funktionieren.

Mit ThemaA , das in der linken Spalte des Stil-Editors ausgewählt wurde:

  1. Verknüpfe drei zuvor erstellte Stil-Token mit drei neuen Themen-Token:

    Thema-TokenStil-Token
    BackColor$Gold
    ButtonFont$Oswald
    ButtonTextSize$Text32
    1. Klicken Sie auf Fügen Sie ein Token hinzu… im Hauptpanel und geben Sie den Namen des Themen-Tokens ein.
    2. Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das zugeordnete Stil-Token aus.
    Theme configured with tokens in the Style Editor.
  2. Wählen Sie in der linken Spalte des Stil-Editors TextButton in der UI-Elemente -Zweig.

    Default class style in the Style Editor.
  3. Verknüpfe die Token des Themas mit drei neuen TextButton Eigenschaften:

    EigenschaftThema-Token
    BackgroundColor3$BackColor
    FontFace$ButtonFont
    TextSize$ButtonTextSize
    1. Klicke auf Füge ein Eigenschaft hinzu… im Hauptfeld und wähle die notwendige Eigenschaft aus.
    2. Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche und wählen Sie Link-Token .
    3. Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das richtige Themen-Token aus.

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

Thema-Dopplung

Sobald Sie ein Thema allgemein festgelegt haben, können Sie es duplizieren und verschiedene Token ändern, um einen einzigartigen Themenstil zu definieren.

  1. In der linken Spalte des Stil-Editors bewegen Sie den Mauszeiger über das ThemaA -Thema, klicken Sie auf die Schaltfläche und wählen Sie Duplizieren .

  2. Benenne das duplizierte Thema in ThemaB um.

    Theme duplicated in the Style Editor.
  3. Verknüpfe zwei der Themen-Token mit zwei verschiedenen Stil-Token:

    Thema-TokenStil-Token
    BackColor$Magenta
    ButtonTextSize$Text24
    1. Klicke rechts vom Wertfeld der Eigenschaft auf die Schaltfläche und wähle Entkoppelungs-Token aus.
    2. Klicke erneut auf und wähle Link-Token .
    3. In seinem Wertfeld klicken Sie auf die $ und wählen Sie das neue verbundene Stil-Token aus.
    Theme configured with tokens in the Style Editor.

Thema-Wechsel

Sobald du mehrere Themen hast, kannst du zwischen ihnen wechseln über den Ordner des Themas oder über ein Skript, wie in SetDerives().

  1. Wählen Sie in der linken Spalte des Stil-Editors den Allgemeinen Ordner in der Themen -Abteilung aus.

  2. Im Hauptpanel wechseln Sie zwischen den Themen, indem Sie die Radio-Buttons verwenden.

    ThemeA swapped in the Style Editor.