Come ritagliare un foglio di sprite irregolare generato con IA

Perché i fogli di sprite IA non seguono mai una griglia perfetta

Un foglio di sprite tradizionale viene creato da uno strumento. Un artista disegna fotogrammi con celle di dimensioni fisse e un esportatore li impacchetta a scostamenti esatti in pixel. Ogni cella è identica, ogni sprite occupa un riquadro noto e il ritaglio è un calcolo aritmetico.

I generatori di immagini non funzionano così. Modelli di diffusione come DALL·E, Midjourney e Stable Diffusion generano un’immagine continua. Quando chiedi “un foglio di sprite di un cavaliere che cammina, griglia 4x4”, il modello produce qualcosa che sembra un foglio di sprite perché ne ha visti migliaia. Sta imitando lo stile visivo di una griglia, non calcolando i confini delle celle. Nulla nel processo di generazione impone che la terza riga inizi esattamente 384 pixel più in basso.

Le conseguenze pratiche sono coerenti:

• Spaziatura variabile. Gli spazi tra sprite variano da pochi pixel ad alcune decine. La variazione di solito si accumula da sinistra a destra e dall’alto al basso, quindi i fotogrammi in basso a destra sono i peggiori.
• Dimensioni degli sprite incoerenti. Un personaggio a metà passo è più largo di uno fermo. Il modello disegna ogni posa nelle dimensioni che sembrano giuste, senza adattarla a un riquadro uniforme.
• Contenuto decentrato. Anche quando le celle sono quasi uniformi, lo sprite al loro interno è raramente centrato, quindi un ritaglio corretto della griglia produce comunque fotogrammi che tremolano durante la riproduzione.
• Fotogrammi mancanti o uniti. Talvolta ottieni quindici sprite in una disposizione 4x4 o due pose sovrapposte come una massa unica.
• Dimensioni dispari della tela. Un output di 1024x1024 diviso in tre colonne dà 341.33 pixel. Occorre arrotondare qualcosa, e gli errori di arrotondamento si accumulano.

Perché il ritaglio a griglia fissa fallisce

Il ritaglio a griglia fissa fa un presupposto: l’immagine è una griglia di celle uguali. Divide la larghezza per le colonne, l’altezza per le righe e taglia. Quando il presupposto è valido è perfetto e rapido. Quando non lo è, l’errore non è rumore casuale ignorabile. Ogni taglio cade nel punto sbagliato e gli errori sono visibili proprio nel modo più importante per l’animazione.

Un fotogramma tagliato di quattro pixel in alto non è soltanto un problema estetico. In un motore di gioco, i fotogrammi vengono disegnati sullo stesso punto di ancoraggio, quindi uno sprite il cui contenuto si trova quattro pixel più in basso nel secondo fotogramma rispetto al primo saltellerà visibilmente durante la riproduzione. I giocatori lo percepiscono come un difetto, anche se non sanno descriverlo. Correggerlo a mano in seguito, fotogramma per fotogramma, richiede più tempo che ritagliare correttamente dall’inizio.

La soluzione: taglia per contenuto, non coordinate

Se la griglia non sa dirti dove sono gli sprite, i pixel possono. In un foglio con sfondo trasparente ogni pixel fa parte di uno sprite (alfa maggiore di zero) oppure dello sfondo (alfa zero). Questa sola distinzione basta a trovare gli sprite senza conoscere prima la disposizione.

Come funziona il rilevamento basato sul contenuto

