Nine-Slice e pannelli scalabili per la UI di gioco: marcature Figma / PSD e QA dello slicing nei motori

Quando un pannello viene allargato, angoli sfocati, texture centrale ripetuta o angoli ovali di solito indicano che il nine-slice (9-slice / cap insets) non è stato specificato all’handoff, oppure che il motore usa la scala Simple sull’intero sprite. Regolare Image Type e i bordi nell’Editor di Unity può salvare una schermata, ma il prossimo drop di design li sovrascrive: se i bordi non corrispondono alla scala di export, si entra in cicli di rilavorazione.

Gli esempi seguenti si concentrano su Image di Unity UGUI (Sliced / Tiled). StyleBoxTexture di Godot e il nine-slice degli sprite di Cocos mappano sugli stessi concetti, incluso il content padding. Ancore e Safe Area: punto 6 della checklist motore + MCP. Padding delle regioni di stretch con le lingue: controllo di design 7 di overflow delle lingue.

Il punto 6 della checklist di handoff del design richiede regioni nine-slice / stretch chiare. Questo articolo copre quando fare lo slice, le marcature Figma/PSD, l’accettazione sui tre motori e il percorso da canvas full-screen, più una tabella di correzione.

Criteri di fallimento (uno qualsiasi = non superato): l’arte degli angoli si deforma quando viene allargata; ripetizione o cuciture indesiderate nella regione di stretch; il raggio degli angoli cambia con la dimensione del pannello; sfondo scalabile scalato insieme a icone/avatar fissi; scala di export che non corrisponde ai pixel dei bordi nel motore (gap di 1px o bordi morbidi).

---

Quando il nine-slice è necessario e quando lo stretch rigido è vietato

Tipo di asset	Fare	Non fare
Sfondo di dialog / pannello impostazioni	Nine-slice + content padding	Un singolo sprite Simple a tutta pagina
Container di input / barre	Nine-slice o cap L/R + ripetizione centrale	Schiacciare l’altezza senza regole d’arte
Pulsanti primari (dimensione fissa)	Sprite fisso o nine-slice + larghezza minima	Pulsante arrotondato infinitamente largo come unico stretch
Icone, avatar, cornici abilità	Dimensione fissa, niente nine-slice	Unire con lo sfondo del pannello in un’unica immagine allungata
Sfondo full-screen (senza riquadro)	Immagine intera o strategia a tile nella spec	Riusare i bordi del pannello su full bleed

Regola: se larghezza o altezza cambiano con risoluzione, testo o contenuto di lista e gli angoli devono mantenere la forma → nine-slice o equivalente del motore. Controlli a dimensione fissa → sprite fisso + vincoli di layout.

---

Marcature di handoff Figma / PSD (lista di controllo)

#	Verifica	Standard di superamento
1	Layer di stretch separato da decor / icone / testo	Reskin dello sfondo del pannello + slice; icone non scalate con lo sfondo
2	Border / cap inset in px (quattro lati)	Corrisponde a @1x o alla scala di export del team nelle note di consegna
3	Scala di export fissa (@1x/@2x o baseline 1080)	L’engineering non indovina il calcolo dei bordi
4	Raggio degli angoli fuori dalla regione di stretch o spec che consente angoli non-stretch	Nessun passaggio con “angoli che diventano capsule”
5	Regione di stretch tile-friendly o solida	Ripetizione centrale senza disallineamenti evidenti
6	Nomi semantici	es. Panel_Shop_9s, Input_Field_9s
7	Multi-stato (normal / disabled) con stesso bordo	Gli inset corrispondono; cambiano solo colore/skin
8	Slice PSD o note di export Figma con padding trasparente	Non contare l’ombra nel bordo se la spec non lo prevede
9	Consegna con gli stati dei pulsanti del punto 5 dell’handoff	Non rattoppare stati mancanti con arte 9s sbagliata
10	Il reskin dell’evento cambia solo l’arte, bordo invariato	Vedi la spec di reskin

Figma: inserisci il cap inset nella documentazione del componente quando usi frame ridimensionabili o plugin di slice. PSD: allinea gli slice con PSD to Unity in 5 minuti.

---

Tre motori: componenti e accettazione

Voce	Unity UGUI	Godot 4 Control	Cocos UI
Componente	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Sorgente dei bordi	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
Area contenuto	RectTransform + padding dei figli	MarginContainer + Theme	Widget / padding di layout
Fallimento tipico	Uso errato di Simple; bordo con scala sbagliata	Disallineamento tra patch e dimensione texture	Rotazione dell’atlas che rompe l’inset
Superamento	Al 150% / 200% di larghezza: angoli nitidi, centro pulito	Idem; anteprima del Theme coerente con Play	Idem; spot-check su dispositivo con lista lunga

