Uno shader pixel art 3D per Godot 4

Due modi per avere pixel art in un gioco 3D

Ci sono due modi comuni per far sembrare pixel art un gioco Godot. Il primo è il bake: renderizzare ogni personaggio da ogni lato in uno sprite sheet e riprodurlo su un AnimatedSprite2D. Il secondo è disegnare la scena 3D stessa a bassa risoluzione, con uno shader che divide la luce in bande, limita i colori e disegna i contorni, per poi ingrandirla con filtro nearest. Le ricerche per “3D pixel art shader Godot” e “Godot 4 post processing pixel art” riguardano il secondo.

Ognuno ha il suo posto. Gli sheet precalcolati danno controllo artigianale e ritocchi, e non costano nulla da disegnare. Il tempo reale gestisce ciò che nessuno sheet può contenere: un livello in cui si muove la camera, un'auto che gira in qualsiasi direzione, una scena in cui tutto si muove insieme. Il problema è che i due raramente coincidono: gli sprite escono da una pipeline, il livello da uno shader scritto a parte, e contorni, colori e luce non vanno d'accordo.

pxr shader risolve il problema scrivendo shader Godot dallo stesso Stile con cui vengono cotti gli sprite.

Scrivere gli shader

Puntalo su un modello e un look, o su un progetto, e su una cartella dentro il tuo progetto Godot:

pxr shader knight.glb --preset selout --size 64 -o my-game/pixor
pxr shader game.pixor -o my-game/pixor --res res://pixor

-o è la cartella sul disco; --res è la stessa cartella come la vede Godot, un percorso res://, quando non è res:// seguito dal nome della cartella. La cartella contiene cinque file:

File	Cosa fa
pixor_look.gdshader	Il materiale. Ogni pixel prende la rampa del proprio colore, il gradino della propria banda di luce e il riflesso, come farebbe uno sprite precalcolato, nei colori della palette. Non è ombreggiato: il look è la luce.
pixor_lines.gdshader	Le linee, un passaggio a schermo: la silhouette sui pixel vuoti attorno a un modello e le linee interne dove una superficie sta davanti a un’altra, nei colori di linea dello Stile.
pixor_view.tscn	La griglia di pixel: un viewport alla dimensione dello sprite, ingrandito quattro volte con filtro nearest, con la camera di Pixor e le linee al suo interno.
pixor_look.gd	PixorLook.apply($Level) dà il look a ogni mesh sotto un nodo, mantenendo colore e texture di ciascun materiale.
pixor_shader.json	La dimensione, la scala, la palette e ciò che dello Stile gli shader non includono.

Mettilo nella tua scena

1. Copia la cartella nel progetto Godot, oppure scrivila direttamente lì con -o.
2. Aggiungi pixor_view.tscn alla scena principale. Disegna il mondo 3D in cui si trova attraverso la griglia di pixel, con il passaggio dei contorni.
3. Dai il look alle tue mesh. Da uno script, PixorLook.apply($Level) imposta il materiale su ogni mesh sotto il nodo. A mano, applica pixor_look.gdshader al materiale di una mesh.

Non serve impostare altro: le bande di luce, le rampe, la palette e i colori delle linee sono scritti negli shader. Per cambiare il look, cambialo in Pixor ed esegui di nuovo pxr shader.

--view-scale imposta in quanti pixel dello schermo si trasforma ogni pixel dell'immagine (4 per impostazione predefinita). Tienilo un numero intero, come per qualsiasi pixel art; la guida alle dimensioni degli sprite ne spiega il motivo.

Cosa lascia fuori il tempo reale

In tempo reale il fotogramma viene disegnato come quello precalcolato, con tre differenze:

• Niente ombre proiettate. Le superfici sono illuminate e divise in bande, ma un oggetto non fa ombra a un altro.
• Niente linee tra le parti senza salto di profondità. Due parti che si toccano, come una manica su un braccio, ricevono una linea solo dove una sta davanti all'altra.
• Niente passaggi sull'intero fotogramma. I passaggi che leggono l'intero fotogramma o confrontano più fotogrammi, come le pulizie e gli atomi disegnati a mano contrassegnati così, funzionano solo durante il bake.

Ogni nodo dello Stile dice se funziona in tempo reale: pxr nodes --graph style stampa “in real time: yes” o “not yet” sotto ciascuno. Uno Stile il cui grafo ha un nodo che non può funzionare in tempo reale viene rifiutato, e l'errore nomina il nodo. Aggiungi --partial per scrivere comunque lo shader delle sue impostazioni, senza quel nodo.

Usali entrambi

L'impostazione più efficace usa entrambe le metà. Cuoci in sheet i personaggi, che richiedono ritocchi a mano, molti fotogrammi e silhouette esatte (Pixor per Godot spiega i SpriteFrames e la scena già collegata). Disegna il mondo, i veicoli e tutto ciò che è troppo grande o troppo libero da cuocere con pxr shader. Poiché entrambi nascono da uno stesso Stile, condividono rampe, bande e palette, e il giocatore vede un solo gioco, non due.

Per uno sprite che deve invece reagire alla luce in una scena 2D, il light kit (--export light-kit) illumina gli sprite precalcolati dalle loro normal map in Godot, Unity o GameMaker mentre ogni pixel illuminato resta sulla propria rampa; vedi illuminazione fedele alla palette. La sezione del manuale sugli shader in tempo reale elenca ogni opzione.