UI-Aussehen-Modifikatoren

*Dieser Inhalt wurde mit KI (Beta) übersetzt und kann Fehler enthalten. Um diese Seite auf Englisch zu sehen, klicke hier.

Durch die Verwendung von Auswahl-Modifikatoren können Sie die Aussehen Ihres GuiObjects weiter anpassen.

  • Apply a Gradient to the background of an Objekt.
  • Apply a stroke to text or a border.
  • Set gerundete Ecken für ein Objekt.
  • Erhöhen Sie Pad zwischen den Grenzen eines Objekts.

Gradient

Das Class.UIGradient -Objekt gilt für seine Eltern Class.GuiObject .

Du kannst den Gradienten konfigurieren, indem:

  • Einstellung seiner Farben durch einen ColorSequence in der Gradient Color Eigenschaften.
  • Einstellung seiner Transparenz durch ein NumberSequence in der Gradienten-Eigenschaft Transparency.
  • Wählen Sie den Gradientenpunkt (innerhalb oder außerhalb der Grenzen des übergeordnetes Teil) über die EigenschaftenOffset.
  • Wählen Sie den Winkel des Gradients durch die Rotation Eigenschaften.

Farb序列

Um die Farbfolge eines Gradients festzulegen:

  1. In dem Explorer-Fenster , wählen Sie den UIGradient.

  2. In dem Eigenschaften-Fenster , klicke in das Farb-Feld der Eigenschaft, dann klicke auf die Schaltfläche rechts von der Auswahlbox. Eine Farb順序 wird angezeigt.

    Jedes Dreieck auf der unteren Achse der Farbfolge ist ein Keypunkt , der die Farbwert an diesem Punkt bestimmt.

    Color sequence popup from white to white
  3. Klicken Sie auf einen Keypunkt in der Farbfolge, dann klicken Sie auf das kleine Quadrat neben Farbe , um das Farben -Pop-up-Fenster zu öffnen.

  4. Wählen Sie die gewünschte Farbe für den Keypunkt.

    Color sequence popup from red to white
  5. Wenn nötig, kannst du:

    • Fügen Sie einen weiteren Keypunkt hinzu, indem Sie auf die Grafik klicken.
    • Ziehen Sie einen bestehenden Keypunkt an eine neue Position oder wählen Sie einen Keypunkt und geben Sie einen bestimmten Zeitwert durch die Zeit-Eingabe ein.
    • Löschen Sie einen Keypunkt, indem Sie ihn auswählen und auf die Schaltfläche Löschen klicken.
    • Reset the sequence by clicking the Zurücksetzen button.

Transparenz

Um die Transparenz eines Gradients über seine Reichweite anzupassen:

  1. In dem Explorer-Fenster , wählen Sie den UIGradient.

  2. In dem Eigenschaften -Fenster klicken Sie in das Transparenz -Eigenschaftsfeld und dann auf die Schaltfläche rechts von der Auswahlbox. Eine Zahlfolge-Pop-up-Anzeige wird angezeigt.

    Jeder Quadrat im Feld der Reihenfolge der Zeichen ist ein Schlüsselpunkt , der den Transparenzwert an diesem Punkt bestimmt.

    Number sequence popup from 0.5 to 0.5
  3. Klicke und ziehe einen beliebigen Keypunkt um, oder wähle einen Keypunkt aus und gib eine bestimmte Zeit/Wert-Kombination durch die Zeit und Wert Eingaben ein.

    Number sequence popup from 0 to 1
  4. Wenn nötig, kannst du:

    • Fügen Sie einen weiteren Keypunkt hinzu, indem Sie auf die Grafik klicken.
    • Löschen Sie einen Keypunkt, indem Sie ihn auswählen und auf die Schaltfläche Löschen klicken.
    • Reset the sequence by clicking the Zurücksetzen button.

Versatz und Rotation