1. Conferma che lo sfondo sia trasparente. Campiona i pixel agli angoli. Se sono completamente trasparenti, il foglio è candidato al rilevamento automatico. Se sono bianchi o uniformi, richiede prima la rimozione dello sfondo.
2. Trova righe e colonne vuote. Scorri l’immagine e registra quali righe di pixel non contengono pixel opachi, e lo stesso per le colonne. Quelle fasce vuote sono gli spazi tra gli sprite, ovunque cadano.
3. Taglia al centro di ogni spazio di separazione. Uno spazio di separazione è un intervallo, non una linea. Tagliarlo al centro dà a ogni sprite vicino il massimo spazio libero e tollera uno o due pixel antialias isolati.
4. Rifila ogni pezzo al proprio riquadro di delimitazione. Dopo aver isolato una parte, riducila al rettangolo più stretto che contiene pixel opachi. Elimina i margini irregolari che facevano sembrare diverse le celle.
5. Controlla il risultato e ripeti. Un primo passaggio lascia spesso problemi: un ritaglio contiene ancora due sprite perché si toccano, oppure ha molto più spazio vuoto degli altri. Rianalizzare l’output e suddividerlo o rifilarlo nuovamente permette di individuare la maggior parte di questi problemi.

È ciò che il Magic Slice scheda nel nostro Ritagliatore di fogli di sprite fa. Rileva gli sfondi trasparenti, trova i confini degli sprite tramite il canale alfa ed esegue fino a tre passaggi di rifinitura, controllando ogni ritaglio prodotto per spaziatura eccessiva o sprite multipli e ritagliando di nuovo dove necessario. Una sensibilità bassa, media o alta controlla quanto è aggressivo il rilevamento dei confini: aumentala quando gli sprite quasi si toccano, riducila quando uno sprite con parti staccate, come uno scudo fluttuante o un effetto di magia, viene separato.

Confini rilevati sul foglio

Sedici file, ciascuno rifilato

Se il foglio ha uno sfondo uniforme

Il rilevamento del contenuto richiede trasparenza. Se il foglio ha uno sfondo uniforme bianco, nero o magenta, passalo prima in uno strumento di rimozione dello sfondo: il nostro si trova in /remove-bg e funziona campionando i pixel agli angoli ed eliminando ogni pixel sufficientemente vicino a quel colore, poi esportando un PNG trasparente. Fallo prima ritaglio, non dopo: rimuovere lo sfondo una volta da un unico foglio è una sola operazione, mentre farlo su sedici fotogrammi separati offre sedici occasioni di ottenere risultati incoerenti.

Linee manuali della griglia: l’alternativa che funziona sempre

Il rilevamento automatico fallisce su alcuni fogli ed è utile sapere quando. Gli sprite che si sovrappongono o si toccano non possono essere separati cercando fasce vuote, perché non esistono. I fogli con un’ombra proiettata o un bagliore estesi sull’intera tela non hanno righe completamente trasparenti. I fogli in cui un singolo personaggio è composto da parti staccate verranno suddivisi troppo.

Per tutti questi casi, trascina personalmente le linee. Il Manuale e preimpostazioni scheda parte da una griglia preimpostata tra 2x2 e 6x6, oppure da un numero personalizzato di righe e colonne fino a 20x20, e consente poi di trascinare ogni singola linea della griglia dove dovrebbe trovarsi realmente. Il flusso di lavoro è:

1. Scegli la preimpostazione più vicina alla disposizione prevista, 4x4 per sedici fotogrammi, anche se la spaziatura reale è irregolare.
2. Trascina ogni linea verticale nello spazio alla sua sinistra o destra. Procedi da sinistra a destra per regolarla sempre rispetto a una linea già corretta.
3. Fai lo stesso con le linee orizzontali, dall’alto verso il basso.
4. Ingrandisci il fotogramma con meno spazio libero, di solito la posa più larga, e verifica che nessuna linea lo attraversi.
5. Esporta. PNG conserva la trasparenza ed è ciò che serve per gli sprite; sono disponibili anche JPG e WebP, ma JPG elimina completamente il canale alfa.

La regolazione manuale sembra lenta ma non lo è: un foglio di sedici fotogrammi ha solo sei linee interne, quindi fai sei trascinamenti, non sedici ritagli. È molto più veloce che aprire il foglio in un editor e selezionare ogni fotogramma.

Preparazione dei fotogrammi per un motore di gioco

Ottenuti PNG singoli, ci sono due percorsi verso un motore: importarli separatamente oppure reimpacchettarli in un foglio pulito e uniforme. La scelta dipende da motore e progetto.

