UI-Erscheinungsmodifikatoren

Durch die Nutzung von Erscheinungsmodifikatoren können Sie das Aussehen Ihrer GuiObjects weiter anpassen.

• Wenden Sie einen Verlauf auf den Hintergrund eines Objekts an.
• Wenden Sie einen Strich auf Text oder einen Rand an.
• Setzen Sie abgerundete Ecken für ein Objekt.
• Erhöhen Sie den Abstand zwischen den Rändern eines Objekts.
• Fügen Sie einen Schatten hinter einem Objekt hinzu.

Verlauf

Das UIGradient-Objekt wendet einen Farb- und Transparenzverlauf auf sein übergeordnetes GuiObject an.

Sie können den Verlauf konfigurieren durch:

• Festlegen seiner Farben über eine ColorSequence in der Color-Eigenschaft des Verlaufs.
• Festlegen seiner Transparenz über eine NumberSequence in der Transparency-Eigenschaft des Verlaufs.
• Auswählen des Typs des Verlaufs über die Type-Eigenschaft.
• Auswählen des Startpunkts des Verlaufs (innerhalb oder außerhalb der Grenzen des übergeordneten Elements) über die Offset-Eigenschaft.
• Auswählen des Winkels des Verlaufs über die Rotation-Eigenschaft.
• Auswählen des Maßstabs des Verlaufs über die Scale-Eigenschaft.
• Auswählen des Verhaltens der Kantenabtastung des Verlaufs über die TileMode-Eigenschaft.

Farbsequenz

Um die Farbsequenz eines Verlaufs festzulegen:

1. Wählen Sie im Explorer-Fenster das UIGradient aus.

2. Klicken Sie im Eigenschaften-Fenster in das Feld der Color-Eigenschaft und klicken Sie dann auf die ⋯-Schaltfläche rechts neben dem Eingabefeld.

   

3. Jedes Dreieck auf der unteren Achse der Farbsequenz ist ein Schlüsselpunkt, der den Farbwert an diesem Punkt bestimmt.

   

   1. Klicken Sie auf einen Schlüsselpunkt in der Farbsequenz, um ihn auszuwählen oder neu zu positionieren, oder fügen Sie einen weiteren Schlüsselpunkt hinzu, indem Sie irgendwo auf das Diagramm klicken.
   2. Klicken Sie auf das kleine Quadrat neben Farbe, um das Farben-Popup-Fenster zu öffnen, und wählen Sie dann die gewünschte Farbe für den Schlüsselpunkt aus.
   3. Wiederholen Sie diese Schritte bei Bedarf, um Farben im Diagramm hinzuzufügen oder anzupassen.

Transparenz

Um die Transparenz eines Verlaufs über seinen Bereich anzupassen:

1. Wählen Sie im Explorer-Fenster das UIGradient aus.

2. Klicken Sie im Eigenschaften-Fenster in das Feld der Transparency-Eigenschaft und klicken Sie dann auf die ⋯-Schaltfläche rechts neben dem Eingabefeld.

   

3. Jedes Quadrat im Diagramm der Zahlenfolge ist ein Schlüsselpunkt, der den Transparenzwert an diesem Punkt bestimmt.

   

   1. Klicken Sie auf einen Schlüsselpunkt in der Zahlenfolge, um ihn auszuwählen oder neu zu positionieren, oder fügen Sie einen weiteren Schlüsselpunkt hinzu, indem Sie irgendwo auf das Diagramm klicken.
   2. Geben Sie eine spezifische Zeit/Wert-Kombination über die Eingaben Zeit und Wert ein.
   3. Wiederholen Sie diese Schritte bei Bedarf, um Transparenzstufen im Diagramm hinzuzufügen oder anzupassen.

Typ

Die Type-Eigenschaft eines Verlaufs legt seinen Typ aus Linear, Radial, Elliptical oder Conical fest.

