L'Editor di Stile integrato è uno strumento completo che ti consente di creare, gestire e applicare stili UI per i giochi Roblox attraverso una combinazione di token, fogli di design, regole di stile e temi.
Accedi all'Editor di 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 di Stile genera un BaseStyleSheet all'interno di una cartella Design in ReplicatedStorage. Questo foglio di base sincronizza specifici valori predefiniti a livello di motore come il valore predefinito di Color3 di [163, 162, 165] con i valori predefiniti che provengono dai flussi di inserimento in Studio. È altamente consigliato che tu non elimini o tenti di modificare il foglio di stile di base — invece, costruisci token e regole di stile attorno a un foglio di design per soddisfare 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 valore predefinito Size di 0, 0, 0, 0.
Token di stile
I token di stile, definiti attraverso attributi di un StyleSheet token, rappresentano variabili di proprietà UI che possono essere utilizzate in tutti gli stili e componenti; ad esempio, potrebbe esserci un colore comune per un Frame.BackgroundColor3, TextLabel.TextColor3 e UIStroke.Color. I token sono comparabili alle variabili CSS.
Sebbene non siano richiesti 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 collegano ad altri aspetti della stilizzazione universale.
Crea un nuovo foglio di token di stile:
- Nella colonna di sinistra dell'Editor di Stile, passa sopra Token, 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 in tutta questa guida sia per le regole che per i temi.
Nome Token Tipo Valore 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 number 24 Text32 number 32 
Fogli 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, anche se puoi 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 per l'uso nelle tue configurazioni di stile personalizzate.
Una volta che hai un foglio di design, puoi impostare un contenitore on-screen di prova da utilizzare con l'Editor di Stile, o un contenitore in-game se desiderato.
Passa sopra StarterGui nell'Esplora e inserisci un ScreenGui.
Conferma che una nuova istanza di StyleLink appaia sotto il ScreenGui con la sua proprietà StyleSheet impostata sul foglio di design StyleSheet.
Se il StyleLink non viene creato, puoi crearne rapidamente uno selezionando il ScreenGui nell'Esplora così come il foglio di design StyleSheet nella colonna di sinistra dell'Editor di 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 alto, il matching e la modifica delle istanze tramite la definizione Selector di una regola operano attraverso:
- Selettori di classe Roblox class che mirano a tutte le istanze di una data classe UI, ad esempio Frame, ImageLabel, TextButton, ecc.
- Modificatori di istanza modifiers applicati tramite componenti fantasma UIComponents come UICorner o UIStroke.
- Selettori di state di GuiObject che corrispondono a uno dei quattro valori dell'enumerazione 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 class mira a tutte le istanze di una data classe UI. La seguente configurazione della regola stila tutti i Frames con un colore di sfondo e una dimensione uniformi.
Nella colonna di sinistra dell'Editor di Stile, seleziona Frame nel ramo 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 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 stila un TextButton taggato come ButtonPrimary con un colore di sfondo personalizzato, un font e una dimensione del testo.
Nella colonna di sinistra dell'Editor di Stile, passa sopra il foglio StyleSheet, fai clic sul pulsante ⋮ e naviga fino a Nuovo ⟩ Tag.
Rinomina la nuova regola di tag in .ButtonPrimary (nota il punto iniziale .).
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 valore e seleziona il token associato corretto.
Inserisci un nuovo TextButton nel ScreenGui che hai precedentemente creato e collegato e taggalo come ButtonPrimary. Un collegamento rapido è il seguente:
- Assicurati che il nuovo TextButton sia selezionato nell'Esplora.
- Con la regola di tag .ButtonPrimary selezionata nella colonna di sinistra dell'Editor di Stile, fai clic su Applica Tag nel pannello principale. Gli stili che hai definito dovrebbero applicarsi automaticamente al pulsante.
Modificatore UI
I selettori di modificatori di istanza applicano componenti fantasma UIComponents come UICorner o UIStroke per ulteriormente stilizzare un oggetto. La seguente configurazione della regola stila un TextLabel con una dimensione del testo personalizzata e angoli arrotondati.
Nella colonna di sinistra dell'Editor di Stile, seleziona TextLabel nel ramo 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 valore e seleziona il token $Text32.
Un pseudo oggetto è necessario per configurare e applicare angoli arrotondati ad altri elementi. Per crearne uno:
Nella colonna di sinistra, passa sopra TextLabel, fai clic sul pulsante ⋮ e naviga fino a Nuovo ⟩ Pseudo Instance ⟩ UICorner.
Una nuova istanza UICorner pseudo appare sotto l'elemento TextLabel nella colonna di sinistra.
Con la nuova istanza UICorner selezionata nella colonna di 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 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 state di GuiObject corrispondono a uno dei quattro valori dell'enumerazione GuiState come Hover, consentendo di configurare automaticamente le modifiche di stile per stati interattivi. La seguente configurazione della regola crea uno stato di hover di -4 gradi di rotazione per tutti i ImageButtons.
Nella colonna di sinistra dell'Editor di Stile, seleziona ImageButton nel ramo UI Elements.
Fai clic sul pulsante ⋮ e naviga fino a Nuovo ⟩ GuiState ⟩ Hover.
Una nuova istanza di modificatore Hover appare sotto l'elemento ImageButton nella colonna di sinistra.
Con il nuovo modificatore Hover selezionato nella colonna di 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 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 logica condizionale alla tua UI in base alla dimensione del contenitore, al tipo di input o ad altri fattori. L'Editor di 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 di StyleQuery sono molto comuni, come cambiare le proprietà in base alla ViewportDisplaySize. Per semplificare questo, l'Editor di Stile include query integrate che ti consentono di creare regole condizionali senza la necessità di un'istanza pseudo o reale di un StyleQuery; invece, utilizzi semplicemente 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 di sinistra dell'Editor di Stile, passa sopra TextLabel, fai clic sul pulsante ⋮ e naviga fino a Nuovo ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
Questo crea una cartella Queries sotto la regola TextLabel contenente tre regole di query:
- @ViewportDisplaySizeLarge — Definisci le proprietà che si applicano quando il viewport è Large.
- @ViewportDisplaySizeMedium — Definisci le proprietà che si applicano quando il viewport è Medium.
- @ViewportDisplaySizeSmall — Definisci le proprietà che si applicano quando il viewport è Small.
Fai clic su Aggiungi una Proprietà… sotto ciascuna regola di query e imposta la stringa Text specifica che dovrebbe essere visualizzata quando quella query è attiva:
Per verificare le query, utilizza l'Emulatore di Dispositivi per testare come la UI risponde a diverse risoluzioni su tre dispositivi distinti:
Cambia il Dispositivo nell'Emulatore di Dispositivi per vedere il testo cambiare in tempo reale.
Query personalizzata
Puoi aggiungere una query di stile a qualsiasi regola esistente per creare una UI reattiva che si adatta al suo contenitore. La seguente configurazione imposta un TextLabel per cambiare automaticamente il suo aspetto solo quando si espande a una larghezza di 400 pixel o più.
Nella colonna di sinistra dell'Editor di Stile, passa sopra TextLabel, fai clic sul pulsante ⋮ e naviga fino a Nuovo ⟩ StyleQuery ⟩ Custom.
Questa azione crea una cartella Queries sotto la regola TextLabel contenente due elementi collegati:
- ::StyleQuery regola di pseudo-istanza in cui definisci le Condizioni.
- @StyleQuery regola in cui definisci le Proprietà da applicare quando quelle condizioni sono soddisfatte.
Seleziona la regola TextLabel principale 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 quanto segue:
Condizione Valore MinSize 400, 0 Vedi StyleQuery.IsActive come riferimento per altre condizioni disponibili tramite 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:
- Usa l'Emulatore di Dispositivi per testare come la tua UI risponde a risoluzioni specifiche dello schermo e condizioni di ViewportDisplaySize.
- Usa l'Emulatore di Controller per verificare la logica di PreferredInput, come il cambio di stili quando viene rilevato un gamepad.
Transizioni di stile
Le transizioni di stile, comparabili alle transizioni CSS, ti consentono di animare i valori delle proprietà su una durata impostata.
Predefinito
Per animare 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 venga esplicitamente impostata per una proprietà specifica.
Seleziona TextButton nel ramo UI Elements e poi, nel pannello principale, aggiungi tre nuove proprietà con i seguenti valori:
Proprietà Valore AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Passa sopra la riga principale TextButton, fai clic sul pulsante ⋮ e naviga fino 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 sopra la riga principale TextButton, fai clic sul pulsante ⋮ e naviga fino 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 gradualmente e ruotare di 5 gradi in senso antiorario.
Collegato ai token
Per riutilizzare i comportamenti di transizione attraverso più regole, puoi definire token che rappresentano il tipo di dato TweenInfo. La seguente configurazione della regola crea uno stato di hover per animare tutti i TextButtons da/a una rotazione di -5 gradi e un colore di sfondo più chiaro.
Se non lo 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 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 ramo UI Elements e poi, nel pannello principale, aggiungi tre nuove proprietà con i seguenti valori:
Proprietà Valore AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Per ogni nuova proprietà tranne AutoButtonColor, passa sopra la sua riga, fai clic sul pulsante ⋮ e seleziona Inserisci ⟩ Transizione.
Passa sopra la nuova riga di 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 valore e seleziona il token di transizione corretto.
Transizione della Proprietà Token di Transizione BackgroundColor3 $CubicOut Size $QuadInOut 
Passa sopra la riga principale TextButton, fai clic sul pulsante ⋮ e naviga fino 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 gradualmente 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. Sebbene una singola cartella possa essere sufficiente per la maggior parte degli scopi, sei libero di organizzare i temi in cartelle come "colori" o "font" se desiderato.
Crea una nuova cartella tema:
- Nella colonna di sinistra dell'Editor di Stile, passa sopra Temi, fai clic su ⊕ e seleziona Nuovo Tema.
- Rinomina il nuovo elemento Cartella in Generale.
Crea un nuovo foglio di stile tema:
- Passa sopra la nuova cartella Generale, fai clic sul pulsante ⋮ e seleziona Nuovo Tema StyleSheet.
- Rinominalo in TemaA.
Token di tema
Una volta che un tema è costruito, puoi collegare i suoi token a varie proprietà di oggetti UI come il BackgroundColor3 di un TextButton. I fogli tema devono utilizzare un insieme comune di token per funzionare correttamente.
Con TemaA selezionato nella colonna di sinistra dell'Editor di Stile:
Collega tre token di stile precedentemente creati a tre nuovi token di tema:
Token di Tema Token di Stile BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Fai clic su Aggiungi un Token… nel pannello principale e inserisci il nome del token di tema.
- Fai clic sul $ che appare nel campo valore e seleziona il token di stile associato.
Nella colonna di sinistra dell'Editor di Stile, seleziona TextButton nel ramo UI Elements.
Collega i token del tema a tre nuove proprietà di TextButton:
Proprietà Token di Tema BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - 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 valore e seleziona il token di tema corretto.
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à i 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 di sinistra dell'Editor di Stile, passa sopra il tema TemaA, fai clic sul pulsante ⋮ e seleziona Duplica.
Rinomina il tema duplicato in TemaB.
Collega due dei token del tema a due diversi token di stile:
Token di Tema Token di Stile BackColor $Magenta ButtonTextSize $Text24 - A destra del campo valore della proprietà, fai clic sul pulsante ⋮ e seleziona Scollega Token.
- Fai clic su ⋮ di nuovo e seleziona Collega Token.
- Nel suo campo valore, fai clic sul $ e seleziona il nuovo token di stile associato.
Scambio di temi
Una volta che hai più temi, puoi scambiarli tramite la cartella del tema, o tramite uno script come descritto in SetDerives().
Nella colonna di sinistra dell'Editor di Stile, seleziona la cartella Generale nel ramo Temi.
Nel pannello principale, scambia tra i temi utilizzando i pulsanti di opzione.
