En utilisant des modificateurs d'apparence, vous pouvez personnaliser davantage l'apparence de vos GuiObjects.
- Appliquez un dégradé à l'arrière-plan d'un objet.
- Appliquez un contour au texte ou à une bordure.
- Définissez des coins arrondis pour un objet.
- Augmentez le remplissage entre les bordures d'un objet.
- Ajoutez une ombre portée derrière un objet.
Dégradé
L'objet UIGradient applique un dégradé de couleur et de transparence à son parent GuiObject.
Vous pouvez configurer le dégradé en :
- Choisissant le point de départ du dégradé (à l'intérieur ou à l'extérieur des limites du parent) via la propriété Offset.
- Choisissant le comportement d'échantillonnage des bords du dégradé via la propriété TileMode.
Séquence de couleurs
Pour définir la séquence de couleurs d'un dégradé :
Dans la fenêtre Explorateur, sélectionnez le UIGradient.
Dans la fenêtre Propriétés, cliquez dans le champ de propriété Color, puis cliquez sur le bouton ⋯ à droite de la zone de saisie.
Chaque triangle sur l'axe inférieur de la séquence de couleurs est un point clé qui détermine la valeur de couleur à ce point.
- Cliquez sur un point clé dans la séquence de couleurs pour le sélectionner ou le repositionner, ou ajoutez un autre point clé en cliquant n'importe où sur le graphique.
- Cliquez sur le petit carré à côté de Couleur pour ouvrir la fenêtre contextuelle Couleurs, puis sélectionnez la couleur souhaitée pour le point clé.
- Si nécessaire, répétez ces étapes pour ajouter/ajuster les couleurs sur le graphique.
Transparence
Pour ajuster la transparence d'un dégradé sur sa plage :
Dans la fenêtre Explorateur, sélectionnez le UIGradient.
Dans la fenêtre Propriétés, cliquez dans le champ de propriété Transparency, puis cliquez sur le bouton ⋯ à droite de la zone de saisie.
Chaque carré sur le graphique de la séquence numérique est un point clé qui détermine la valeur de transparence à ce point.
- Cliquez sur un point clé dans la séquence numérique pour le sélectionner ou le repositionner, ou ajoutez un autre point clé en cliquant n'importe où sur le graphique.
- Entrez une combinaison de temps/valeur spécifique via les entrées Temps et Valeur.
- Si nécessaire, répétez ces étapes pour ajouter/ajuster les niveaux de transparence sur le graphique.
Type
La propriété Type d'un dégradé définit son type parmi Linear, Radial, ou Conical.
Conical — La séquence de couleur/transparence balaye dans le sens des aiguilles d'une montre autour du centre de l'élément, éventuellement décalée par Offset. Rotation contrôle l'angle de départ et de fin du balayage. Par défaut, cela balaye de 0 à 360 degrés, mais des valeurs de Scale inférieures à 1 peuvent réduire cet angle.
Décalage et rotation
Les propriétés Offset et Rotation vous permettent d'ajuster les points de contrôle du dégradé et son angle. Comme illustré dans les diagrammes suivants, Offset est basé sur un pourcentage de la largeur ou de la hauteur du parent, et les valeurs positives ou négatives sont toutes deux valides.
De même, lorsque vous faites pivoter le dégradé, les points de contrôle tournent également :
Échelle
L'échelle d'un dégradé Scale multiplie l'étendue du dégradé, contrôlant combien de la séquence de couleur/transparence est visible dans l'élément.
Lorsque Scale est supérieur à 1, le dégradé s'étend sur plus que l'étendue complète et seule une partie de la couleur/transparence est visible.
Mode de tuilage
La propriété TileMode définit comment le dégradé se répète lorsque la séquence complète ne couvre pas entièrement l'élément parent.
Clamp — Mode par défaut où les valeurs de couleur/transparence au début et à la fin de la séquence s'étendent à l'infini, de sorte que les valeurs de départ remplissent toute zone avant le dégradé et les valeurs de fin remplissent toute zone après.
Repeat — Le dégradé se répète en enveloppant les tuiles de séquence de couleur/transparence de manière transparente de la fin au début. Cela peut produire une couture visible si les premières et dernières valeurs de couleur/transparence dans la séquence diffèrent.
Mirror — Le dégradé se reflète à chaque frontière, de sorte que la séquence de couleur/transparence ping-pong. Cela produit une répétition fluide sans couture, car la direction s'inverse à chaque bord de tuile.
Contour
L'instance UIStroke applique un contour au texte ou à une bordure. Les caractéristiques clés incluent :
- Capacité à définir la transparence du contour indépendamment de la transparence du parent.
- Position et/ou décalage personnalisables par rapport à la bordure du parent.
- Trois styles de coin (arrondi, biseauté ou en onglet).
- Support de dégradé pour le contour via l'instance UIGradient.
Épaisseur
Vous pouvez définir la largeur du contour via la propriété Thickness, qui est mesurée en pixels (par défaut) ou mise à l'échelle par rapport au parent, selon le StrokeSizingMode du modificateur. Si le contour est sur du texte et que StrokeSizingMode est défini sur ScaledSize, l'épaisseur est relative à la taille de la police.
Couleur ou dégradé
Vous pouvez définir la couleur du contour via la propriété Color, ainsi qu'insérer une instance enfant UIGradient pour créer des contours dégradés.
L'objet parent et UIStroke peuvent tous deux avoir des instances enfants UIGradient, vous permettant de définir des dégradés sur le contour et le remplissage indépendamment.
Contour de texte ou bordure
Selon son type de parent, UIStroke fonctionne soit comme un contour de texte, soit comme une bordure. Lorsque vous parenté UIStroke à un objet texte comme TextLabel, il s'applique au contour du texte ; lorsque vous parenté UIStroke à d'autres GuiObjects, il s'applique à la bordure.
Lorsqu'il est appliqué à un objet texte, vous pouvez remplacer le comportement par défaut du contour par la propriété ApplyStrokeMode, vous permettant d'appliquer le contour aux limites de l'objet plutôt qu'au texte lui-même. Vous pouvez même contrôler le contour de texte et la bordure indépendamment en parentant deux instances UIStroke à un objet texte, l'une définie sur Contextuel et l'autre sur Bordure.
Position/décalage de la bordure
BorderStrokePosition définit la position du contour par rapport à la bordure de son parent et BorderOffset vous permet de spécifier un décalage supplémentaire à la position du contour.
Transparence
La propriété Transparency définit la transparence du contour indépendamment de la BackgroundTransparency de l'objet parent ou de la TextTransparency. Cela vous permet de rendre le texte et les bordures "creux" (consistant uniquement en un contour).
Style de coin
La propriété LineJoinMode vous permet de contrôler comment les coins sont interprétés. Elle accepte une valeur de Round, Bevel, ou Miter.
Superposition
Pour superposer plusieurs instances de UIStroke sur un GuiObject de l'avant vers l'arrière, vous pouvez utiliser la propriété ZIndex. Celles avec un ZIndex inférieur s'affichent en dessous (derrière) de celles avec un ZIndex supérieur.
Notez que l'ordre de rendu pour les instances UIStroke avec le même ZIndex est indéfini. N'appliquez pas plusieurs instances UIStroke avec le même index si leur ordre de rendu est important.
Coins
L'instance UICorner applique une déformation aux coins de son parent GuiObject. Vous pouvez contrôler le rayon appliqué via la propriété CornerRadius en utilisant soit Scale soit Offset.
Scale arrondit les coins à un pourcentage basé sur la longueur totale du bord le plus court du parent, ce qui signifie qu'un échelle de 0.5 ou plus déforme le parent en une forme de "gélule", quelle que soit sa largeur ou sa hauteur. Offset arrondit les coins à un nombre spécifique de pixels, quelle que soit la largeur/hauteur du parent.
Vous pouvez également contrôler les coins individuels via les propriétés TopLeftRadius, TopRightRadius, BottomRightRadius, et BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Remplissage
Un objet UIPadding applique un remplissage supérieur, inférieur, gauche et/ou droit au contenu de l'objet parent GuiObject. Par exemple, vous pouvez déplacer le texte à l'intérieur d'une étiquette de texte vers le bas ou vers le haut en appliquant un décalage à la propriété PaddingBottom du modificateur.
Ombre
Un objet UIShadow rend une ombre portée derrière son instance UI parent. Les caractéristiques clés incluent :
- Ajustez la flou de l'ombre.
- Ajustez la couleur et la transparence de l'ombre.
- Ajustez le décalage et l'étalement de l'ombre.
- Si le parent est tourné par GuiObject.Rotation, l'ombre sera également tournée.
- Si le parent a des coins arrondis, l'ombre aura également des coins arrondis.
UIShadow ne prend pas en charge le texte. Si vous ajoutez ce modificateur à un TextLabel ou TextButton, il rend une ombre de la zone de délimitation rectangulaire de l'objet, et non du texte.
Flou
La propriété BlurRadius détermine le flou de l'ombre. Une valeur plus grande rend les bords de l'ombre plus doux. Notez que le facteur de scale de cette propriété UDim est relatif à la largeur ou à la hauteur du parent, selon celle qui est la plus courte.
Couleur et transparence
La propriété Color détermine la couleur de l'ombre, tandis que Transparency définit la transparence de l'ombre avec 0 étant complètement opaque et 1 étant complètement transparent.
Décalage et étalement
La propriété Offset déplace l'ombre par rapport à la position du parent, tandis que Spread étend ou rétrécit l'ombre par rapport à la taille du parent.
