Un shader pixel art 3D pour Godot 4

Deux façons d’avoir du pixel art dans un jeu 3D

Il y a deux façons courantes de donner à un jeu Godot l’aspect du pixel art. La première est de pré-rendre : rendre chaque personnage sous tous les côtés dans une planche de sprites et la jouer sur un AnimatedSprite2D. La seconde est de dessiner la scène 3D elle-même à basse résolution, avec un shader qui découpe la lumière en bandes, limite les couleurs et trace des contours, puis de l’agrandir avec un filtrage au plus proche voisin. Les recherches « 3D pixel art shader Godot » et « Godot 4 post processing pixel art » portent sur la seconde.

Chacune a sa place. Les planches pré-rendues donnent un contrôle fait main et des retouches, et ne coûtent rien à dessiner. Le temps réel gère ce qu’aucune planche ne peut contenir : un niveau que la caméra parcourt, une voiture qui tourne sous n’importe quel angle, une scène où tout bouge à la fois. Le problème, c’est que les deux se ressemblent rarement : les sprites sortent d’un pipeline, le niveau d’un shader écrit à part, et les contours, les couleurs et la lumière ne s’accordent pas.

pxr shader règle cela en écrivant des shaders Godot à partir du même Style que celui avec lequel les sprites sont pré-rendus.

Écrire les shaders

Indiquez un modèle et un style, ou un projet, et un dossier dans votre projet 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 est le dossier sur le disque ; --res est le même dossier tel que Godot le voit, un chemin res://, quand ce n’est pas res:// suivi du nom du dossier. Le dossier reçoit cinq fichiers :

Fichier	Ce qu’il fait
pixor_look.gdshader	Le matériau. Chaque pixel prend la rampe de sa couleur, le palier de sa bande de lumière et le reflet, comme un sprite pré-rendu, dans les propres couleurs de la palette. Il est sans ombrage : le style, c’est la lumière.
pixor_lines.gdshader	Les lignes, une passe d’écran : la silhouette sur les pixels vides autour d’un modèle, et des lignes intérieures là où une surface se trouve devant une autre, dans les couleurs de ligne du Style.
pixor_view.tscn	La grille de pixels : un viewport à la taille du sprite, agrandi quatre fois avec un filtrage au plus proche voisin, avec la caméra de Pixor et les lignes dedans.
pixor_look.gd	PixorLook.apply($Level) donne le style à chaque mesh sous un nœud, en gardant la couleur et la texture de chaque matériau.
pixor_shader.json	La taille, l’échelle, la palette, et ce que les shaders omettent du Style.

Mettre en place dans votre scène

1. Copiez le dossier dans le projet Godot, ou écrivez-le directement là avec -o.
2. Ajoutez pixor_view.tscn à votre scène principale. Elle dessine le monde 3D dans lequel elle se trouve à travers la grille de pixels, avec la passe de contours.
3. Donnez le style à vos meshes. Depuis un script, PixorLook.apply($Level) applique le matériau à chaque mesh sous le nœud. À la main, placez pixor_look.gdshader sur le matériau d’un mesh.

Rien d’autre à régler : les bandes de lumière, les rampes, la palette et les couleurs de ligne sont écrites dans les shaders. Pour changer le style, changez-le dans Pixor et relancez pxr shader.

--view-scale règle combien de pixels d’écran devient chaque pixel d’art (4 par défaut). Gardez un nombre entier, comme pour tout pixel art ; le guide des tailles de sprite explique pourquoi.

Ce que le temps réel laisse de côté

En temps réel, l’image est dessinée comme une image pré-rendue, avec trois différences :

• Pas d’ombres portées. Les surfaces sont éclairées et découpées en bandes, mais un objet ne fait pas d’ombre sur un autre.
• Pas de lignes entre parties sans écart de profondeur. Deux parties qui se touchent, comme une manche sur un bras, n’ont une ligne que là où l’une passe devant l’autre.
• Pas d’étapes sur l’image entière. Les étapes qui lisent toute l’image ou comparent des images, comme les nettoyages et les atomes dessinés à la main marqués ainsi, ne s’exécutent qu’au pré-rendu.

Chaque nœud Style indique s’il s’exécute en temps réel : pxr nodes --graph style affiche « in real time: yes » ou « not yet » sous chacun. Un Style dont le graphe contient un nœud qui ne peut pas s’exécuter en temps réel est refusé, et l’erreur nomme le nœud. Ajoutez --partial pour écrire quand même le shader de ses réglages, sans ce nœud.

Utiliser les deux

Le meilleur montage utilise les deux moitiés. Pré-rendez dans des planches les personnages, qui demandent des retouches à la main, beaucoup d’images et des silhouettes exactes (Pixor pour Godot couvre les SpriteFrames et la scène prête à l’emploi). Dessinez le monde, les véhicules et tout ce qui est trop grand ou trop libre pour être pré-rendu avec pxr shader. Comme les deux viennent d’un même Style, ils partagent rampes, bandes et palette, et le joueur voit un seul jeu, pas deux.

Pour un sprite qui doit plutôt réagir à la lumière dans une scène 2D, le kit de lumière (--export light-kit) éclaire les sprites pré-rendus à partir de leurs normal maps dans Godot, Unity ou GameMaker, tout en gardant chaque pixel éclairé sur sa propre rampe ; voir l’éclairage fidèle à la palette. La section du manuel sur les shaders temps réel détaille toutes les options.