Die Offset und Rotation-Eigenschaften ermöglichen es Ihnen, die Steuerelemente des Gradients und sein Winkel anzupassen. Wie in den folgenden Diagrammen gezeigt, basiert Offset auf einem 1>Prozentsatz1> der

Versatz (X) = 0
Versatz (X) = 0.25
Versatz (X) = -0.25

Ähnlich, wenn Sie den Gradienten drehen, drehen sich die Kontrollpunkte auch.

Rotation = 0
Rotation = 45
Rotation = -90

Streich

Die UIStroke Instanz wendet ein Umriss auf Text oder eine Kante an. Key-Features beinhalten:

  • Anpassbare Farbe und Dicke der Umrisskontur.
  • Fähigkeit, die Strokes Transparenz unabhängig von der Transparenz des übergeordnetes Teilzu setzen.
  • Drei Eckstile (Runde, Biegel oder Ziegel).
  • Stroke Gradient Unterstützung durch die UIGradient Instanz.

Textumriss/Kante

Abhängig von seinem übergeordnetes Teilfunktioniert UIStroke entweder als Textumriss oder als Grenze . Wenn Sie 1> Class.UIStroke1> an ein Objekteltern, es gilt für den Umriss des Texts; wenn Sie 4> Class.UIStroke

TextLabel mit UIStroke child
Rahmen mit UIStroke und UICorner-Kindern

Wenn auf ein Text-Objekt angewendet, kannst du das Standard-Strokes-Verhalten durch die ApplyStrokeMode Eigenschaftenüberschreiben, wodurch du den Strokes auf die Grenzen des Objekts anstelle des Texts anwenden kannst. Du kannst sogar das Text-Outline und die Grenze von zwei Class.UI

UIStroke.ApplyStrokeMode = Kontext
UIStroke.ApplyStrokeMode = Border

Dicke

Du kannst die Schreibbreite über die Eigenschaft Thickness festlegen, die in Pixeln von den Außenkanten des übergeordnetes Teilgemessen wird.

UIStroke.Thickness = 4
UIStroke.Thickness = 12

Farbe/Gradient

Sie können die Strokes-Farbe über die EigenschaftenColor und das Einfügen einer Kind-UIGradient Instanz, um Gradient-Strokes zu erstellen, einstellen.

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

Transparenz

Die Transparency-Eigenschaft setzt die StroTransparenz unabhängig von der ObjektClass.GuiObject.BackgroundTransparency|BackgroundTransparency oder TextTransparency . Dies ermöglicht es Ihnen, Text und Kanten zu rendern, die "hollow" sind (nur ein Umriss bestehend aus einer Umriss).

TextLabel.TextTransparency = 0 / UIStroke.Transparency = 0,5
TextLabel.TextTransparency = 1 / UIStroke.Transparency = 0

Eckstil

Die LineJoinMode Eigenschaft ermöglicht es Ihnen, die Interpretation von Ecken zu steuern. Es akzeptiert einen Wert von entweder Runde , Bevel oder 1>Miter1>.

UIStroke.LineJoinMode = Runde
UIStroke.LineJoinMode = Bevel
UIStroke.LineJoinMode = Miter

Ecken

Die UICorner Instanz verwendet Deformation an allen vier Ecken ihres Elternteils GuiObject. Sie können den angewendeten Radius über die CornerRadius -Eigenschaft verwalten, die entweder über das 1> Datatype.UDim.Scale|Scale1> oder das 4>

Scale rundet die Ecken auf ein Prozent basierend auf der Gesamtlänge des kürzesten Kante des übergeordnetes Teil, wodurch eine Skala von 0> 0.50> oder höher das übergeordnetes Teil

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> · · 0> 1> 2> 3> 4> 5> 6> 7> <

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

>

Polsterung

Ein UIPadding -Objekt gilt für die oberste, untere, linke und/oder rechte Seite des Elternteils GuiObject.

Zum Beispiel können Sie den Text innerhalb eines Text-Buttons nach unten oder nach oben verschieben, indem Sie einen Offset am unteren Rand des Buttons anwenden.