• Linear — Die Farb-/Transparenzsequenz wechselt in einer geraden Linie über das Element. Die Richtung wird durch seine Rotation und die Position durch seinen Offset gesteuert. Dies ist der Standard.

• Radial — Die Farb-/Transparenzsequenz strahlt vom Mittelpunkt des Elements nach außen, optional verschoben durch Offset. Der Radius wird durch den Durchschnitt der Breite und Höhe des Elements geteilt durch zwei definiert, effektiv $\text{(width+height)/4}$. Rotation hat keinen Einfluss auf einen radialen Verlauf.

• Elliptical — Die Farb-/Transparenzsequenz strahlt vom Mittelpunkt des Elements in einer Ellipse nach außen, optional verschoben durch Offset. Die horizontalen und vertikalen Radien der Ellipse sind die Hälfte der Breite und Höhe des Elements, sodass die Ellipse in die Grenzen des Elements passt. Rotation dreht die Achsen der Ellipse.

• Conical — Die Farb-/Transparenzsequenz sweeped im Uhrzeigersinn um das Zentrum des Elements, optional verschoben durch Offset. Rotation steuert den Start- und Endwinkel des Sweeps. Standardmäßig sweeped dies von 0 bis 360 Grad, aber Scale-Werte kleiner als 1 können diesen Winkel reduzieren.

Offset und Rotation

Die Offset- und Rotation-Eigenschaften ermöglichen es Ihnen, die Steuerpunkte des Verlaufs und seinen Winkel anzupassen. Wie in den folgenden Diagrammen dargestellt, basiert Offset auf einem Prozentsatz der Breite oder Höhe des übergeordneten Elements, und sowohl positive als auch negative Werte sind gültig.

Ähnlich, wenn Sie den Verlauf drehen, drehen sich auch die Steuerpunkte:

Maßstab

Der Scale eines Verlaufs multipliziert das Ausmaß des Verlaufs und steuert, wie viel der Farb-/Transparenzsequenz innerhalb des Elements sichtbar ist.

• Wenn Scale kleiner als 1 ist, erstreckt sich der Verlauf über weniger als das volle Ausmaß. Die verbleibende Farbe/Transparenz wird gemäß der TileMode-Eigenschaft ausgefüllt.

• Wenn Scale größer als 1 ist, erstreckt sich der Verlauf über mehr als das volle Ausmaß und nur ein Teil der Farb-/Transparenz ist sichtbar.

• Für Elliptical-Verläufe beeinflusst Scale beide Radien der Ellipse.

Kachelmodus

Die TileMode-Eigenschaft legt fest, wie der Verlauf wiederholt wird, wenn die gesamte Sequenz das übergeordnete Element nicht vollständig abdeckt.

• Clamp — Standardmodus, bei dem die Farb-/Transparenzwerte am Anfang und Ende der Sequenz unendlich verlängert werden, sodass die Startwerte jeden Bereich vor dem Verlauf ausfüllen und die Endwerte jeden Bereich danach ausfüllen.

• Repeat — Der Verlauf wiederholt sich, indem die Farb-/Transparenzsequenz nahtlos vom Ende zurück zum Anfang gewickelt wird. Dies kann eine sichtbare Naht erzeugen, wenn die ersten und letzten Farb-/Transparenzwerte in der Sequenz unterschiedlich sind.

• Mirror — Der Verlauf spiegelt sich an jeder Grenze, sodass die Farb-/Transparenzsequenz hin und her springt. Dies erzeugt eine sanfte Wiederholung ohne Naht, da die Richtung an jeder Kantenkante umkehrt.

Strich

Die UIStroke-Instanz wendet eine Umrandung auf Text oder einen Rand an. Zu den Hauptmerkmalen gehören:

• Einstellbare Farbe und Dicke der Strichumrandung.
• Möglichkeit, die Transparenz des Strichs unabhängig von der Transparenz des übergeordneten Elements festzulegen.
• Anpassbare Position und/oder Offset relativ zum Rand des übergeordneten Elements.
• Drei Eckenstile (rund, abgeschrägt oder spitz).
• Unterstützung für Strich-Verläufe durch die UIGradient-Instanz.

