Ein 3D-Pixel-Art-Shader für Godot 4

Zwei Wege zu Pixel Art in einem 3D-Spiel

Es gibt zwei gängige Wege, ein Godot-Spiel wie Pixel Art aussehen zu lassen. Der erste ist das Backen: jede Figur von allen Seiten in ein Sprite-Sheet rendern und auf einem AnimatedSprite2D abspielen. Der zweite ist, die 3D-Szene selbst in niedriger Auflösung zu zeichnen, durch einen Shader, der das Licht in Bänder teilt, die Farben begrenzt und Outlines zeichnet, und sie dann mit Nearest-Filterung hochzuskalieren. Suchen nach „3D pixel art shader Godot“ und „Godot 4 post processing pixel art“ drehen sich um den zweiten.

Beide haben ihren Platz. Gebackene Sheets geben dir handgemachte Kontrolle und Nachbearbeitung und kosten nichts beim Zeichnen. Echtzeit bewältigt, was kein Sheet fassen kann: ein Level, durch das sich die Kamera bewegt, ein Auto, das sich in jeden Winkel dreht, eine Szene, in der sich alles gleichzeitig bewegt. Das Problem ist, dass beide selten zusammenpassen: Die Sprites kommen aus einer Pipeline, das Level aus einem separat geschriebenen Shader, und Outlines, Farben und Licht stimmen nicht überein.

pxr shader löst das, indem es Godot-Shader aus demselben Style schreibt, mit dem die Sprites gebacken werden.

Die Shader schreiben

Richte es auf ein Modell und einen Look oder auf ein Projekt und auf einen Ordner in deinem Godot-Projekt:

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

-o ist der Ordner auf der Festplatte; --res ist derselbe Ordner, wie Godot ihn sieht, ein res://-Pfad, wenn er nicht res:// gefolgt vom Namen des Ordners ist. Der Ordner enthält fünf Dateien:

Datei	Was sie tut
pixor_look.gdshader	Das Material. Jedes Pixel nimmt die Rampe seiner Farbe, die Stufe seines Lichtbands und das Highlight, wie bei einem gebackenen Sprite, in den eigenen Farben der Palette. Es ist ungeshadet: Der Look ist das Licht.
pixor_lines.gdshader	Die Linien, ein Screen-Pass: die Silhouette auf den leeren Pixeln um ein Modell und Innenlinien dort, wo eine Fläche vor einer anderen steht, in den Linienfarben des Styles.
pixor_view.tscn	Das Pixelraster: ein Viewport in der Größe des Sprites, vierfach mit Nearest-Filterung hochskaliert, mit der Kamera von Pixor und den Linien darin.
pixor_look.gd	PixorLook.apply($Level) gibt jedem Mesh unter einem Node den Look und behält dabei Farbe und Textur jedes Materials.
pixor_shader.json	Die Größe, der Maßstab, die Palette und was die Shader vom Style auslassen.

In deine Szene einbauen

1. Kopiere den Ordner in das Godot-Projekt oder schreibe ihn mit -o direkt dorthin.
2. Füge pixor_view.tscn zu deiner Hauptszene hinzu. Es zeichnet die 3D-Welt, in der es steht, durch das Pixelraster, mit dem Outline-Pass.
3. Gib deinen Meshes den Look. Aus einem Skript setzt PixorLook.apply($Level) das Material auf jedes Mesh unter dem Node. Von Hand legst du pixor_look.gdshader auf das Material eines Meshes.

Sonst muss nichts eingestellt werden: Die Lichtbänder, die Rampen, die Palette und die Linienfarben sind in die Shader geschrieben. Um den Look zu ändern, ändere ihn in Pixor und führe pxr shader erneut aus.

--view-scale legt fest, wie viele Bildschirmpixel jedes Art-Pixel wird (standardmäßig 4). Halte es ganzzahlig, wie bei jeder Pixel Art; der Leitfaden zu Sprite-Größen erklärt warum.

Was Echtzeit auslässt

In Echtzeit wird der Frame so gezeichnet wie ein gebackener, mit drei Unterschieden:

• Keine Schattenwürfe. Flächen werden beleuchtet und in Bänder geteilt, aber ein Objekt wirft keinen Schatten auf ein anderes.
• Keine Teilelinien ohne Tiefenstufe. Zwei Teile, die sich berühren, etwa ein Ärmel an einem Arm, bekommen nur dort eine Linie, wo eines vor dem anderen steht.
• Keine Schritte über den ganzen Frame. Schritte, die den ganzen Frame lesen oder Frames vergleichen, etwa die Bereinigungen und die so markierten handgezeichneten Atome, laufen nur beim Backen.

Jeder Style-Node sagt, ob er in Echtzeit läuft: pxr nodes --graph style gibt unter jedem „in real time: yes“ oder „not yet“ aus. Ein Style, dessen Graph einen Node enthält, der nicht in Echtzeit laufen kann, wird abgelehnt, und der Fehler nennt den Node. Mit --partial schreibst du trotzdem den Shader seiner Einstellungen, ohne diesen Node.

Beides nutzen

Am stärksten ist das Setup, das beide Hälften nutzt. Backe die Figuren, die Nachbearbeitung, viele Frames und exakte Silhouetten brauchen, in Sheets (Pixor für Godot behandelt die SpriteFrames und die fertig verdrahtete Szene). Zeichne die Welt, die Fahrzeuge und alles, was zu groß oder zu frei zum Backen ist, über pxr shader. Weil beides aus einem Style kommt, teilen sie Rampen, Bänder und die Palette, und der Spieler sieht ein Spiel, nicht zwei.

Für einen Sprite, der stattdessen in einer 2D-Szene auf Licht reagieren soll, beleuchtet das Licht-Kit (--export light-kit) gebackene Sprites aus ihren Normal Maps in Godot, Unity oder GameMaker, während jedes beleuchtete Pixel auf seiner eigenen Rampe bleibt; siehe palettenkorrektes Licht. Der Abschnitt des Handbuchs zu den Echtzeit-Shadern nennt jede Option.