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).

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

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.
Erstellen Sie ein neues Token-Stilblatt:
- 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.
- Benenne die neue Tabelle auf TokenSheet um.
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.
Tokenname Typ Wert 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 zahl 24 Text32 zahl 32
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.

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.
Bewegen Sie den Mauszeiger über StarterGui in der Explorer und fügen Sie ein ScreenGui ein.
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:
- Roblox Klassen, die alle Instanzen einer bestimmten UI-Klasse anvisieren, zum Beispiel Frame, ImageLabel, TextButton usw.
- Instance Tag Auswahl von Instanzen, die spezifische UI-Objekte 标记 durch CollectionService anvisieren.
- GuiObjectzustands- auswahlern, die einer der vier Enum.GuiState enum-werte entsprechen, wie z. b. Hover .
- Instanznameauswahl entsprechend dem Wert des UI-Objekts Instance.Name.
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.
Wählen Sie in der linken Spalte des Stil-Editors Rahmen in der UI-Elemente -Zweig.
Verknüpfe zwei zuvor erstellte Stil-Token mit zwei Frame:
Eigenschaft Stil-Token BackgroundColor3 $Magenta Size $SquareL - 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.
- Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche ⋮ und wählen Sie Link-Token .
- Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das richtige zugeordnete Token aus.
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.
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.
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 .
Benenne die neue Tagregel umbenennen .ButtonPrimary (merke die führende . an).
Verknüpfe drei zuvor erstellte Stil-Token mit drei TextButton:
Eigenschaft Stil-Token BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - 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.
- Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche ⋮ und wählen Sie Link-Token .
- Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das richtige zugeordnete Token aus.
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:
- Stellen Sie sicher, dass das neue TextButton im Explorer ausgewählt ist.
- 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.
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.
Wählen Sie in der linken Spalte des Stil-Editors TextLabel in der UI-Elemente -Zweig.
Verknüpfe ein zuvor erstelltes Style-Token mit der TextSize:
- 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.
- Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche ⋮ und wählen Sie Link-Token .
- Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das $Text32-Token aus.
Eine psudoinstanz ist erforderlich, um abgerundete Ecken auf andere Elemente anzuwenden und zu konfigurieren. Um eine zu erstellen:
In der linken Spalte, bewegen Sie den Mauszeiger über TextLabel , klicken Sie auf die Schaltfläche ⋮ und navigieren Sie durch zu Neu ⟩ Pseudo-Instanz ⟩ UICorner .
Eine neue UICorner -Pseudo-Instanz erscheint unter dem TextLabel -Element in der linken Spalte.
Mit der neuen UICorner Instanz, die in der linken Spalte ausgewählt wurde, verknüpfen Sie ein zuvor erstelltes Stil-Token mit der CornerRadius:
- Klicken Sie auf Fügen Sie ein Eigenschaft hinzu… im Hauptpanel und wählen Sie das Eigenschaft CornerRadius aus.
- Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche ⋮ und wählen Sie Link-Token .
- Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das $Rad20-Token aus.
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.
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.
Wählen Sie in der linken Spalte des Stil-Editors Bild-Button in der UI-Elemente -Zweig.
Klicken Sie auf die Schaltfläche ⋮ und navigieren Sie durch zu Neu > GuiState > Schweben .
Eine neue Schwebe -Zustandsmodifizierungsinstanz erscheint unter dem Bildknopf -Element in der linken Spalte.
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.
Geben Sie -4 in das Wertfeld der Eigenschaft ein.
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.
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.
Erstelle einen neuen Themenordner:
- In der linken Spalte des Stil-Editors bewegen Sie sich über Themen , klicken Sie auf die ⊕ und wählen Sie Neues Thema aus.
- Benennen Sie das neue Ordner -Element in Allgemein um.
Erstellen Sie ein neues Thema-Stilblatt:
- Bewegen Sie den Mauszeiger über den neuen Allgemeinen Ordner, klicken Sie auf die Schaltfläche ⋮ und wählen Sie Neues Thema-Style-Sheet .
- Benennen Sie es umbenennen zu ThemaA .
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:
Verknüpfe drei zuvor erstellte Stil-Token mit drei neuen Themen-Token:
Thema-Token Stil-Token BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Klicken Sie auf Fügen Sie ein Token hinzu… im Hauptpanel und geben Sie den Namen des Themen-Tokens ein.
- Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das zugeordnete Stil-Token aus.
Wählen Sie in der linken Spalte des Stil-Editors TextButton in der UI-Elemente -Zweig.
Verknüpfe die Token des Themas mit drei neuen TextButton Eigenschaften:
Eigenschaft Thema-Token BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Klicke auf Füge ein Eigenschaft hinzu… im Hauptfeld und wähle die notwendige Eigenschaft aus.
- Anstatt einen statischen Wert einzugeben, klicken Sie auf die Schaltfläche ⋮ und wählen Sie Link-Token .
- Klicken Sie auf die $, die im Wertfeld erscheint, und wählen Sie das richtige Themen-Token aus.
Thema-Dopplung
Sobald Sie ein Thema allgemein festgelegt haben, können Sie es duplizieren und verschiedene Token ändern, um einen einzigartigen Themenstil zu definieren.
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 .
Benenne das duplizierte Thema in ThemaB um.
Verknüpfe zwei der Themen-Token mit zwei verschiedenen Stil-Token:
Thema-Token Stil-Token BackColor $Magenta ButtonTextSize $Text24 - Klicke rechts vom Wertfeld der Eigenschaft auf die Schaltfläche ⋮ und wähle Entkoppelungs-Token aus.
- Klicke erneut auf ⋮ und wähle Link-Token .
- In seinem Wertfeld klicken Sie auf die $ und wählen Sie das neue verbundene Stil-Token aus.
Thema-Wechsel
Sobald du mehrere Themen hast, kannst du zwischen ihnen wechseln über den Ordner des Themas oder über ein Skript, wie in SetDerives().
Wählen Sie in der linken Spalte des Stil-Editors den Allgemeinen Ordner in der Themen -Abteilung aus.
Im Hauptpanel wechseln Sie zwischen den Themen, indem Sie die Radio-Buttons verwenden.