Lorsque vous créez une interface utilisateur avec des bordures et des coins personnalisés, vous devrez souvent rendre des éléments à différents rapports d'aspect et entourer visuellement du texte localisé ou d'autres contenus de dimensions inconnues. Cela vous permet de créer des éléments UI de tailles variées sans déformer les bordures ou les coins.
Sous l'approche 9 tranches, une image (un seul actif d'image Roblox) est divisée en neuf sous-images, chacune avec des règles de mise à l'échelle différentes.
| Sous-image | Mise à l'échelle |
|---|---|
| 1 3 7 9 (coins) | Aucune |
| 2 8 (bords haut/bas) | Horizontal |
| 4 6 (bords gauche/droite) | Vertical |
| 5 (centre) | Horizontal + vertical |
Éditeur Studio
La configuration des tranches est possible en définissant directement les propriétés Enum.ScaleType et de tranche sur un label d'image ou un bouton, mais l'Éditeur 9 tranches intégré de Studio est plus intuitif.
Ouverture de l'éditeur
Pour ouvrir l'Éditeur 9 tranches visuel dans Studio :
- Définissez la propriété ScaleType sur Slice.
- Cliquez sur la propriété SliceCenter qui apparaît, puis cliquez sur les … dans la ligne.
- Dans la fenêtre qui s'ouvre, 4 lignes rouges superposent l'image, représentant les bords des tranches. La taille de l'image source est également affichée.
Définir les décalages
Dans Studio, faites glisser les lignes rouges pour définir les décalages des bords gauche, droit, supérieur et inférieur de l'image.
Si vous avez besoin d'une meilleure précision, entrez les valeurs de décalage dans les champs à droite de la fenêtre de l'éditeur.
Au fur et à mesure que vous repositionnez les lignes de glissement, l'élément UI se met automatiquement à jour pour montrer le résultat.
Les valeurs de décalage sont différentes des valeurs de la propriété SliceCenter de l'objet UI et représentent le nombre de pixels entre un bord de l'image source et la ligne de glissement associée à ce côté.