En utilisant les modificateurs d'apparence, vous pouvez personnaliser encore plus 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 bords 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 l'angle du dégradé via la propriété Rotation.
Séquence de couleurs
Pour définir la séquence de couleurs d'un dégradé :
Dans la fenêtre Explorer, sélectionnez le UIGradient.
Dans la fenêtre Propriétés, cliquez à l'intérieur du champ de propriété Color, puis cliquez sur le bouton ⋯ à droite de la zone d'entrée. Une fenêtre contextuelle de séquence de couleur s'affiche.
Chaque triangle sur l'axe inférieur de la séquence de couleurs est un point clé qui détermine la valeur de couleur à cet endroit.
Cliquez sur un point clé dans la séquence de couleurs, puis cliquez sur le petit carré à côté de Couleur pour ouvrir la fenêtre contextuelle Couleurs.
Sélectionnez la couleur souhaitée pour le point clé.
Si nécessaire, vous pouvez :
- Ajouter un autre point clé en cliquant n'importe où sur le graphique.
- Faire glisser un point clé existant vers une nouvelle position, ou sélectionner un point clé et entrer une valeur temporelle spécifique via l'entrée Temps.
- Supprimer un point clé en le sélectionnant et en cliquant sur le bouton Supprimer.
- Réinitialiser la séquence en cliquant sur le bouton Réinitialiser.
Transparence
Pour ajuster la transparence d'un dégradé sur toute sa plage :
Dans la fenêtre Explorer, sélectionnez le UIGradient.
Dans la fenêtre Propriétés, cliquez à l'intérieur du champ de propriété Transparency, puis cliquez sur le bouton ⋯ à droite de la zone d'entrée. Une fenêtre contextuelle de séquence numérique s'affiche.
Chaque carré sur le graphique de la séquence numérique est un point clé qui détermine la valeur de transparence à cet endroit.
Cliquez et faites glisser n'importe quel point clé, ou sélectionnez un point clé et saisissez une combinaison de temps/valeur spécifique via les entrées Temps et Valeur.
Si nécessaire, vous pouvez :
- Ajouter un autre point clé en cliquant n'importe où sur le graphique.
- Supprimer un point clé en le sélectionnant et en cliquant sur le bouton Supprimer.
- Réinitialiser la séquence en cliquant sur le bouton Réinitialiser.
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 des valeurs positives ou négatives sont valides.
De même, lorsque vous faites pivoter le dégradé, les points de contrôle tournent également :
Contour
L'instance UIStroke applique un contour au texte ou à une bordure. Les fonctionnalités clés comprennent :
- Possibilité de définir la transparence du contour indépendamment de la transparence du parent.
- Position et/ou offset personnalisables par rapport à la bordure du parent.
- Trois styles de coins (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, mesurée en pixels (par défaut) ou mise à l'échelle par rapport au parent, selon le mode de taille de contour StrokeSizingMode du modificateur. Si le contour est sur le texte et que StrokeSizingMode est réglé 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 en dégradé.
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 le type de son 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 de 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 au lieu du texte lui-même. Vous pouvez même contrôler le contour du texte et la bordure indépendamment en parentant deux instances de UIStroke à un objet de texte, l'une définie sur Contextuel et l'autre sur Bordure.
Position/offset 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 propriété BackgroundTransparency ou de TextTransparency de l'objet parent. Cela vous permet de rendre du texte et des bordures "creux" (composés uniquement d'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 UIStroke sur un GuiObject de l'avant vers l'arrière, vous pouvez utiliser la propriété ZIndex. Celles avec un ZIndex plus bas sont rendues sous (derrière) celles avec un ZIndex plus élevé.
Notez que l'ordre de rendu pour les instances UIStroke ayant le même ZIndex est indéfini. Ne pas appliquer plusieurs instances de 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'une échelle de 0.5 ou plus déforme le parent en forme de "comprimé", quelle que soit sa largeur ou sa hauteur. Offset arrondit les coins à un nombre spécifique de pixels, indépendamment de la largeur/hauteur du parent.
Vous pouvez également contrôler chaque coin individuellement via les propriétés TopLeftRadius, TopRightRadius, BottomRightRadius, et BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Remplissage
Un objet UIPadding applique le remplissage supérieur, inférieur, gauche et/ou droit au contenu du 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 comprennent :
- Ajuster la flou de l'ombre.
- Ajuster la couleur et la transparence de l'ombre.
- Ajuster le décalage et l'étalement de l'ombre.
- Si le parent est pivoté par GuiObject.Rotation, l'ombre sera également pivotée.
- Si le parent a des coins arrondis, l'ombre aura également des coins arrondis.
UIShadow ne supporte pas le texte. Si vous ajoutez ce modificateur à un TextLabel ou à un TextButton, cela 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 d'échelle de cette propriété UDim est relatif à la largeur ou à la hauteur du parent, selon ce qui est le plus court.
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 totalement opaque et 1 étant totalement 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éduit l'ombre par rapport à la taille du parent.
