L'Editor di stile integrato è uno strumento completo che ti consente di creare, gestire e applicare gli stili dell'interfaccia utente per le esperienze Roblox attraverso una combinazione di token , fogli di progettazione , regole di stile e temi .
Accedi all'Editor di stile tramite la scheda Interfaccia utente (se non è visibile, accedici dalla scheda Home).
Una volta aperto, fai clic sul pulsante Crea design per generare un set di stile di base.
Creare un set di stile di progettazione attraverso l'Editor di stile genera un BaseStyleSheet all'interno di una cartella Design entro ReplicatedStorage .Questa base sincronizza specifici predefiniti a livello di motore come il predefinito di Color3 con predefiniti che provengono da flussi di lavoro di inserimento in Studio.Si consiglia vivamente di non eliminare o tentare di modificare lo stile di base della pagina — invece, costruisci gettoni e regole di stile attorno a una pagina di progettazione per abbinare gli obiettivi dell'interfaccia.
Inoltre, viene generata una foglia StyleSheet nella cartella Design che contiene un StyleDerive alla foglia di stile di base.Se scegli di rimuovere quell' StyleDerive , i valori non formattati per GuiObjects possono diventare valori inaspettati, ad esempio un valore predefinito Size di > .
Token di stile
Stile token , definito attraverso attributi di un token StyleSheet , rappresenta le variabili proprietà dell'interfaccia utente che possono essere utilizzate attraverso gli stili e le componenti; ad esempio, potrebbe esserci un colore comune per un Frame.BackgroundColor3 , TextLabel.TextColor3 e UIStroke.Color .I token sono paragonabili a CSS variables .
Sebbene non sia richiesto per lo stile dell'interfaccia utente, i token sono altamente raccomandati per gli aggiornamenti e gli stili dell'interfaccia utente estendibile nel tempo.Dovresti iniziare creando i seguenti token per capire come si collegano ad altri aspetti dello stile universale.
Crea una nuova tabella di stile del token:
- Nella colonna di sinistra dell'Editor di stile, passa il mouse su Gettoni , clicca il ⊕ e seleziona Nuovo foglio di stile dei gettoni .
- Rinomina la nuova scheda a TokenSheet .
Con la nuova scheda di token selezionata, crea diversi token facendo clic su Aggiungi un token... nel pannello principale.Questi token verranno utilizzati durante questa guida per entrambe le regole e temi .
Nome del 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 numbero 24 Text32 numbero 32 
Schede di progettazione
Una foglia di stile di progettazione raccoglie regole di stile e può essere collegata a DataModel alberi per applicare proprietà di stile alle istanze dell'interfaccia utente.Solo uno StyleSheet può essere applicato a un dato albero, anche se puoi usare temi per scambiare stili correlati attraverso la tua interfaccia utente, un concetto trattato in seguito in questa guida.
Una scheda di progettazione prepopolata chiamata StyleSheet viene creata tramite il pulsante Crea progetto .Contiene regole di classe per oggetti UI comuni come Frame e TextLabel .Contiene anche due StyleDerive istanze che derivano (ereditano) token e stili dalla foglia di stile base per l'uso nelle tue configurazioni di stile personalizzate.
Una volta che hai una scheda di progettazione, puoi configurare un test contenitore sullo schermo da utilizzare con l'Editor di stile, o un contenitore in-experience se lo desideri.
Passa il mouse su StarterGui in Explorer e inserisci un ScreenGui.
Conferma che una nuova istanza StyleLink appare sotto la ScreenGui con il suo set di proprietà StyleSheet impostato sulla foglia di stile StyleSheet .
Regole di stile
Gli stili regole si applicano a ogni istanza che corrisponde alla definizione della regola Selector per corrispondere a caratteristiche come il nome della classe, il tag dell'istanza e le relazioni di gerarchiaA livello alto, la corrispondenza e la modifica dell'istanza attraverso la definizione di una regola Selector opera attraverso:
- Selettori di classe Roblox che mirano a tutte le istanze di una classe UI data, ad esempio , , , ecc.
- Instance tag selezionatori che mirano a oggetti UI specifici contrassegnati attraverso CollectionService.
- GuiObjectstato selezionatori che corrispondono a uno dei quattro valori enum Enum.GuiState come Hover .
- Selezione del nome dell'istanza in base al valore dell'oggetto UI Instance.Name .
Regola di classe
Un selettore di stile classe targetizza tutte le istanze di una classe UI data.Il seguente stile di configurazione delle regole imposta tutti Frames con un colore e una dimensione di sfondo uniformi.
Nella colonna di sinistra dell'Editor di stile, seleziona Frame nella branch Elementi dell'interfaccia utente .
Collega due token di stile precedentemente creati a due proprietà :
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 le parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
- Invece di inserire un valore statico, clicca il pulsante ⋮ e seleziona Token di link .
- Fai clic sul $ che appare nel campo di valore e seleziona il token associato appropriato.
Inserisci un nuovo nel che hai precedentemente creato e collegato . Gli stili che hai definito dovrebbero applicarsi automaticamente ad esso.
Regola del tag
L'istanza tag seleziona gli oggetti di interfaccia utente specifici target contrassegnati attraverso CollectionService .Il seguente stile di configurazione della regola imposta un tag con un colore di sfondo, un carattere e una dimensione del testo personalizzati.
Nella colonna di sinistra dell'Editor di stile, passa il mouse sul foglio StyleSheet , clicca il pulsante ⋮ e naviga fino a Nuovo > Tag .
Rinomina la nuova regola del tag .ButtonPrimary (nota il prefisso . ).
Collega tre token di stile precedentemente creati a tre proprietà :
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 le parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
- Invece di inserire un valore statico, clicca il pulsante ⋮ e seleziona Token di link .
- Fai clic sul $ che appare nel campo di valore e seleziona il token associato appropriato.
Inserisci un nuovo TextButton nel ScreenGui che hai precedentemente creato e collegato e tag come ButtonPrimary.Un rapido scorciatoia è la seguente:
- Assicurati che il nuovo TextButton sia selezionato nel Explorer .
- Con la regola del 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 modificatori di istanza applicano phantom UIComponents come UICorner o UIStroke per stilare ulteriormente un oggetto.Il seguente stile di configurazione delle regole imposta un TextLabel con una dimensione del testo personalizzata e angoli arrotondati.
Nella colonna di sinistra dell'Editor di stile, seleziona TextLabel nella branch Elementi dell'interfaccia utente .
Collega un token di stile precedentemente creato a la proprietà :
- Fai clic su Aggiungi una proprietà... nel pannello principale e seleziona la proprietà TextSize.Ricorda che puoi digitare le parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
- Invece di inserire un valore statico, clicca il pulsante ⋮ e seleziona Token di link .
- Fai clic sul $ che appare nel campo di valore e seleziona il token $Text32.
È necessaria una pseudo istanza per configurare e applicare gli angoli arrotondati ad altri elementi. Per crearne una:
Nella colonna di sinistra, passa il mouse su TextLabel , clicca il pulsante ⋮ e naviga fino a Nuovo ⟩ Pseudo-istanza ⟩ UICorner .
Una nuova UICorner pseudo istanza appare sotto l'elemento TextLabel nella colonna di sinistra.
Con la nuova istanza UICorner selezionata nella colonna di sinistra, linka un token di stile precedentemente creato a la proprietà :
- Fai clic su Aggiungi una proprietà... nel pannello principale e seleziona la proprietà CornerRadius.
- Invece di inserire un valore statico, clicca il pulsante ⋮ e seleziona Token di link .
- Fai clic sul $ che appare nel campo di valore e seleziona il token $Rad20.
Inserisci un nuovo nel che hai precedentemente creato e collegato . Gli stili che hai definito dovrebbero applicarsi automaticamente ad esso.
Regola di stato
GuiObject stato selezionatori corrispondono a uno dei quattro GuiState valori enum come Hover , consentendo di configurare automaticamente le modifiche di stile per gli stati interattivi.La seguente configurazione delle regole crea uno stato di hover di -4 gradi di rotazione per tutti ImageButtons .
Nella colonna di sinistra dell'Editor di stile, seleziona ImageButton nella branch Elementi dell'interfaccia utente .
Fai clic sul pulsante ⋮ e naviga fino a Nuovo > GuiState > Hover .
Un nuova istanza modificatore di stato di 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 le parole chiave per trovare più rapidamente le proprietà nel menu a discesa.
Inserisci -4 nel campo di valore della proprietà.
Inserisci un nuovo nel che hai precedentemente creato e collegato .Quando passi il mouse sul pulsante nella finestra, dovrebbe ruotare di 4 gradi verso sinistra.
Temi di stile
Gli stili temi consistono in set di token specifici che possono essere scambiati, ad esempio i token di colore che definiscono un tema "leggero" e "oscuro".
Creazione del tema
Per l'estensibilità, i temi sono organizzati in cartelle.Mentre una singola cartella può essere sufficiente per la maggior parte degli scopi, sei libero di organizzare temi in cartelle come "colori" o "font" se lo desideri.
Crea una nuova cartella tematica:
- Nella colonna di sinistra dell'editor di stile, passa il mouse su Temi , clicca il ⊕ e seleziona Nuovo tema .
- Rinomina il nuovo oggetto Cartella a Generale .
Crea una nuova tabella di stile tematica:
- Passa il mouse sul nuovo Cartella generale , fai clic sul pulsante ⋮ e seleziona Nuovo foglio di stile tema .
- Rinominalo in ThemeA .
Token tematici
Una volta costruito un tema, puoi collegare i suoi token a varie proprietà dell'interfaccia utente come il BackgroundColor3 di un TextButton.Le schede tema devono utilizzare un insieme comune di token per funzionare correttamente.
Con TemaA selezionato nella colonna di sinistra dell'Editor di stile:
Collega tre gettoni di stile precedentemente creati a tre nuovi gettoni tema:
Token tematico Token di stile BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Fai clic su Aggiungi un token... nel pannello principale e inserisci il nome del token tematico.
- Fai clic sul $ che appare nel campo di valore e seleziona il token di stile associato.
Nella colonna di sinistra dell'Editor di stile, seleziona TextButton nella branch Elementi dell'interfaccia utente .
Collega i gettoni del tema a tre nuove proprietà TextButton:
Proprietà Token tematico 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, clicca il pulsante ⋮ e seleziona Token di link .
- Fai clic sul $ che appare nel campo di valore e seleziona il token tematico appropriato.
Durante il collegamento dei token del tema, cerca $[Token] in ThemeA in hover‑over per sapere che il token proviene dal tema e non dalla scheda globale dei token (ricorda che il tema già deriva i token globali)>.
Duplicazione tema
Una volta che hai un tema generalmente stabilito, puoi duplicarlo e cambiare vari token per definire uno stile tematico unico.
Nella colonna di sinistra dell'Editor di stile, passa il mouse sul tema ThemeA , clicca il pulsante ⋮ e seleziona Duplica .
Rinomina il tema duplicato a ThemeB .
Collega due dei token del tema a due diversi token di stile:
Token tematico Token di stile BackColor $Magenta ButtonTextSize $Text24 - A destra del campo di valore della proprietà, fai clic sul pulsante ⋮ e seleziona Slega il token .
- Fai nuovamente clic su ⋮ e seleziona Token di link .
- Nel suo campo di valore, clicca il $ e seleziona il nuovo token di stile associato.
Cambio tema
Una volta che hai più temi, puoi scambiarli tra loro attraverso la cartella del tema, o tramite uno script come descritto in SetDerives() .
Nella colonna di sinistra dell'Editor di stile, seleziona la cartella Generale nella branch Temi .
Nel pannello principale, scambia tra i temi usando i pulsanti radio.
