Dal 3D alla pixel art: la guida completa

Disegnare a mano un personaggio in otto direzioni, con cicli di camminata, corsa, attacco e morte, significa moltissimi fotogrammi. Per un piccolo team può essere il costo artistico più grande di un gioco. Renderizzare quei fotogrammi da un modello 3D è una vecchia risposta a questo problema. Questa guida spiega da dove viene l’idea, perché funziona, cosa va storto e come ottenere sprite che sembrano pixel art e non un render rimpicciolito.

Breve storia degli sprite pre-renderizzati

Nel 1994 Rare pubblicò Donkey Kong Country per Super Nintendo. I suoi personaggi e scenari furono modellati e renderizzati su workstation Silicon Graphics, poi ridotti ai piccoli sprite e ai colori limitati della console. Non somigliava a nient’altro sul sistema, e dimostrò che una pipeline 3D poteva alimentare un gioco 2D.

Verso la fine degli anni Novanta gli sprite pre-renderizzati divennero comuni su PC. Diablo (1996), Fallout e Fallout 2, StarCraft e Age of Empires usavano tutti unità e personaggi renderizzati dal 3D, spesso in molte direzioni, perché un modello si può ruotare gratis mentre un disegno no.

La tecnica è tornata in un’altra forma con Dead Cells (2018). Motion Twin ha animato i suoi personaggi in 3D e li ha renderizzati come piccoli fotogrammi in pixel art, descrivendo il processo nell’articolo di Gamasutra (oggi Game Developer) del 2018 “Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells”. Lo scopo era lo stesso del 1994: un piccolo team che ottiene un’animazione fluida e coerente senza disegnare ogni fotogramma.

Puoi leggerne di più in Sprite pre-renderizzati.

Perché renderizzare dal 3D

Tre ragioni tornano di continuo.

• Ogni direzione. Una volta che un modello esiste, un nuovo lato è solo un’altra camera. Quattro, otto o sedici direzioni costano lo stesso sforzo di impostazione.
• Animazione coerente. Le proporzioni del personaggio restano le stesse in ogni fotogramma e da ogni lato. Gli sprite disegnati a mano derivano; uno scheletro no.
• I cambiamenti costano poco. Cambia il colore dell’armatura, la dimensione dello sprite o la palette e renderizza di nuovo. Con sheet disegnati a mano, un cambiamento dell’ultimo minuto significa ridipingere centinaia di fotogrammi.

Il prezzo è che un render normale non sembra pixel art. Rimpicciolisci un render con ombreggiatura morbida e ottieni bordi sfumati, gradienti fangosi, centinaia di colori quasi identici e pixel che sfarfallano da un fotogramma all’altro. Il resto di questa guida parla di come colmare questo divario.

Cosa lo fa sembrare pixel art

La pixel art riguarda meno la bassa risoluzione e più il controllo. Ogni pixel è una decisione. Un render prende milioni di piccole decisioni che non hai chiesto, quindi il lavoro è riprenderti quelle decisioni.

Una sola scala di pixel

Tutto nel gioco dovrebbe condividere una sola dimensione di pixel. Se un albero è disegnato a una scala e un personaggio con il doppio del dettaglio, la discrepanza salta all’occhio. I pixel artist chiamano le dimensioni di pixel miste mixel. In una pipeline 3D la soluzione è un’unica scala in pixel per metro: un cavaliere di due metri è sempre alto lo stesso numero di pixel, e una cassa accanto a lui è in proporzione. In Pixor, per questo motivo, imposta un valore fisso di Pixel/m sulle camere: per impostazione predefinita ogni camera adatta il suo sprite alla propria dimensione.

Un pivot fisso

Se i piedi del personaggio atterrano su un pixel diverso a ogni fotogramma, lo sprite trema nel gioco anche quando l’animazione è buona. Il pivot, di solito tra i piedi, dovrebbe stare sullo stesso pixel in ogni fotogramma e in ogni lato. Pixor blocca il pivot su un pixel in tutti i fotogrammi e lati.

Palette limitate e rampe

Gli sprite fatti a mano usano pochi colori, disposti in rampe: una breve sequenza dallo scuro al chiaro per ogni materiale. Pochi colori fanno leggere chiaramente le forme a piccole dimensioni. Un render va ridotto a una palette, non solo a meno colori scelti a caso.

Spostamento di tinta

Le buone rampe non diventano solo più scure; cambiano tinta man mano, di solito più fredde nell’ombra e più calde nella luce. Questo è lo spostamento di tinta, ed è gran parte di ciò che fa sembrare la pixel art dipinta invece che ingrigita.

