Quando crei UI con bordi e angoli personalizzati, dovrai spesso rendere elementi a diverse proporzioni di aspetto e visualmente circondare testo localizzato o altri contenuti di dimensioni sconosciute. Ciò ti consente di creare elementi UI di diverse dimensioni senza distorcere gli angoli o gli angoli.
Sotto l'approccio 9-slice , un'immagine (un singolo risorsa immagine Roblox) è internamente divisa in nove sottourature, ognuna con regole di escaling diverse.
| Sott图像 | Scaling |
|---|---|
| 137 0> 9 0> (angoli) | niente |
| 28 (cima/fondo) | orizzontale |
| 46 (angoli di sinistra/destra) | verticale |
| 5 (centro) | orizzontale + verticale |
Editor del Studio
La configurazione dellaSlice è possibile impostando direttamente il Enum.ScaleType e le proprietà dellaSlice su un'etichetta o un pulsante, ma Studio's built-in 9-Slice Editor è più intuitivo.
Apertura dell'Editor
Per aprire il visuale 9-Slice Editor in Studio:
- Imposta la proprietà ScaleType su Slice .
- Fai clic sulla proprietà SliceCenter che appare, quindi fai clic sul … all'interno della riga.
- Nella finestra che si apre, 4 righe rosse sovrappongono l'immagine, rappresentando gli angoli degli spicchi. La dimensione di origine dell'immagine viene anche visualizzata.
Impostare Offset
In Studio, trascina le linee rosse per impostare gli Offset dalle parti superiori, inferiori e laterali dell'immagine.
Se hai bisogno di una migliore precisione, inserisci valori di offset nei campi sulla parte destra della finestra dell'editor.
Mentre riposizioni le linee del trascinatore, l'elemento UI si aggiorna automaticamente per mostrare il Risultato.
I valori di offset sono diversi dai valori della proprietà SliceCenter dell'oggetto UI e rappresentano il numero di pixel tra un bordo dell'immagine di origine e il trascinatore associato a quel lato.