En plus de la taille de base des objets d'interface utilisateur, vous pouvez utiliser des modificateurs de taille pour échelonner un objet de manière proportionnelle ou redimensionner automatiquement celui-ci. Vous pouvez également insérer des contraintes de taille pour contrôler le rapport d'aspect, ou définir une taille ou une taille de texte minimale et maximale.
Échelonner
Un objet UIScale stocke une valeur numérique qui multiplie la propriété AbsoluteSize de l'objet parent GuiObject. Par exemple, si vous souhaitez qu'un objet soit deux fois plus grand qu'il ne l'est actuellement, vous pouvez insérer un objet UIScale avec une propriété Scale de 2.
Ce modificateur est utile pour "zoomer" lors de la conception d'une interface utilisateur détaillée dans Studio, car il échelonne proportionnellement l'objet et tous ses enfants, y compris tous les modificateurs d'apparence appliqués comme UIStroke ou UICorner. Il est également utile pour animer la taille d'un objet, par exemple pour augmenter légèrement la taille d'un bouton lorsqu'un joueur place sa souris dessus.
Redimensionnement automatique
La propriété AutomaticSize redimensionne automatiquement un objet parent GuiObject à la taille de ses descendants. Vous pouvez utiliser cette propriété dans divers cas, notamment :
- Permettre aux utilisateurs de saisir du texte dans une TextBox, ajustant automatiquement sa taille en fonction de la quantité de texte saisie.
- Ajuster automatiquement la taille des objets textuels en utilisant le marquage de texte enrichi, y compris le type de police et la taille.
Vous pouvez activer la propriété AutomaticSize pour tout GuiObject. Par défaut, elle est réglée sur None, mais vous pouvez changer sa valeur pour avoir un contrôle spécifique sur la ou les directions dans lesquelles le GuiObject se redimensionne pour s'adapter à son contenu.
ScrollingFrame utilise la propriété AutomaticCanvasSize au lieu de AutomaticSize. Elle se comporte de la même manière mais redimensionne la CanvasSize de la trame, et non sa taille de base Size.
Pour activer le redimensionnement automatique :
Dans la fenêtre Explorer, cliquez sur n'importe quel GuiObject, tel qu'une Frame, TextBox ou ImageLabel.
Dans la fenêtre Propriétés, accédez à la propriété AutomaticSize ( AutomaticCanvasSize pour ScrollingFrame) et réglez-la sur l'une des options suivantes :
- X — Redimensionne le contenu horizontalement.
- Y — Redimensionne le contenu verticalement.
- XY — Redimensionne le contenu à la fois horizontalement et verticalement.
Une fois le redimensionnement automatique configuré, notez que les autres propriétés des objets se comportent comme suit :
Similar to the concept of sizing an object, AutomaticSize takes the AnchorPoint property into consideration when resizing content. For example, the following video displays three TextLabels that automatically resize from their anchor point.
- L'étiquette supérieure a une valeur AnchorPoint de (0, 0.5) qui l'ancresse au milieu du côté gauche.
- L'étiquette du milieu a une valeur AnchorPoint de (0.5, 0.5) qui l'ancresse au centre.
- L'étiquette du bas a une valeur AnchorPoint de (1, 0.5) qui l'ancresse au milieu du côté droit.
Contraintes
Il existe trois types de contraintes que vous pouvez utiliser pour un objet d'interface utilisateur : taille, taille de texte, et rapport d’aspect. Pour utiliser une contrainte, vous devez la définir comme un enfant du GuiObject que vous souhaitez contraindre.
Taille
Le UISizeConstraint spécifie une taille minimale et maximale pour un GuiObject. Cette contrainte garantit que le GuiObject ne devient pas trop petit ou trop grand sur différentes tailles d'écran.
Par exemple, si vous définissez la propriété MinSize sur (200, 200) et la propriété MaxSize sur (400, 400), le GuiObject ne peut pas être redimensionné en dessous de 200×200 pixels ou au-dessus de 400×400 pixels.
Lorsqu'un objet UI est sous le contrôle à la fois d'une structure de mise en page telle que UIListLayout et d'une UISizeConstraint, la contrainte remplacera la mise en page et контролera la taille de l'objet.
Taille de texte
Le UITextSizeConstraint spécifie une taille de police minimale et maximale pour un GuiObject avec du texte, tel qu'un TextLabel, TextButton, ou TextBox. Cette contrainte garantit que le texte à l'intérieur d'un GuiObject ne devient pas illisible ou trop grand.
Si vous activez la propriété TextScaled de l'objet parent GuiObject, la taille du texte s'ajuste à la taille du conteneur et respecte les contraintes même si l'objet devient plus petit ou plus grand que les valeurs MinTextSize et MaxTextSize.
Par exemple, l'objet TextLabel suivant a un UITextSizeConstraint avec une valeur MinTextSize de 50 et une valeur MaxTextSize de 80. Même lorsque le TextLabel devient plus petit, la police ne devient jamais plus petite que 50 pixels, et lorsque l'objet devient grand, la police ne dépasse jamais 80 pixels.
Ne pas utiliser des valeurs de propriété MinTextSize inférieures à 9 ou le texte sera difficile à lire pour de nombreux spectateurs.
Rapport d'aspect
Le UIAspectRatioConstraint impose un rapport d'aspect largeur-hauteur sur un GuiObject indépendamment de sa taille de base, même si cette taille est définie comme un pourcentage de son parent. Par exemple, insérer cette contrainte comme enfant d'une Frame et définir la propriété AspectRatio de la contrainte à 2 (2:1) maintient la largeur de la trame à deux fois celle de sa hauteur. De même, définir la propriété AspectRatio de cette contrainte à 0.5 (0.5:1) maintient la largeur de la trame à la moitié de sa hauteur.
Définir la propriété AspectRatio de cette contrainte à la valeur par défaut de 1 (1:1) est un moyen pratique d'empêcher l'échelle/étirement non proportionnel d'un ImageLabel avec un asset image carré, comme un miniature d'avatar.
Lorsqu'un objet UI est sous le contrôle à la fois d'une structure de mise en page telle que UIListLayout et d'une UIAspectRatioConstraint, la contrainte remplacera la mise en page et контролera la taille de l'objet.