Dicke

Sie können die Strichbreite über die Thickness-Eigenschaft festlegen, die in Pixeln (Standard) oder skaliert relativ zum übergeordneten Element gemessen wird, abhängig vom StrokeSizingMode des Modifikators. Wenn der Strich auf Text angewendet wird und StrokeSizingMode auf ScaledSize eingestellt ist, ist die Dicke relativ zur Schriftgröße.

Farbe oder Verlauf

Sie können die Strichfarbe über die Color-Eigenschaft festlegen und auch eine untergeordnete UIGradient-Instanz einfügen, um Farbverläufe für Striche zu erstellen.

Textumrandung oder Rand

Je nach Typ des übergeordneten Elements funktioniert UIStroke entweder als Textumrandung oder als Rand. Wenn Sie UIStroke einem Textobjekt wie TextLabel unterordnen, wird es auf die Umrandung des Textes angewendet; wenn Sie UIStroke anderen GuiObjects unterordnen, wird es auf den Rand angewendet.

Wenn es auf ein Textobjekt angewendet wird, können Sie das Standardverhalten des Strichs durch die ApplyStrokeMode-Eigenschaft überschreiben, sodass Sie den Strich auf die Grenzen des Objekts anstatt auf den Text selbst anwenden können. Sie können sogar die Textumrandung und den Rand unabhängig steuern, indem Sie zwei UIStroke-Instanzen einem Textobjekt unterordnen, eine auf Kontextuell und die andere auf Rand eingestellt.

Randposition/Offset

BorderStrokePosition legt die Position des Strichs relativ zum Rand seines übergeordneten Elements fest, und BorderOffset ermöglicht es Ihnen, einen zusätzlichen Offset zur Position des Strichs anzugeben.

Transparenz

Die Transparency-Eigenschaft legt die Strichtransparenz unabhängig von der BackgroundTransparency des übergeordneten Objekts oder der TextTransparency fest. Dies ermöglicht es Ihnen, Text und Ränder zu rendern, die "hohl" sind (nur aus einer Umrandung bestehen).

Eckenstil

Die LineJoinMode-Eigenschaft ermöglicht es Ihnen, zu steuern, wie Ecken interpretiert werden. Sie akzeptiert einen Wert von entweder Round, Bevel oder Miter.

Schichtung

Um mehrere Geschwister-UIStroke-Instanzen auf einem GuiObject von vorne nach hinten zu schichten, können Sie die ZIndex-Eigenschaft nutzen. Diejenigen mit einem niedrigeren ZIndex werden unter (hinter) denen mit einem höheren ZIndex gerendert.

Beachten Sie, dass die Renderreihenfolge für UIStroke-Instanzen mit demselben ZIndex undefiniert ist. Wenden Sie keine mehreren UIStroke-Instanzen mit demselben Index an, wenn ihre Renderreihenfolge wichtig ist.

Ecken

Die UICorner-Instanz wendet eine Deformation auf die Ecken ihres übergeordneten GuiObject an. Sie können den angewendeten Radius über die CornerRadius-Eigenschaft steuern, indem Sie entweder Scale oder Offset verwenden.

Scale rundet die Ecken auf einen Prozentsatz basierend auf der Gesamtlänge der kürzesten Kante des übergeordneten Elements, was bedeutet, dass ein Maßstab von 0.5 oder höher das übergeordnete Element in eine "Pillen"-Form deformiert, unabhängig von seiner Breite oder Höhe. Offset rundet die Ecken auf eine bestimmte Anzahl von Pixeln, unabhängig von der Breite/Höhe des übergeordneten Elements.

Sie können auch einzelne Ecken über die Eigenschaften TopLeftRadius, TopRightRadius, BottomRightRadius und BottomLeftRadius steuern.

Padding

