Modificatori dell'aspetto UI

*Questo contenuto è tradotto usando AI (Beta) e potrebbe contenere errori. Per visualizzare questa pagina in inglese, clicca qui.

Utilizzando modificatori di aspetto , puoi ulteriormente personalizzare l'aspetto del tuo GuiObjects .

Gradiente

L'oggetto UIGradient applica un color e ungradiente di trasparenza al suo padre GuiObject .

Puoi configurare il gradiente di:

  • Impostare i suoi colori attraverso un ColorSequence in Proprietàdel gradiente Color.
  • Impostando la sua trasparenza attraverso un NumberSequence in Proprietàdel gradiente Transparency.
  • Scegliendo il punto di partenza del gradiente (all'interno o all'esterno dei confini del parent) attraverso la ProprietàOffset .
  • Scegliendo l'angolo del gradiente attraverso la ProprietàRotation .

Sequenza di colori

Per impostare la sequenza di colore di un gradiente:

  1. Nella finestra Explorer, seleziona il UIGradient.

  2. Nella finestra Proprietà , fai clic all'interno del campo Colore della proprietà, quindi fai clic sul pulsante alla destra della Quadro di selezionedi input. Viene visualizzata una sequenza di colori.

    Ogni triangolo sulla direzione diagonale dell'asse di colore è un punto chiave che determina il valore del colore a quel punto.

    Color sequence popup from white to white
  3. Fai clic su un punto di interruzione nel codice di colore, quindi fai clic sul piccolo quadrato accanto a Colore per aprire la finestra pop-up Colori .

  4. Seleziona il colore desiderato per il punto d'interruzione.

    Color sequence popup from red to white
  5. Se necessario, puoi:

    • Aggiungi un altro punto di interruzione facendo clic in qualsiasi punto sulla grafica.
    • Trascina un keypoint esistente in una nuova posizione, o seleziona un keypoint e inserisci un valore di tempo specifico attraverso l'input Tempo .
    • Elimina un punto di interruzione selezionandolo e facendo clic sul pulsante Elimina .
    • Ripristina la sequenza facendo clic sul pulsante Reset .

Trasparenza

Per regolare la trasparenza di un gradiente nella sua gamma:

  1. Nella finestra Explorer, seleziona il UIGradient.

  2. Nella finestra Proprietà , fai clic all'interno del campo Trasparenza , quindi fai clic sul pulsante alla destra della Quadro di selezionedi input. Viene visualizzata una sequenza di numeri.

    Ogni quadrato nella sequenza di numeri è un punto chiave che determina il valore di trasparenza a quel punto.

    Number sequence popup from 0.5 to 0.5
  3. Fai clic e trascina qualsiasi punto d'interruzione intorno, o seleziona un punto d'interruzione e inserisci una combinazione di tempo/valore specifica attraverso gli input Tempo e Valore .

    Number sequence popup from 0 to 1
  4. Se necessario, puoi:

    • Aggiungi un altro punto di interruzione facendo clic in qualsiasi punto sulla grafica.
    • Elimina un punto di interruzione selezionandolo e facendo clic sul pulsante Elimina .
    • Ripristina la sequenza facendo clic sul pulsante Reset .

Spostamento e Rotazione

Le proprietà Offset e Rotation ti consentono di regolare i punti di controllo del gradiente e il suo angolo. Come mostrato nei seguenti diagrammi, Offset è basato su un 1>percentile1> della larghezza o dell'altezza del parent

Offset (X) = 0
Offset (X) = 0.25
Offset (X) = -0.25

Allo stesso modo, quando ruoti il gradiente, i punti di controllo Rotareanche.

Rotazione = 0
Rotazione = 45
Rotazione = -90

Attacco

L'istanza UIStroke applica un contorno al testo o al bordo. Le caratteristiche chiave includono:

Contorno del testo / Border

A seconda del suo parent, UIStroke funziona come un bordo di testo o come un bordo di testo . Quando genitori 1> Class.UIStroke1> a un oggetto di testo, si applica all'outline del testo; quando genitori 4> Class.UIStroke

TextLabel con UIStroke figlio
Frame con UIStroke e UICorner figli

Quando applicato a un oggetto di testo, puoi sovrascrivere il comportamento del tratto standard dal ApplyStrokeMode Proprietà, consentendoti di applicare il tratto all'interfaccia dell'utente invece che al testo stesso. Puoi persino controllare l'outline e la frontiera indipendentemente dal genitore di due ist

UIStroke.ApplyStrokeMode = contestuale
UIStroke.ApplyStrokeMode = Border

Spessore

Puoi impostare la larghezza del tratto attraverso la proprietà Thickness che viene misurata in pixel dalle estensioni esterne del parent.

UIStroke.Thickness = 4
UIStroke.Thickness = 12

Colore/gradiente

Puoi impostare il colore del tratto attraverso la ProprietàColor, nonché inserire una istanza figlia UIGradient per creare trattini di gradiente.

UIStroke.Color = (0, 95, 225)
UIStroke con UIGradient child

Trasparenza

La proprietà Transparency imposta la trasparenza dello stroke indipendentemente dalla trasparenza del padre oggetto's BackgroundTransparency o TextTransparency . Ciò ti consente di rendere i test e le linee che sono "hollow" (consistono in un solo contorno).

TextLabel.TextTransparency = 0 /  UIStroke.Transparency = 0.5
TextLabel.TextTransparency = 1 / UIStroke.Transparency = 0

Stile di angolo

La proprietà LineJoinMode ti consente di controllare il modo in cui vengono interpretati gli angoli. Accetta un valore di Round , Bevel , o 1> Miter1> .

UIStroke.LineJoinMode = Round
UIStroke.LineJoinMode = Bevel
UIStroke.LineJoinMode = Miter

Angoli

L'istanza UICorner applica la deformazione a tutti e quattro gli angoli del suo padre GuiObject . Puoi controllare il raggio applicato attraverso la proprietà CornerRadius utilizzando either 1> Datatype.UDim.Scale|Scale1> o 4>

Scale arrotonda gli angoli in un percentuale in base alla lunghezza totale dell'angolo più breve del边 del parent, il che significa che uno scala di 0.5 o superiore deforma il parent

Datatype.UDim.Scale|Scale = 0.25 · Datatype.UDim.Offset|Offset =
2> 02> > >

Datatype.UDim.Scale|Scale = 0.5 · Datatype.UDim.Offset|Offset =
2> 02> > >

Datatype.UDim.Scale|Scale = 0 · Datatype.UDim.Offset|Offset = 2> 322> · ·

Datatype.UDim.Scale|Scale = 0 · Datatype.UDim.Offset|Offset = 2> 642> · ·

>

Spalline

Un oggetto UIPadding si applica a top, bottom, left e/o right padding ai contenuti del padre GuiObject .

Ad esempio, puoi spostare il testo all'interno di un pulsante di testo verso il basso o verso l'alto applicando uno spostamento alla parte inferiore del pulsante.