Accettazione nell’Editor di Unity (mappa sugli altri motori):

1. Imposta Image del Prefab su Sliced con bordi coerenti con il design.
2. Trascina il RectTransform del pannello alle larghezze min e max di design.
3. Confronta angoli, bordi e centro con la cattura Figma/PSD.
4. Se la modalità Play è OK → un passaggio su dispositivo secondo la checklist pre-ship.

---

Concetto full-screen: split del canvas e ri-export

Con solo arte full-screen PNG o AI, il bordo non può essere dedotto. Percorso: VberAI Studio (AI Studio, ≠ Google AI Studio) split in-place → marca i pannelli scalabili → export Prefab (deterministico, non YAML da LLM).

Passo	Azione	Accettazione
1	Full screen sul canvas; separa Panel_* e icone fisse	Gerarchia con nomi
2	Conferma l’intento 9-slice del pannello sul canvas o prima dell’export	Owner dell’inset documentato
3	Esporta Prefab Unity / Godot / Cocos	QA Sliced secondo la tabella sopra
4	Dopo reskin / lingue, ri-export dell’intero albero	Se la spec dei bordi è invariata, gli inset restano invariati

Figma/PSD a livelli: preferisci Figma → Unity o PSD to UGUI, poi piccole modifiche ai bordi nel motore—evita di riesportare 20 PNG sparsi a ogni evento.

---

Instradamento delle correzioni

Sintomo	Causa probabile	Azione	Owner
Angoli sfocati	Scala Simple sull’intera immagine	Sliced + bordo corretto; il design aggiunge la marcatura dell’inset	Engineering + Design
Cucitura centrale / blocchi ripetuti	inset fuori di 1–2px; scala disallineata	Allinea ai px del design; reimporta lo sprite	Engineering
Angoli allungati a ovale	L’arte non dovrebbe fare nine-slice	Dimensione fissa o nuova arte per gli angoli	Design
Bordo che cambia dopo il reskin	Nuova dimensione arte o padding	Blocca la dimensione del canvas nella spec di reskin; ri-QA dopo il reskin	Design
Sfondo di riga di lista deformato	Sfondo di riga allungato come pannello intero	9s specifico per riga o altezza fissa	Design
Fallisce solo a certe risoluzioni	Scala non intera del Canvas Scaler	Checklist motore Anchor/Scaler	Engineering

Regola: se bordo ≠ design → correggi prima le marcature o la sorgente dello sprite, poi il Prefab. Correzioni solo nell’Inspector senza aggiornare la consegna → perse al prossimo export.

---

Confronto con l’handoff “solo pacchetto PNG”

Approccio	Adatto a	Non adatto a
Export manuale + engineering che riempie i bordi	Pochi pannelli, demo	Reskin frequenti, molte schermate
Figma/PSD + export strutturato con VberAI Studio	Multi-schermata, multi-motore, eventi	Sostituire marcature di inset e QA
Sliced temporaneo nel motore	Hotfix di una schermata	Lungo termine senza sorgente di design

Consigliato: marcature di inset nel design → export Prefab strutturato → Sliced nell’Editor di Unity a due larghezze → MCP per la logica. Raycast e binding: checklist motore + MCP.

---

Domande frequenti

I pannelli arrotondati possono usare il nine-slice?
Sì, ma gli inset devono stare sui lati dritti di stretch; gli angoli restano nei tile d’angolo non-stretch. Se il raggio degli angoli cresce con la dimensione del pannello → fallimento; correggi l’arte o limita la dimensione massima.

Le ombre contano nel bordo?
Lo decide la spec di prodotto. Se l’ombra non si allunga, separa i layer o marca l’inset sul rettangolo solido senza il bagliore esterno.

Tiled o Sliced?
Sliced per pannelli con riquadro; Tiled (o arte centrale tile-friendly) per texture centrale ripetuta. Scrivilo nella spec—non lasciare che l’engineering indovini.

Slice separati per Godot / Cocos?
Una sola semantica di inset; cambia il target di export tramite export multi-motore del canvas e verifica patch/cap secondo la tabella.

VberAI Studio riempie automaticamente i bordi?
Dipende da export e asset; l’accettazione è sempre Sliced/StyleBox nel motore. Nessun inset nel design → l’engineering imposta i bordi nell’Editor e li registra nella spec.

VberAI Studio è la stessa cosa di Google AI Studio?
No. Vedi il confronto.