Conception de l'interface utilisateur 9-Slice

Lors de la création d'une interface utilisateur avec des contours et des coins personnalisés, vous devrez souvent rendre des éléments à différents ratios d'aspect et visuellement entourer le texte localisé ou d'autres contenus de tailles inconnues. Cela vous permet de créer des éléments d'interface de tailles diverses sans déformer les contours ou les coins.

Sous l'approche 9-Slice , une image (une seule contenu'image Roblox) est divisée en neuf sous-images, chacune avec des règles de mise à l'échelle différentes.

Éditeur de studio

La configuration de la découpe est possible en directement définissant le Enum.ScaleType et les propriétés de découpe sur une étiquette d'image ou un bouton, mais Studio's 9-Slice Editor est plus intuitif.

Ouverture de l'éditeur

Pour ouvrir l'éditeur visuel 9-Slice Editor dans Studio :

1. Sélectionnez un ImageLabel ou ImageButton avec un ID de ressource valide saisi dans son champ Image .

1. Définissez la propriété ScaleType sur Slice .

1. Cliquez sur la propriété SliceCenter qui apparaît, puis cliquez sur le … dans la rangée.

1. 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écalage des paramètres

Dans Studio, faites glisser les lignes rouges pour définir les Offsets des coins supérieur, droit, gauche et bas de l'image.

Au fur et à mesure que vous réorganisez les lignes de déplacement, l'élément UI se met à jour automatiquement pour afficher le resultats.