Contorni selettivi e linee pulite

Una linea nera attorno a tutto va bene per alcuni stili, ma molti artisti colorano il contorno in base alla forma che racchiude, più scuro sul lato in ombra e più chiaro o assente sul lato illuminato. Questo è il selout. Le linee dovrebbero essere larghe un pixel, senza angoli a “L” doppi, e le parti sottili come lame di spada e bastoni dovrebbero restare linee pulite di un pixel invece di spezzarsi. Altro in Contorni.

Nessun pixel isolato e nessuno sfarfallio

I pixel solitari che non appartengono a nessuna forma sembrano rumore. Nell’animazione, il problema peggiore è lo sfarfallio: un pixel o una linea che compare per un fotogramma e sparisce in quello dopo. Un render li produce entrambi di continuo, perché piccoli cambiamenti nel modello spingono i valori appena sopra o sotto una soglia.

Niente dithering per sbaglio

Il dithering può essere uno stile voluto. Se lo usi, il motivo deve restare fisso sulla superficie mentre il modello si muove, non strisciarci sopra come una zanzariera.

La pipeline, passo per passo

Ecco la catena consueta, e dove si inserisce Pixor in ogni passo.

1. Il modello

Va bene qualsiasi modello, con rig o statico. Pixor legge glTF e GLB, FBX (compresi i download da Mixamo), OBJ e i file .vox di MagicaVoxel. Modelli più semplici con forme chiare e materiali distinti danno sprite migliori di quelli molto dettagliati; i dettagli più piccoli di un pixel andranno comunque persi.

2. Una camera per lato

Ogni direzione è una camera che guarda il modello. Gli scorrimenti laterali ne vogliono una; i giochi dall’alto e isometrici usano anelli da 4 o 8. L’inclinazione conta quanto la direzione: una vista laterale, una di tre quarti, una vista isometrica 2:1 e una dall’alto si adattano a giochi diversi. In Pixor ogni lato è una camera, in anelli da 4, 8 o 16 o a qualsiasi angolo tu scelga.

3. Il G-buffer

Invece di renderizzare subito un’immagine finita, renderizza le informazioni che ti servono: il colore piatto di ogni pixel, la direzione in cui guarda la sua superficie (normali), la sua distanza dalla camera (profondità) e a quale parte o materiale appartiene. Si chiama G-buffer. Ogni passo successivo lavora a partire da questo, ed è ciò che rende controllabile il resto. Le immagini in cima a questa pagina mostrano il colore, le normali e la profondità di uno scrigno, e lo sprite finito.

4. Luce a bande

Lo shading morbido diventa poche bande piatte: luce, tono medio, ombra. La pixel art ne usa di solito da due a quattro. La parte difficile è mantenere stabili le bande quando il modello si muove, così il bordo di una banda non salta avanti e indietro su una superficie che ha appena girato. Pixor ombreggia in 1–4 bande e tiene una banda finché la superficie non ha chiaramente girato.

5. Linee

Da profondità, normali e id delle parti puoi trovare la silhouette, gli spigoli interni tra le parti e le pieghe dove una superficie si piega. Ognuno può essere disegnato in modo diverso: scuro, colorato o per niente. Pixor tratta le linee di silhouette, interne e di piega come tipi separati, ognuno con la sua impostazione di contorno selettivo, le disegna larghe un pixel senza angoli a L, e mantiene le parti sottili come linee di un pixel.

6. Palette

Ogni banda di ogni materiale viene associata a un colore in una rampa. Puoi lasciare che lo strumento costruisca le rampe dai colori del modello o imporre una palette fissa condivisa da tutto il gioco. Pixor costruisce rampe con spostamento di tinta per materiale, e può usare una palette automatica, una delle sette integrate, un file Lospec .hex o GIMP .gpl, o una palette presa da un’immagine. Scrive PNG indicizzati e ha modalità console per i limiti di colore di Game Boy, NES, PICO-8, TIC-80 e C64.

7. Pulizia

L’ultimo passaggio rimuove i pixel singoli isolati e le linee che compaiono per un solo fotogramma. È la differenza tra uno sheet che sembra fatto a mano e uno che sembra un video. Pixor esegue questa pulizia come stadio a sé.

8. Lo sheet

I fotogrammi sono impacchettati in uno sheet, di solito una riga per azione e lato, con dati che dicono al motore dove si trova ogni fotogramma.

