Quando crei l'interfaccia utente con bordi e angoli personalizzati, spesso devi rendere gli elementi a diversi rapporti di aspetto e circondare visivamente testo localizzato o altri contenuti di dimensioni sconosciute.Questo ti consente di creare elementi UI di diverse dimensioni senza distorcere i bordi o gli angoli.
Nell'approccio a 9 fette , una sola immagine (un singolo risorsaimmagine Roblox) viene internamente divisa in nove sottounità, ognuna delle quali ha regole di ridimensionamento diverse.
| Sott immagine | Scaling |
|---|---|
| 1379 (angoli) | nessuno |
| 28 (bordi superiori/ inferiori) | orizzontale |
| 46 (bordi sinistra/destra) | verticale |
| 5 (centro) | orizzontale + verticale |
Editor dello studio
La configurazione delle fette è possibile impostando direttamente le proprietà Enum.ScaleType e le fette sulle etichette o sui pulsanti dell'immagine, ma l'editor integrato di Studio 9-Slice è più intuitivo.
Apertura dell'editor
Per aprire il visuale 9-Slice Editor in Studio:
- Imposta la proprietà ScaleType a Slice .
- Fai clic sulla proprietà Centro di taglio che appare, quindi fai clic su … all'interno della riga.
- Nella finestra che si apre, 4 linee rosse sovrappongono l'immagine, che rappresenta i bordi delle fette. Viene anche visualizzata la dimensione dell'immagine di origine.
Imposta gli offset
In Studio, trascina le linee rosse per impostare gli spostamenti dagli angoli sinistri, destri, superiori e inferiori dell'immagine .
Se hai bisogno di una precisione migliore, inserisci i valori di offset nei campi sul lato destro della finestra dell'editor.
Mentre riposizioni le linee trascinatori, 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.