Quando crei UI con bordi e angoli personalizzati, spesso sarà necessario rendere gli elementi con rapporti d'aspetto diversi e circondare visivamente il testo localizzato o altri contenuti di dimensioni sconosciute. Questo ti consente di creare elementi UI di dimensioni variabili senza distorcere i bordi o gli angoli.
Nel metodo delle 9-fette, un'immagine (un singolo asset immagine di Roblox) è internamente divisa in nove sotto-immagini, ciascuna con diverse regole di scalatura.
| Sotto-immagine | Scalatura |
|---|---|
| 1 3 7 9 (angoli) | nessuna |
| 2 8 (bordi superiore/inferiore) | orizzontale |
| 4 6 (bordi sinistro/destro) | verticale |
| 5 (centro) | orizzontale + verticale |
Editor di Studio
La configurazione delle fette è possibile impostando direttamente Enum.ScaleType e le proprietà delle fette su un'immagine o un pulsante, ma l'Editor 9-Fette integrato in Studio è più intuitivo.
Apertura dell'editor
Per aprire l'Editor 9-Fette visivo in Studio:
- Imposta la proprietà ScaleType su Slice.
- Fai clic sulla proprietà SliceCenter che appare, quindi fai clic sui … all'interno della riga.
- Nella finestra che si apre, 4 linee rosse sovrappongono l'immagine, rappresentando i bordi delle fette. La dimensione dell'immagine sorgente è anche visualizzata.
Imposta gli offset
In Studio, trascina le linee rosse per impostare gli offset dai bordi sinistro, destro, superiore e inferiore dell'immagine.
Se hai bisogno di una maggiore precisione, inserisci i valori di offset nei campi sul lato destro della finestra dell'editor.
Man mano che riposizioni le linee di trascinamento, 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 sorgente e il trascinamento associato a quel lato.