Unity

Per fotogrammi separati, inserisci i PNG nel progetto e imposta Texture Type su Sprite (2D and UI), Sprite Mode su Single. Imposta Filter Mode su Point (no filter) e Compression su None per la pixel art: il filtraggio bilineare su uno sprite 32x32 lo rende impastato. Imposta Pixels Per Unit in modo che corrisponda alla griglia, poi seleziona tutti i fotogrammi e trascinali su un GameObject perché Unity generi automaticamente un Animation Clip.

Per un foglio reimpacchettato, usa Sprite Mode Multiple e Sprite Editor. Grid By Cell Size funziona solo se il foglio reimpacchettato è davvero uniforme: proprio ciò che l’impacchettamento fornisce e ciò che mancava al foglio IA originale.

Godot

In Godot 4, aggiungi un AnimatedSprite2D, crea un nuovo SpriteFrames risorsa e usa Add Frames from Sprite Sheet per un foglio uniforme oppure Add Frames from File(s) per caricare direttamente i PNG singoli. I fotogrammi separati sono il percorso più semplice qui perché l’importatore di fogli di sprite si aspetta celle uniformi. Per la pixel art, imposta il filtro della texture su Nearest, per nodo sotto CanvasItem → Texture → Filter oppure globalmente tramite il rendering/textures/canvas_textures/default_texture_filter impostazione del progetto.

Ancoraggio e allineamento

È il passaggio che le persone saltano, per poi passare un pomeriggio a cercare il problema. Se hai rifilato ogni fotogramma al proprio riquadro di delimitazione, i fotogrammi hanno ora dimensioni diverse e il motore li centrerà tutti sulla stessa origine. Un personaggio che estende il braccio nel secondo fotogramma sembrerà scivolare indietro, perché la larghezza aggiuntiva sposta il centro visivo.

La soluzione è riportare ogni fotogramma a una dimensione comune, posizionando il contenuto coerentemente, di solito centrato orizzontalmente e allineato in basso per piedi stabili. Scegli dal maggiore, arrotonda a un numero comodo e completa gli altri con trasparenza. Rifilare e aggiungere margini non è circolare: elimina margini arbitrari del generatore e applica quelli controllati.

Risoluzione dei problemi

Il rilevamento ha trovato troppe parti

La sensibilità è troppo alta oppure gli sprite hanno elementi staccati. Abbassala affinché piccoli spazi interni non siano interpretati come separazioni. Se non aiuta, usa linee manuali: una scansione alfa vede sempre due sprite in un personaggio con un oggetto separato.

Il rilevamento ha trovato troppo poche parti

Gli sprite si toccano oppure un bagliore tenue unisce lo spazio. Aumenta prima la sensibilità. Se si sovrappongono davvero, nessun metodo automatico li separa: rigenera chiedendo spazio libero tra fotogrammi oppure taglia a mano.

1. Sensibilità troppo bassa: pochi confini trovati

2. Otto file quando ne erano previsti venti

3. Perché: nessuna colonna vuota tra loro

4. Sensibilità aumentata: quattro file

I fotogrammi hanno un contorno tenue del vecchio sfondo

La rimozione dello sfondo ha lasciato pixel semitrasparenti sui bordi tinti del vecchio colore di sfondo. Consulta la nostra guida su PNG trasparenti e bordi bianchi per le soluzioni.

L’animazione tremola nel motore

Quasi sempre è un problema di ancoraggio, non di ritaglio. Verifica che ogni fotogramma abbia le stesse dimensioni e la stessa convenzione di allineamento e controlla il pivot dello sprite nel motore.

Nulla funziona, il foglio è un disastro

Rigenerare costa poco. Prompt che migliorano affidabilmente il risultato: chiedi esplicitamente trasparenza, spaziatura uniforme e dimensioni coerenti del personaggio, meno fotogrammi per foglio (3x3 è molto più probabile che sia utilizzabile rispetto a 6x6) e pose separate se l’animazione conta più della comodità.

Domande frequenti