Come ritagliare un set di tasselli da un’immagine
Un set di tasselli sembra a prima vista un foglio di sprite, una griglia di piccole immagini quadrate in un unico file, ma ha un requisito più rigoroso: ogni tassello deve combaciare senza giunzioni visibili con ogni altro quando viene posizionato su una mappa. Estrarlo da un’immagine di riferimento piatta, soprattutto se non è stata creata fin dall’inizio su una griglia di pixel, significa trovare quella griglia, non soltanto indovinarla.
Tileset e foglio di sprite: perché il livello richiesto è più alto
Un foglio di sprite contiene immagini indipendenti. Se un fotogramma di un ciclo di camminata è decentrato di un pixel rispetto al successivo, nessuno lo nota: ogni fotogramma viene disegnato da solo e piccole variazioni di posizione sembrano un movimento naturale. Un set di tasselli è diverso. Ogni tassello viene posizionato bordo contro bordo accanto ai vicini su una griglia, ripetutamente, in tutto il livello. Un disallineamento di un pixel in un tassello non rimane confinato a quel tassello: si ripete a ogni giunzione in cui compare e, su una texture ripetuta di terreno o parete, può significare decine di giunzioni visibili da un solo taglio sbagliato.
È tutto il vincolo dei tasselli: giunzioni invisibili richiedono bordi esatti al pixel, quindi una griglia reale e individuabile prima di tagliare.
Scelta delle dimensioni dei tasselli
Se estrai tasselli da una risorsa esistente di qualcun altro, le dimensioni sono di solito già fissate dalla grafica: conta quante volte un motivo ripetuto, come un mattone, un ciuffo d’erba o un’asse, compare lungo la larghezza e dividi. Se definisci tu il set da un’immagine di riferimento o un foglio di texture generato, dimensioni comuni sono 16×16, 32×32 e 48×48 pixel.
- 16×16 appare come classica pixel art retro. Non perdona i dettagli: ogni tessera deve comunicare il proprio materiale, erba, pietra o acqua, con pochissimi pixel, e questa è una vera abilità artistica a sé.
- 32×32 è il valore predefinito moderno più comune. Abbastanza spazio per texture e ombreggiatura senza richiedere precisione subpixel per risultare chiaro ai normali livelli di zoom.
- 48×48 e superiori sono adatti a giochi con tessere più grandi sullo schermo o grafica più pittorica, dove desideri dettagli di texture visibili anziché un aspetto piatto da pixel art.
Qualunque dimensione tu scelga, mantienila coerente in tutto il tileset e, idealmente, in ogni tileset del progetto. Dimensioni miste delle tessere ti obbligano a ridimensionare la grafica durante l’esecuzione, reintroducendo proprio i problemi di sfocatura che la pixel art cerca di evitare, oppure a mantenere più sistemi di griglia separati nell’editor dei livelli.
Ricerca dello scostamento quando la griglia non parte da zero
È il passaggio che trae in inganno. Sai che la tessera misura 32 px, quindi ritagli a 0, 32, 64, 96… e le tessere risultano tagliate a metà, con una texture di muro composta soprattutto da pavimento in una riga e soprattutto da muro nella successiva. La griglia effettiva del tileset non parte dall’angolo superiore sinistro dell’immagine: è spostata di un certo numero di pixel, spesso perché l’immagine sorgente ha un bordo, un margine rimasto da uno screenshot o una spaziatura aggiunta in esportazione.
Per trovare l’offset, ingrandisci l’immagine fino a vedere i singoli pixel e cerca un elemento ripetuto: una linea di malta tra i mattoni, un’ombra alla base di una tessera d’erba, un riflesso lungo il bordo superiore di una tessera. Misura la coordinata del pixel in cui quell’elemento compare per la prima volta, poi controlla se ricorre ogni N pixel dove N è la dimensione della tessera. Se la prima linea di malta si trova a x = 6 e la successiva a x = 38, l’offset è di 6 pixel e l’ipotesi di tessere da 32 è confermata. Applica l’offset ai due assi indipendentemente: offset orizzontale e verticale non sono correlati e l’immagine può facilmente averne uno senza l’altro.
Tessere senza spazi e il problema della contaminazione dei bordi
I fogli di sprite hanno spesso spazi trasparenti tra fotogrammi. I set di tasselli solitamente no: si affiancano senza spazi per combaciare una volta posizionati. Nel motore questo causa contaminazione della texture, con una striscia del tassello vicino sul bordo di quello posizionato.
La contaminazione avviene per il modo in cui le GPU campionano le texture. Quando un tassello viene disegnato senza una corrispondenza esatta 1:1 dei pixel, perché è leggermente ridimensionato o la fotocamera è su una posizione subpixel, il renderer campiona una miscela del pixel sul bordo e di ciò che lo affianca nella texture sorgente, cioè il tassello vicino. La soluzione non è aggiungere uno spazio nell’immagine originale, che romperebbe la tassellatura: è usare il filtraggio puntuale/vicino più prossimo per evitare interpolazioni contaminanti oppure fare estrudere automaticamente al motore un bordo di un pixel durante l’impacchettamento/importazione. Sprite Atlas di Unity e l’importatore TileSet di Godot hanno entrambi un’opzione di margine o estrusione proprio per questo: attivala per qualsiasi set di tasselli che verrà ridimensionato o spostato a posizioni non intere.
Rimozione dei tasselli duplicati
Dopo aver ritagliato tutta la griglia, è comune ottenere tasselli identici o quasi: uno d’erba semplice può apparire quattro volte in un foglio di riferimento perché la grafica lo ripeteva per equilibrio visivo. Conservare duplicati non è propriamente sbagliato, ma gonfia la risorsa, rende più difficile leggere la tavolozza nell’editor di livelli e richiede di applicare in futuro le modifiche al “tassello d’erba” in più punti.
Un modo semplice per trovare duplicati senza esaminare a occhio decine di quadratini: calcola l’hash dei dati grezzi dei pixel di ogni tassello e confronta gli hash. Tasselli con hash identico sono identici a livello di pixel e possono essere ridotti a uno senza rischi. I quasi duplicati, per esempio un tassello che differisce per un solo pixel ricolorato, come una torcia accesa rispetto a una spenta, avranno hash diversi e richiedono una decisione umana: sono tasselli davvero diversi o varianti da conservare intenzionalmente separate?
Importazione in un motore
Unity: Tile Palette
Importa il set di tasselli ritagliato come Sprite con Sprite Mode impostato su Multiple, ritaglialo nello Sprite Editor usando Grid By Cell Size con le dimensioni dei tasselli, poi apri Window → 2D → Tile Palette, crea una nuova tavolozza e trascinaci gli sprite ritagliati. Da lì, i tasselli si dipingono direttamente su un componente Tilemap nella scena. Se hai già ritagliato singoli PNG dei tasselli fuori da Unity, puoi saltare completamente il passaggio nello Sprite Editor e trascinare la cartella dei PNG direttamente in una tavolozza.
Godot: risorsa TileSet
Crea una risorsa TileSet su un nodo TileMapLayer e, nella sua sorgente Atlas, aggiungi l’immagine del set di tasselli ritagliato con dimensioni corrispondenti. L’importatore di Godot espone anche impostazioni Separation e Margin sulla sorgente dell’atlante, che gestiscono fogli con piccoli spazi tra i tasselli anziché la disposizione senza spazi descritta sopra. Se la sorgente non aveva spazi e vedi contaminazioni nella vista dell’editor, attiva l’opzione di margine della texture dell’atlante: duplica internamente i pixel del bordo affinché il campionamento non raggiunga mai un tassello vicino.
Un ordine pratico delle operazioni
- Identifica le dimensioni dei tasselli contando una caratteristica ripetuta lungo l’immagine.
- Trova lo scostamento x e y individuando dove inizia davvero il primo tassello.
- Taglia su quella griglia: linee trascinabili rendono il passaggio visivo e verificabile anziché un calcolo alla cieca.
- Confronta gli hash dei tasselli e accorpa i duplicati esatti.
- Importa nel motore con margini o estrusione attivi se i tasselli verranno mai renderizzati a scale o posizioni non intere.
Domande frequenti
I tasselli sono ritagliati correttamente ma nel motore rimane una giunzione.
Quasi sempre è contaminazione da filtro, non un taglio errato. Imposta point/nearest oppure attiva margini/estrusione del motore, che aggiungono a ogni tassello un pixel di bordo duplicato evitando che l’interpolazione campioni il vicino.
Posso usare un’immagine generata con IA come sorgente di un set di tasselli?
Puoi farlo, ma aspettati che la griglia si sposti: la grafica delle tessere generata raramente cade su confini esatti in pixel come un tileset costruito a mano. Misura attentamente l’offset per ogni riga e colonna, anziché presumere che un unico offset fisso valga per tutta l’immagine; è comune che lo scostamento aumenti leggermente man mano che percorri il foglio.
Dovrei aggiungere uno spazio di 1px tra i tasselli nella sorgente?
Non nella grafica sorgente: uno spazio lì apparirebbe come linea visibile affiancando i tasselli sulla mappa. Mantieni la sorgente senza spazi e lascia che l’importazione del motore aggiunga margini interni all’atlante impacchettato: risolve la contaminazione senza alterare l’aspetto dei tasselli posizionati.
Come capisco se due tasselli sono varianti intenzionali o duplicati?
Se i dati dei pixel sono identici byte per byte, è un duplicato e puoi rimuoverlo senza rischi. Se differiscono anche poco, per esempio con crepe diverse in un tassello di pietra, probabilmente è una variante intenzionale per interrompere la ripetizione visiva su grandi superfici tassellate; rimuoverla renderà i livelli più uniformi di quanto previsto dalla grafica originale.
Ritaglia la griglia senza stimare a occhio gli scostamenti
La modalità Manuale e preimpostazioni permette di trascinare le linee sull’immagine e vedere il confine nel punto reale di inizio della griglia, scostamenti compresi. Nessun caricamento: ritaglio locale nel browser.
Apri Ritagliatore di fogli di sprite