Ein UIPadding-Objekt wendet oberen, unteren, linken und/oder rechten Abstand auf den Inhalt des übergeordneten GuiObject an. Zum Beispiel können Sie den Text innerhalb eines Textlabels nach unten oder oben verschieben, indem Sie einen Offset auf die PaddingBottom-Eigenschaft des Modifikators anwenden.

Schatten

Ein UIShadow-Objekt rendert einen Schatten für seine übergeordnete UI-Instanz. Ein Schatten kann der rechteckigen Form des übergeordneten Elements oder den Glyphen eines Textobjekts folgen. Formschatten können außerhalb oder innerhalb des übergeordneten Elements erscheinen und den Bereich direkt hinter dem übergeordneten Element maskieren. Sowohl Form- als auch Textschatten können einen Farbverlauf verwenden.

Wenn das übergeordnete Element eine UICorner oder eine nicht null GuiObject.Rotation hat, folgt sein Formschatten denselben Ecken oder der Rotation. UIShadow unterstützt keine Path2D oder Texturen.

Form- und Textschatten

Die Mode-Eigenschaft bestimmt, was den Schatten wirft, und beide Modi können unter demselben übergeordneten Element koexistieren.

• Shape ist der Standard. Der Schatten folgt dem rechteckigen Bereich eines beliebigen GuiObject.
• Text folgt den Textglyphen eines TextLabel, TextButton oder TextBox. Andere UI-Objekte rendern in diesem Modus keinen Schatten.

Spread, Inset und ShowBehindParent haben im Textmodus keine Auswirkungen.

Unschärfe

Die BlurRadius-Eigenschaft bestimmt die Unschärfe des Schattens. Ein größerer Wert lässt die Kanten des Schattens weicher erscheinen. Beachten Sie, dass der Maßstab dieses UDim-Eigenschaft relativ zur Breite oder Höhe des übergeordneten Elements ist, je nachdem, welches kürzer ist.

Farbe und Transparenz

Die Color-Eigenschaft bestimmt die Farbe des Schattens, während Transparency die Transparenz des Schattens festlegt, wobei 0 vollständig undurchsichtig und 1 vollständig transparent ist.

Für einen mehrfarbigen Schatten fügen Sie eine UIGradient als Kind der UIShadow ein. Der Verlauf beeinflusst den Schatten, ohne die Füllung des übergeordneten Elements zu ändern.

Offset und Ausbreitung

Die Offset-Eigenschaft verschiebt den Schatten relativ zur Position des übergeordneten Elements, während Spread den Schatten relativ zur Größe des übergeordneten Elements erweitert oder verkleinert.

Eingesetzte Schatten

Setzen Sie Inset auf true, um den Schatten oben auf und innerhalb des übergeordneten Elements anstatt dahinter zu rendern. Positive Spread-Werte erweitern einen eingesetzten Schatten in Richtung des Zentrums des übergeordneten Elements.

Inhalte hinter einem transparenten übergeordneten Element sichtbar machen

Standardmäßig ist ShowBehindParent auf true gesetzt, sodass der gesamte Formschatten gerendert wird, einschließlich des Teils direkt hinter dem übergeordneten Element. Setzen Sie es auf false, um diesen Teil des Schattens zu maskieren. Dies verhindert, dass der Schatten Inhalte verdunkelt, die durch ein transparentes übergeordnetes Element sichtbar sind.

Diese Eigenschaft hat keine Auswirkungen auf eingesetzte oder Textschatten.

Schatten schichten

Fügen Sie mehrere UIShadow-Instanzen demselben übergeordneten Element hinzu, um Effekte zu kombinieren. Die ZIndex-Eigenschaft steuert ihre Renderreihenfolge. Schatten mit niedrigeren Werten werden hinter Schatten mit höheren Werten gerendert.

Die Renderreihenfolge von Schatten, die denselben ZIndex teilen, ist undefiniert. Weisen Sie jedem Geschwisterschatten einen anderen Wert zu, wenn ihre Reihenfolge wichtig ist.