In Pixor ognuna di queste fasi è un nodo nel grafo di Stile, così puoi vederle e cambiarle tutte. Un look che ti piace si può salvare come kit e riusare in tutto un progetto. I preset integrati (clean, selout, retro4, flat e wireframe) sono punti di partenza.

Scegliere dimensioni e direzioni

La dimensione è prima di tutto una scelta di design. Uno sprite più piccolo si legge meglio in mezzo alla folla e costa meno da ritoccare; uno più grande mostra più personalità. Come indicazione di massima:

• 16 px va bene per tile, oggetti e personaggi molto piccoli.
• 32 px è un'altezza comune dei personaggi nei giochi con vista dall'alto e nei platform.
• Da 48 a 64 px c'è spazio per volti, equipaggiamento e animazioni espressive.

Scegli una scala in pixel per metro che dia al tuo personaggio principale l’altezza che vuoi, poi lascia che tutto il resto segua. Mostra il gioco a multipli interi (2×, 3×, 4×) così ogni pixel dell’arte diventa un quadrato pulito sullo schermo. Dimensioni degli sprite approfondisce l’argomento.

Per le direzioni: un lato per gli scorrimenti laterali (specchialo per l’altro verso), quattro per i giochi semplici dall’alto, otto per la maggior parte dei giochi d’azione e di strategia, sedici per le cose che girano in modo fluido, come i veicoli.

Animazione

Un'animazione 3D ha una posa per ogni istante. L'animazione in pixel art ha una manciata di fotogrammi, e i fotogrammi sono scelti, non campionati a intervalli regolari.

Estremi della posa e tenute

I fotogrammi che contano di più sono gli estremi: la posa di contatto di una camminata, l’apice di un salto, il momento in cui una spada colpisce. Una buona animazione di sprite tiene quelli e li fa durare un po’ di più, e scarta gli intermedi che a piccole dimensioni non aggiungono nulla. I fotogrammi equidistanti tendono a sembrare fluttuanti. I fotogrammi intelligenti di Pixor scelgono gli estremi delle pose e li tengono.

Meno fotogrammi, fotogrammi più puliti

Una camminata di sei o otto fotogrammi è più che sufficiente a 32 pixel. Più fotogrammi significano più occasioni di sfarfallio e più lavoro di ritocco. Pixor misura lo sfarfallio lungo un'animazione.

Ottenere l’animazione

Puoi animare il modello da te, usare le clip con cui è arrivato (o in file di clip separati), o reindirizzare clip da un altro rig. Pixor ha anche una libreria di movimenti di azioni semplici (idle, camminata, corsa, salto, attacco, colpo subito, morte) e movimenti d’oggetto (rotazione, oscillazione, dondolio, pulsazione) per oggetti di scena e raccoglibili.

Ritoccare a mano

Un render ti dà fotogrammi coerenti. Non ti dà il giudizio di un artista. La maggior parte dei buoni risultati viene dal renderizzare una base pulita e poi sistemare i fotogrammi che contano: un volto più chiaro, una sagoma più forte nel fotogramma d'attacco, una luce alta sulla lama.

Aseprite è lo strumento abituale per questo. Pixor esporta file .aseprite con un tag per ogni azione e lato. Quando cambi il modello o le impostazioni e renderizzi di nuovo, i livelli dipinti a mano restano sui loro fotogrammi, così i ritocchi non vengono buttati via da un nuovo bake. Vedi Aseprite.

Esportare verso i motori di gioco

I motori vogliono fotogrammi più metadati. Destinazioni comuni:

• Sprite sheet in PNG con un file JSON che elenca fotogrammi, azioni e lati.
• SpriteFrames di Godot per i progetti Godot.
• GIF o APNG per anteprime, pagine dello store e post sui social.
• Normal map e mappe di profondità se il tuo engine illumina gli sprite 2D.

Pixor li esporta tutti. Poiché il rendering è deterministico, lo stesso modello e le stesse impostazioni danno sempre gli stessi pixel, quindi gli sheet si possono ricostruire in qualsiasi momento senza sorprese. Vedi Esportazioni e il manuale dell’esportazione.

Provalo

Pixor è un’app desktop per Windows e Linux che fa ogni passo descritto sopra, offline e senza account. Non contiene IA generativa: renderizza il tuo modello con le impostazioni che scegli. Costa $19.99 una volta, con ogni aggiornamento gratuito. Parti da Come funziona, sfoglia la libreria per vedere sprite renderizzati in questo modo, o leggi il manuale per vedere ogni impostazione.