Utilizzando i modificatori di aspetto, puoi ulteriormente personalizzare l'aspetto dei tuoi GuiObjects.
- Applica un gradiente allo sfondo di un oggetto.
- Applica un contorno al testo o a un bordo.
- Imposta angoli arrotondati per un oggetto.
- Aumenta il padding tra i bordi di un oggetto.
- Aggiungi un ombreggiatura dietro un oggetto.
Gradiente
L'oggetto UIGradient applica un gradiente di colore e trasparenza al suo GuiObject genitore.
Puoi configurare il gradiente:
- Scegliendo il punto di partenza del gradiente (all'interno o all'esterno dei limiti del genitore) tramite la proprietà Offset.
- Scegliendo il comportamento di campionamento dei bordi del gradiente tramite la proprietà TileMode.
Sequenza di colori
Per impostare la sequenza di colori di un gradiente:
Nella finestra Explorer, seleziona il UIGradient.
Nella finestra Properties, fai clic all'interno del campo della proprietà Color, quindi fai clic sul pulsante ⋯ a destra della casella di input.
Ogni triangolo sull'asse inferiore della sequenza di colori è un punto chiave che determina il valore del colore in quel punto.
- Fai clic su un punto chiave nella sequenza di colori per selezionarlo o riposizionarlo, oppure aggiungi un altro punto chiave facendo clic ovunque sul grafico.
- Fai clic sul piccolo quadrato accanto a Colore per aprire la finestra pop-up Colori, quindi seleziona il colore desiderato per il punto chiave.
- Se necessario, ripeti questi passaggi per aggiungere/regolare i colori nel grafico.
Trasparenza
Per regolare la trasparenza di un gradiente lungo il suo intervallo:
Nella finestra Explorer, seleziona il UIGradient.
Nella finestra Properties, fai clic all'interno del campo della proprietà Transparency, quindi fai clic sul pulsante ⋯ a destra della casella di input.
Ogni quadrato attraverso il grafico della sequenza numerica è un punto chiave che determina il valore di trasparenza in quel punto.
- Fai clic su un punto chiave nella sequenza numerica per selezionarlo o riposizionarlo, oppure aggiungi un altro punto chiave facendo clic ovunque sul grafico.
- Inserisci una combinazione specifica di tempo/valore tramite gli input Tempo e Valore.
- Se necessario, ripeti questi passaggi per aggiungere/regolare i livelli di trasparenza nel grafico.
Tipo
La proprietà Type di un gradiente imposta il suo tipo tra Linear, Radial, Elliptical o Conical.
Elliptical — La sequenza di colore/trasparenza si irradia verso l'esterno dal centro dell'elemento in un'ellisse, eventualmente spostata da Offset. I raggi orizzontali e verticali dell'ellisse sono la metà della larghezza e dell'altezza dell'elemento, quindi l'ellisse si adatta ai limiti dell'elemento. Rotation ruota gli assi dell'ellisse.
Conical — La sequenza di colore/trasparenza si muove in senso orario attorno al centro dell'elemento, eventualmente spostata da Offset. Rotation controlla l'angolo di inizio e fine del movimento. Per impostazione predefinita, questo si muove da 0 a 360 gradi, ma i valori di Scale inferiori a 1 possono ridurre quell'angolo.
Offset e rotazione
Le proprietà Offset e Rotation ti consentono di regolare i punti di controllo del gradiente e il suo angolo. Come illustrato nei seguenti diagrammi, Offset si basa su una percentuale della larghezza o dell'altezza del genitore, e sono validi sia valori positivi che negativi.
Allo stesso modo, quando ruoti il gradiente, anche i punti di controllo ruotano:
Scala
La Scale di un gradiente moltiplica l'estensione del gradiente, controllando quanto della sequenza di colore/trasparenza è visibile all'interno dell'elemento.
Quando Scale è superiore a 1, il gradiente si estende per più dell'intera estensione e solo una parte del colore/trasparenza è visibile.
Per i gradienti di tipo Elliptical, Scale influisce su entrambi i raggi dell'ellisse.
Modalità di campionamento
La proprietà TileMode imposta come il gradiente si ripete quando l'intera sequenza non copre completamente l'elemento genitore.
Clamp — Modalità predefinita in cui i valori di colore/trasparenza all'inizio e alla fine della sequenza si estendono all'infinito, quindi i valori di inizio riempiono qualsiasi area prima del gradiente e i valori di fine riempiono qualsiasi area dopo di esso.
Repeat — Il gradiente si ripete avvolgendo senza soluzione di continuità i tasselli della sequenza di colore/trasparenza dalla fine all'inizio. Questo può produrre una cucitura visibile se i primi e gli ultimi valori di colore/trasparenza nella sequenza differiscono.
Mirror — Il gradiente si riflette a ciascun confine in modo che la sequenza di colore/trasparenza ping-ponga. Questo produce una ripetizione fluida senza cuciture, poiché la direzione si inverte a ciascun bordo del tassello.
Contorno
L'istanza UIStroke applica un contorno al testo o a un bordo. Le caratteristiche principali includono:
- Colore regolabile e spessore del contorno.
- Possibilità di impostare la trasparenza del contorno in modo indipendente dalla trasparenza del genitore.
- Posizione e/o offset personalizzabili rispetto al bordo del genitore.
- Tre stili di angolo (arrotondato, smussato o a punta).
- Supporto per il gradiente del contorno tramite l'istanza UIGradient.
Spessore
Puoi impostare la larghezza del contorno tramite la proprietà Thickness, che è misurata in pixel (predefinito) o scalata rispetto al genitore, a seconda della StrokeSizingMode del modificatore. Se il contorno è su testo e StrokeSizingMode è impostato su ScaledSize, lo spessore è relativo alla dimensione del carattere.
Colore o gradiente
Puoi impostare il colore del contorno tramite la proprietà Color, oltre a inserire un'istanza figlia UIGradient per creare contorni a gradiente.
Sia l'oggetto genitore che UIStroke possono avere istanze figlie UIGradient, consentendoti di impostare gradienti sul contorno e sul riempimento in modo indipendente.
Contorno del testo o bordo
A seconda del tipo di genitore, UIStroke opera come un contorno del testo o come un bordo. Quando si collega UIStroke a un oggetto di testo come TextLabel, si applica al contorno del testo; quando si collega UIStroke ad altri GuiObjects, si applica al bordo.
Quando applicato a un oggetto di testo, puoi sovrascrivere il comportamento predefinito del contorno tramite la proprietà ApplyStrokeMode, consentendoti di applicare il contorno ai limiti dell'oggetto invece che al testo stesso. Puoi persino controllare il contorno del testo e il bordo in modo indipendente collegando due istanze UIStroke a un oggetto di testo, una impostata su Contestuale e l'altra su Bordo.
Posizione/offset del bordo
BorderStrokePosition imposta la posizione del contorno rispetto al bordo del suo genitore e BorderOffset ti consente di specificare un offset aggiuntivo alla posizione del contorno.
Trasparenza
La proprietà Transparency imposta la trasparenza del contorno in modo indipendente dalla BackgroundTransparency dell'oggetto genitore o dalla TextTransparency. Questo ti consente di rendere il testo e i bordi "cavi" (composti solo da un contorno).
Stile degli angoli
La proprietà LineJoinMode ti consente di controllare come vengono interpretati gli angoli. Accetta un valore di Round, Bevel o Miter.
Sovrapposizione
Per sovrapporre più istanze di UIStroke su un GuiObject da davanti a dietro, puoi utilizzare la proprietà ZIndex. Quelle con un ZIndex inferiore vengono renderizzate sotto (dietro) quelle con un ZIndex più alto.
Nota che l'ordine di rendering per le istanze di UIStroke con lo stesso ZIndex è indefinito. Non applicare più istanze di UIStroke con lo stesso indice se il loro ordine di rendering è importante.
Angoli
L'istanza UICorner applica una deformazione agli angoli del suo GuiObject genitore. Puoi controllare il raggio applicato tramite la proprietà CornerRadius utilizzando Scale o Offset.
Scale arrotonda gli angoli a una percentuale basata sulla lunghezza totale del lato più corto del genitore, il che significa che una scala di 0.5 o superiore deforma il genitore in una forma a "pillola", indipendentemente dalla sua larghezza o altezza. Offset arrotonda gli angoli a un numero specifico di pixel, indipendentemente dalla larghezza/altezza del genitore.
Puoi anche controllare angoli individuali tramite le proprietà TopLeftRadius, TopRightRadius, BottomRightRadius e BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Padding
Un oggetto UIPadding applica padding superiore, inferiore, sinistro e/o destro ai contenuti del genitore GuiObject. Ad esempio, puoi spostare il testo all'interno di un'etichetta di testo verso il basso o verso l'alto applicando un offset alla proprietà PaddingBottom del modificatore.
Ombra
Un oggetto UIShadow rende un'ombra per la sua istanza UI genitore. Un'ombra può seguire la forma rettangolare del genitore o i glifi di un oggetto di testo. Le ombre di forma possono apparire all'esterno o all'interno del genitore e mascherare l'area direttamente dietro il genitore. Sia le ombre di forma che quelle di testo possono utilizzare un gradiente di colore.
Se il genitore ha un UICorner o una GuiObject.Rotation diversa da zero, la sua ombra di forma segue gli stessi angoli o rotazione. UIShadow non supporta Path2D o texture.
Ombre di forma e di testo
La proprietà Mode determina cosa proietta l'ombra, e entrambe le modalità possono coesistere sotto lo stesso genitore.
- Text segue i glifi di testo di un TextLabel, TextButton o TextBox. Altri oggetti UI non rendono un'ombra in questa modalità.
Spread, Inset e ShowBehindParent non hanno effetto in modalità testo.
Sfocatura
La proprietà BlurRadius determina la sfocatura dell'ombra. Un valore più grande rende i bordi dell'ombra più morbidi. Nota che il fattore di scala di questa proprietà UDim è relativo alla larghezza o all'altezza del genitore, a seconda di quale sia più corto.
Colore e trasparenza
La proprietà Color determina il colore dell'ombra, mentre Transparency imposta la trasparenza dell'ombra con 0 che è completamente opaco e 1 che è completamente trasparente.
Per un'ombra multicolore, inserisci un UIGradient come figlio del UIShadow. Il gradiente influisce sull'ombra senza cambiare il riempimento del genitore.
Offset e diffusione
La proprietà Offset sposta l'ombra rispetto alla posizione del genitore, mentre Spread espande o riduce l'ombra rispetto alla dimensione del genitore.
Ombre interne
Imposta Inset su true per rendere l'ombra sopra e all'interno del genitore invece che dietro di esso. Valori positivi di Spread espandono un'ombra interna verso il centro del genitore.
Rivelare contenuti dietro un genitore trasparente
Per impostazione predefinita, ShowBehindParent è true, quindi l'intera ombra di forma viene renderizzata, inclusa la porzione direttamente dietro il genitore. Impostalo su false per mascherare quella porzione dell'ombra. Questo impedisce all'ombra di scurire i contenuti visibili attraverso un genitore trasparente.
Questa proprietà non ha effetto sulle ombre interne o di testo.
Ombre sovrapposte
Aggiungi più istanze di UIShadow allo stesso genitore per combinare gli effetti. La proprietà ZIndex controlla il loro ordine di rendering. Le ombre con valori più bassi vengono renderizzate dietro le ombre con valori più alti.
L'ordine di rendering delle ombre che condividono lo stesso ZIndex è indefinito. Assegna a ciascuna ombra sorella un valore diverso quando il loro ordine è importante.