L'Editor Stile integrato è uno strumento completo che ti consente di creare, gestire e applicare stili UI per i giochi Roblox attraverso una combinazione di token, schede di design, regole di stile e temi.
Accedi all'Editor Stile tramite la scheda UI.
Una volta aperto, fai clic sul pulsante Crea Design per generare un set di stili di base.
Creare un set di stili di design tramite l'Editor Stile genera un BaseStyleSheet all'interno di una cartella Design in ReplicatedStorage. Questo foglio di base sincronizza specifiche impostazioni predefinite a livello di motore, come il valore predefinito di Color3 di [163, 162, 165], con le impostazioni predefinite che provengono dai flussi di inserimento in Studio. Si consiglia vivamente di non eliminare o tentare di modificare il foglio di stile di base — invece, costruisci token e regole di stile attorno a una scheda di design per raggiungere i tuoi obiettivi UI.
Inoltre, un foglio StyleSheet viene generato nella cartella Design che contiene un StyleDerive al foglio di stile di base. Se scegli di rimuovere quel StyleDerive, i valori non stilizzati per GuiObjects potrebbero diventare valori inaspettati, ad esempio un predefinito Size di 0, 0, 0, 0.
Token di stile
I token di stile, definiti tramite attributi di un StyleSheet di token, rappresentano variabili di proprietà UI che possono essere utilizzate in tutti gli stili e i componenti; ad esempio, ci potrebbe essere un colore comune per un Frame.BackgroundColor3, TextLabel.TextColor3 e UIStroke.Color. I token sono comparabili alle variabili CSS.
Sebbene non siano necessari per la stilizzazione UI, i token sono altamente raccomandati per un design UI estensibile e aggiornamenti di stile nel tempo. Dovresti iniziare creando i seguenti token per comprendere come si inseriscono in altri aspetti della stilizzazione universale.
Crea un nuovo foglio di token:
- Nella colonna sinistra dell'Editor Stile, passa il mouse su Tokens, fai clic su ⊕ e seleziona Nuovo Token StyleSheet.
- Rinomina il nuovo foglio in TokenSheet.
Con il nuovo foglio di token selezionato, crea diversi token facendo clic su Aggiungi un Token… nel pannello principale. Questi token verranno utilizzati per tutta questa guida sia per regole che per temi.
Nome Token Tipo Valore Oro Color3 #ffcc00 Magenta Color3 #ff0099 Arancione Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 number 24 Text32 number 32 
Schede di design
Un foglio di stile di design aggrega regole di stile e può essere collegato agli alberi di DataModel per applicare proprietà di stile alle istanze UI. Solo un StyleSheet può applicarsi a un dato albero, sebbene tu possa utilizzare temi per scambiare stili correlati nella tua UI, un concetto trattato più avanti in questa guida.
Un foglio di design precompilato chiamato StyleSheet viene creato tramite il pulsante Crea Design. Contiene regole di classe per oggetti UI comuni come Frame e TextLabel. Contiene anche due istanze di StyleDerive che derivano (ereditano) token e stili dal foglio di stile di base da utilizzare nelle tue configurazioni di stile personalizzato.
Una volta che hai un foglio di design, puoi impostare un contenitore sullo schermo da utilizzare con l'Editor Stile, oppure un contenitore in-esperienza se lo desideri.
Passa il mouse su StarterGui nell' Explorer e inserisci un ScreenGui.
Conferma che una nuova istanza di StyleLink appare sotto il ScreenGui con la sua proprietà StyleSheet impostata sul foglio di design StyleSheet.
Se non viene creato il StyleLink, puoi crearne rapidamente uno selezionando il ScreenGui nell' Explorer così come il foglio di design StyleSheet nella colonna sinistra dell'Editor Stile. Quindi, fai clic sul pulsante Inserisci StyleLink nella sezione in alto a destra del pannello principale dell'editor.
Regole di stile
Le regole di stile si applicano a ogni istanza che corrisponde alla definizione Selector della regola, per abbinare caratteristiche come il nome della classe, il tag dell'istanza e le relazioni gerarchiche. A un livello elevato, il matching delle istanze e la modifica tramite la definizione Selector di una regola operano attraverso:
- Selettori class di Roblox che mirano a tutte le istanze di una data classe UI, ad esempio Frame, ImageLabel, TextButton, ecc.
- Selettori di stato di GuiObject che corrispondono a uno dei quattro valori enumerati dell'enum Enum.GuiState come Hover.
- Selezione del nome dell'istanza in base al valore del Instance.Name dell'oggetto UI.
Regola di classe
Un selettore di classe di stile mira a tutte le istanze di una data classe UI. La seguente configurazione della regola stilizza tutti i Frames con un colore di sfondo uniforme e una dimensione.
Nella colonna sinistra dell'Editor Stile, seleziona Frame nel ramoscello UI Elements.
Collega due token di stile precedentemente creati a due proprietà di Frame:
Proprietà Token di Stile BackgroundColor3 $Magenta Size $SquareL - Fai clic su Aggiungi una Proprietà… nel pannello principale e seleziona la proprietà necessaria. Nota che puoi digitare parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
- Invece di inserire un valore statico, fai clic sul pulsante ⋮ e seleziona Collega Token.
- Fai clic sul $ che appare nel campo del valore e seleziona il token associato corretto.
Inserisci un nuovo Frame nel ScreenGui che hai precedentemente creato e collegato. Gli stili che hai definito dovrebbero applicarsi automaticamente ad esso.
Regola di tag
I selettori di tag di istanza mirano a oggetti UI specifici taggati tramite CollectionService. La seguente configurazione della regola stilizza un TextButton contrassegnato come ButtonPrimary con un colore di sfondo personalizzato, font e dimensione del testo.
Nella colonna sinistra dell'Editor Stile, passa il mouse sulla scheda StyleSheet, fai clic sul pulsante ⋮, e naviga a Nuovo ⟩ Tag.
Rinomina la nuova regola di tag in .ButtonPrimary (nota il punto di apertura .).
Collega tre token di stile precedentemente creati a tre proprietà di TextButton:
Proprietà Token di Stile BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Fai clic su Aggiungi una Proprietà… nel pannello principale e seleziona la proprietà necessaria. Ricorda che puoi digitare parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
- Invece di inserire un valore statico, fai clic sul pulsante ⋮ e seleziona Collega Token.
- Fai clic sul $ che appare nel campo del valore e seleziona il token associato corretto.
Inserisci un nuovo TextButton nel ScreenGui che hai precedentemente creato e collegato e tag come ButtonPrimary. Un collegamento comodo è il seguente:
- Assicurati che il nuovo TextButton sia selezionato nell' Explorer.
- Con la regola del tag .ButtonPrimary selezionata nella colonna sinistra dell'Editor Stile, fai clic su Applica Tag nel pannello principale. Gli stili che hai definiti dovrebbero applicarsi automaticamente al pulsante.
Modificatore UI
I selettori di modificatori di istanza applicano componenti fantasma UIComponents come UICorner o UIStroke per ulteriori stili su un oggetto. La seguente configurazione della regola stilizza un TextLabel con una dimensione del testo personalizzata e angoli arrotondati.
Nella colonna sinistra dell'Editor Stile, seleziona TextLabel nel ramoscello UI Elements.
Collega un token di stile precedentemente creato alla proprietà TextSize:
- Fai clic su Aggiungi una Proprietà… nel pannello principale e seleziona la proprietà TextSize. Ricorda che puoi digitare parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
- Invece di inserire un valore statico, fai clic sul pulsante ⋮ e seleziona Collega Token.
- Fai clic sul $ che appare nel campo del valore e seleziona il token $Text32.
Un pseudo istanza è necessaria per configurare e applicare angoli arrotondati ad altri elementi. Per crearne uno:
Nella colonna sinistra, passa il mouse su TextLabel, fai clic sul pulsante ⋮ e naviga a Nuovo ⟩ Pseudo Instance ⟩ UICorner.
Una nuova istanza pseudonimo UICorner appare sotto l'elemento TextLabel nella colonna sinistra.
Con la nuova istanza UICorner selezionata nella colonna sinistra, collega un token di stile alla proprietà CornerRadius:
- Fai clic su Aggiungi una Proprietà… nel pannello principale e seleziona la proprietà CornerRadius.
- Invece di inserire un valore statico, fai clic sul pulsante ⋮ e seleziona Collega Token.
- Fai clic sul $ che appare nel campo del valore e seleziona il token $Rad20.
Inserisci un nuovo TextLabel nel ScreenGui che hai precedentemente creato e collegato. Gli stili che hai definito dovrebbero applicarsi automaticamente ad esso.
Regola di stato
I selettori di stato di GuiObject corrispondono a uno dei quattro valori enumerati GuiState come Hover, consentendo di configurare automaticamente i cambiamenti di stile per gli stati interattivi. La seguente configurazione della regola crea uno stato di hover con una rotazione di -4 gradi per tutti i ImageButtons.
Nella colonna sinistra dell'Editor Stile, seleziona ImageButton nel ramoscello UI Elements.
Fai clic sul pulsante ⋮ e naviga a Nuovo ⟩ GuiState ⟩ Hover.
Una nuova istanza di modificatore Hover appare sotto l'elemento ImageButton nella colonna sinistra.
Con il nuovo modificatore Hover selezionato nella colonna sinistra, fai clic su Aggiungi una Proprietà… nel pannello principale e seleziona Rotation. Ricorda che puoi digitare parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
Inserisci -4 nel campo del valore della proprietà.
Inserisci un nuovo ImageButton nel ScreenGui che hai precedentemente creato e collegato. Quando passi il mouse sopra il pulsante nella vista, dovrebbe ruotare di 4 gradi in senso antiorario.
Query di stile
Le query di stile, simili alle query di contenitore e media CSS, ti consentono di applicare logiche condizionali alla tua UI in base alla dimensione del contenitore, al tipo di input o ad altri fattori. L'Editor Stile fornisce un flusso di lavoro semplificato per creare sia la logica della query (condizioni) che gli stili risultanti come un insieme unificato.
Query integrate
Alcune condizioni StyleQuery sono molto comuni, come cambiare le proprietà in base al ViewportDisplaySize. Per semplificare questo, l'Editor Stile include query integrate che ti consentono di creare regole condizionali senza la necessità di un'istanza pseudo o reale di StyleQuery; invece, puoi semplicemente utilizzare una regola di query con un selettore predefinito come ViewportDisplaySizeSmall.
I seguenti passaggi dimostrano come generare query integrate per un TextLabel per gestire le dimensioni del viewport Small, Medium e Large.
Nella colonna sinistra dell'Editor Stile, passa il mouse su TextLabel, fai clic sul pulsante ⋮ e naviga a Nuovo ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
Questo crea una cartella Queries sotto la regola TextLabel contenente tre regole di query:
- @ViewportDisplaySizeLarge — Definire le proprietà che si applicano quando il viewport è Large.
- @ViewportDisplaySizeMedium — Definire le proprietà che si applicano quando il viewport è Medium.
- @ViewportDisplaySizeSmall — Definire le proprietà che si applicano quando il viewport è Small.
Fai clic su Aggiungi una Proprietà… sotto ogni regola di query e imposta la stringa specifica Text che dovrebbe visualizzarsi quando quella query è attiva:
Per verificare le query, utilizza l'Emulatore Dispositivo per testare come la UI risponde a diverse risoluzioni su tre dispositivi distinti:
Cambia il Dispositivo nell'Emulatore Dispositivo per vedere il testo cambiare in tempo reale.
Query personalizzata
Puoi aggiungere una query di stile a qualsiasi regola esistente per creare UI responsive che si adattano al loro contenitore. La seguente configurazione imposta un TextLabel in modo tale che cambi automaticamente il suo aspetto solo quando si espande a una larghezza di 400 pixel o più.
Nella colonna sinistra dell'Editor Stile, passa il mouse su TextLabel, fai clic sul pulsante ⋮ e naviga a Nuovo ⟩ StyleQuery ⟩ Custom.
Questa azione crea una cartella Queries sotto la regola TextLabel contenente due articoli collegati:
- ::StyleQuery regola di istanza pseudo in cui definisci le Condizioni.
- @StyleQuery regola in cui definisci le Proprietà da applicare quando quelle condizioni sono soddisfatte.
Seleziona la regola TextLabel parent nel pannello principale e definisci le seguenti proprietà predefinite:
Proprietà Valore BackgroundColor3 $Magenta Text Testo Predefinito Seleziona la regola ::StyleQuery nel pannello principale, fai clic su Aggiungi una Condizione…, e configura il seguente:
Condizione Valore MinSize 400, 0 Vedi StyleQuery.IsActive come riferimento per altre condizioni disponibili attraverso la regola ::StyleQuery.
Seleziona la regola @StyleQuery nel pannello principale e imposta le proprietà che dovrebbero applicarsi quando la query è attiva:
Proprietà Valore BackgroundColor3 $Gold Text Testo Grande
Per verificare la query, puoi ridimensionare manualmente un TextLabel nella vista.
Regola la sua larghezza per vedere lo stile cambiare in tempo reale.
Mentre la larghezza del TextLabel è più piccola, la condizione MinSize non è soddisfatta e l'etichetta utilizza il suo colore di sfondo e testo predefiniti.
Sebbene il ridimensionamento manuale sia un modo rapido per controllare la logica reattiva, puoi anche utilizzare gli strumenti di emulazione integrati di Studio per test più precisi:
- Utilizza l'Emulatore Dispositivo per testare come la tua UI risponde a specifiche risoluzioni dello schermo e condizioni di ViewportDisplaySize.
- Utilizza l'Emulatore Controller per verificare la logica di PreferredInput, ad esempio cambiando stili quando viene rilevato un gamepad.
Transizioni di stile
Le transizioni di stile, comparabili alle transizioni CSS, ti permettono di tweenare i valori delle proprietà su una durata impostata.
Predefinito
Per tweenare molte proprietà UI con gli stessi parametri, puoi impostare una transizione predefinita che si applica a tutte le proprietà a meno che un'altra transizione non sia impostata esplicitamente per una proprietà specifica.
Seleziona TextButton nel ramoscello UI Elements e poi, nel pannello principale, aggiungi tre nuove proprietà con i seguenti valori:
Proprietà Valore AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Passa il mouse sulla riga del genitore TextButton, fai clic sul pulsante ⋮ e naviga a Inserisci ⟩ Transizione.
Una transizione predefinita di 1, Quad, Out, 0 viene inserita direttamente sotto la regola TextButton, indicando una transizione di 1 secondo, stile di easing Quad, direzione di easing Out e nessun ritardo.
Passa il mouse sulla riga del genitore TextButton, fai clic sul pulsante ⋮ e naviga a Nuovo ⟩ GuiState ⟩ Hover.
Per il nuovo modificatore Hover, aggiungi due nuove proprietà come target per lo stato di hover.
Proprietà Valore BackgroundColor3 #33AAFF Rotation -5 
Inserisci un nuovo TextButton nel ScreenGui che hai precedentemente creato e collegato. Quando passi il mouse sopra il pulsante nella vista, dovrebbe schiarirsi progressivamente e ruotare di 5 gradi in senso antiorario.
Collegato ai token
Per riutilizzare comportamenti di transizione attraverso più regole, puoi definire token che rappresentano il tipo di dati TweenInfo. La seguente configurazione della regola crea uno stato di hover per transitare tutti i TextButtons da/a una rotazione di -5 gradi e un colore di sfondo più chiaro.
Se non l'hai già fatto, crea un foglio di token di stile chiamato TokenSheet.
Con il nuovo foglio di token selezionato, crea due nuovi token facendo clic su Aggiungi un Token… nel pannello principale.
Nome Token Tipo Parametri di Tween CubicOut TweenInfo - Duration = 1.25
- EasingStyle = Cubic
- EasingDirection = Out
- Delay = 0
QuadInOut TweenInfo - Duration = 0.5
- EasingStyle = Quad
- EasingDirection = InOut
- Delay = 0
Seleziona TextButton nel ramoscello UI Elements e poi, nel pannello principale, aggiungi tre nuove proprietà con i seguenti valori:
Proprietà Valore AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Per ciascuna nuova proprietà, tranne per AutoButtonColor, passa il mouse sopra la sua riga, fai clic sul pulsante ⋮ e seleziona Inserisci ⟩ Transizione.
Passa il mouse sopra la nuova riga Transizione sotto ciascuna proprietà, fai clic sul pulsante ⋮ e seleziona Collega Token. Quindi, invece di inserire un valore statico, fai clic sul $ che appare nel campo del valore e seleziona il token di transizione appropriato.
Transizione Proprietà Token di Transizione BackgroundColor3 $CubicOut Size $QuadInOut 
Passa il mouse sulla riga del genitore TextButton, fai clic sul pulsante ⋮ e naviga a Nuovo ⟩ GuiState ⟩ Hover.
Per il nuovo modificatore Hover, aggiungi due nuove proprietà come target per lo stato di hover.
Proprietà Valore BackgroundColor3 #33AAFF Rotation -5 Inserisci un nuovo TextButton nel ScreenGui che hai precedentemente creato e collegato. Quando passi il mouse sopra il pulsante nella vista, dovrebbe schiarirsi progressivamente e ruotare di 5 gradi in senso antiorario.
Temi di stile
I temi di stile consistono in set di token specifici che possono essere scambiati, ad esempio token di colore che definiscono un tema "chiaro" e "scuro".
Creazione di un tema
Per estensibilità, i temi sono organizzati in cartelle. Mentre una singola cartella può essere sufficiente per la maggior parte degli scopi, sei libero di organizzare i temi in cartelle come "colori" o "font" se lo desideri.
Crea una nuova cartella per il tema:
- Nella colonna sinistra dell'Editor Stile, passa il mouse su Temi, fai clic su ⊕ e seleziona Nuovo Tema.
- Rinomina il nuovo elemento Cartella in Generale.
Crea un nuovo foglio di tema:
- Passa il mouse sopra la nuova cartella Generale, fai clic sul pulsante ⋮ e seleziona Nuovo Tema StyleSheet.
- Rinominalo in TemaA.
Token di tema
Una volta costruito un tema, puoi collegare i suoi token a varie proprietà di oggetti UI come il BackgroundColor3 di un TextButton. I fogli tema devono utilizzare un set comune di token per funzionare correttamente.
Con TemaA selezionato nella colonna sinistra dell'Editor Stile:
Collega tre token di stile precedentemente creati a tre nuovi token di tema:
Token di Temi Token di Stile ColoreSfondo $Oro FontPulsante $Oswald DimensioneTestoPulsante $Text32 - Fai clic su Aggiungi un Token… nel pannello principale e inserisci il nome del token del tema.
- Fai clic sul $ che appare nel campo del valore e seleziona il token di stile associato.
Nella colonna sinistra dell'Editor Stile, seleziona TextButton nel ramoscello UI Elements.
Collega i token del tema a tre nuove proprietà di TextButton:
Proprietà Token di Temi BackgroundColor3 $ColoreSfondo FontFace $FontPulsante TextSize $DimensioneTestoPulsante - Fai clic su Aggiungi una Proprietà… nel pannello principale e seleziona la proprietà necessaria.
- Invece di inserire un valore statico, fai clic sul pulsante ⋮ e seleziona Collega Token.
- Fai clic sul $ che appare nel campo del valore e seleziona il token di tema appropriato.
Quando colleghi i token del tema, cerca $[Token] in TemaA nell'hover per sapere che il token proviene dal tema e non dal foglio di token globale (ricorda che il tema deriva già dai token globali).
Duplica tema
Una volta che hai un tema generalmente stabilito, puoi duplicarlo e cambiare vari token per definire uno stile di tema unico.
Nella colonna sinistra dell'Editor Stile, passa il mouse sul tema TemaA, fai clic sul pulsante ⋮ e seleziona Duplica.
Rinomina il tema duplicato in TemaB.
Collega due dei token del tema a due token di stile diversi:
Token di Temi Token di Stile ColoreSfondo $Magenta DimensioneTestoPulsante $Text24 - A destra del campo del valore della proprietà, fai clic sul pulsante ⋮ e seleziona Disaccoppia Token.
- Fai clic su ⋮ di nuovo e seleziona Collega Token.
- Nel campo del valore, fai clic sul $ e seleziona il nuovo token di stile associato.
Scambio di temi
Una volta che hai più temi, puoi scambiare tra di essi tramite la cartella del tema o tramite uno script come delineato in SetDerives().
Nella colonna sinistra dell'Editor Stile, seleziona la cartella Generale nel ramo Temi.
Nel pannello principale, scambia i temi utilizzando i pulsanti radio.
