3D zu Pixel Art: der komplette Leitfaden

Eine Figur von Hand in acht Richtungen zu zeichnen, mit Lauf-, Renn-, Angriffs- und Todeszyklen, sind eine Menge Frames. Für ein kleines Team kann das der größte einzelne Art-Kostenpunkt eines Spiels sein. Diese Frames aus einem 3D-Modell zu rendern, ist eine alte Antwort auf dieses Problem. Dieser Guide erzählt, woher die Idee kam, warum sie funktioniert, was schiefgeht und wie du Sprites bekommst, die nach Pixel-Art aussehen statt nach einem geschrumpften Render.

Eine kurze Geschichte vorgerenderter Sprites

1994 brachte Rare Donkey Kong Country für das Super Nintendo heraus. Figuren und Kulissen wurden auf Silicon-Graphics-Workstations modelliert und gerendert, dann auf die kleinen Sprites und begrenzten Farben der Konsole reduziert. Es sah aus wie nichts anderes auf dem System und zeigte, dass eine 3D-Pipeline ein 2D-Spiel speisen konnte.

Ende der Neunziger wurden vorgerenderte Sprites auf dem PC üblich. Diablo (1996), Fallout und Fallout 2, StarCraft und Age of Empires nutzten alle aus 3D gerenderte Einheiten und Figuren, oft in vielen Richtungen, denn ein Modell lässt sich kostenlos drehen, eine Zeichnung nicht.

Die Technik kehrte in anderer Form mit Dead Cells (2018) zurück. Motion Twin animierte seine Figuren in 3D, renderte sie als kleine Pixel-Art-Frames und beschrieb den Ablauf 2018 im Gamasutra-Artikel (heute Game Developer) „Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells“. Es ging um dasselbe wie 1994: ein kleines Team, das flüssige, stimmige Animation bekommt, ohne jeden Frame zu zeichnen.

Mehr dazu unter Vorgerenderte Sprites.

Warum aus 3D rendern

Drei Gründe tauchen immer wieder auf.

• Jede Richtung. Sobald es ein Modell gibt, ist eine neue Seite nur eine weitere Kamera. Vier, acht oder sechzehn Richtungen kosten denselben Aufwand beim Einrichten.
• Konsistente Animation. Die Proportionen der Figur bleiben in jedem Frame und auf jeder Seite gleich. Handgezeichnete Sprites driften ab; ein Skelett nicht.
• Änderungen sind billig. Ändere die Rüstungsfarbe, die Sprite-Größe oder die Palette und rendere neu. Bei handgezeichneten Sheets heißt eine späte Änderung, Hunderte Frames neu zu malen.

Der Preis dafür: Ein schlichter Render sieht nicht nach Pixel-Art aus. Verkleinere einen Render mit weicher Schattierung, und du bekommst weiche Kanten, matschige Verläufe, Hunderte fast gleicher Farben und Pixel, die von Frame zu Frame flackern. Der Rest dieses Leitfadens handelt davon, diese Lücke zu schließen.

Was es nach Pixel-Art aussehen lässt

Bei Pixel-Art geht es weniger um niedrige Auflösung als um Kontrolle. Jedes Pixel ist eine Entscheidung. Ein Render trifft Millionen winziger Entscheidungen, um die du nicht gebeten hast, also besteht die Arbeit darin, dir diese Entscheidungen zurückzuholen.

Ein Pixelmaßstab

Alles im Spiel sollte eine Pixelgröße teilen. Ist ein Baum in einem Maßstab gezeichnet und eine Figur mit doppelter Detailtiefe, fällt der Unterschied sofort auf. Pixel-Artists nennen gemischte Pixelgrößen Mixels. In einer 3D-Pipeline ist die Lösung ein einziger Maßstab in Pixeln pro Meter: Ein zwei Meter großer Ritter ist immer gleich viele Pixel hoch, und eine Kiste neben ihm stimmt im Verhältnis. Setz in Pixor deshalb einen festen Wert für Pixel/m an den Kameras: Standardmäßig passt jede Kamera ihr Sprite an ihre eigene Größe an.

Ein fester Pivot

Landen die Füße der Figur in jedem Frame auf einem anderen Pixel, zittert das Sprite im Spiel, selbst wenn die Animation gut ist. Der Pivot, meist zwischen den Füßen, sollte in jedem Frame und auf jeder Seite auf demselben Pixel sitzen. Pixor fixiert den Pivot über alle Frames und Seiten auf ein Pixel.

Begrenzte Paletten und Rampen

Handgemachte Sprites nutzen wenige Farben, angeordnet in Rampen: eine kurze Folge von dunkel nach hell für jedes Material. Wenige Farben lassen Formen in kleinen Größen klar lesbar werden. Ein Render muss auf eine Palette reduziert werden, nicht bloß auf weniger, zufällig gewählte Farben.

Farbtonverschiebung

Gute Rampen werden nicht nur dunkler; sie ändern unterwegs den Farbton, meist kühler im Schatten und wärmer im Licht. Das ist Farbtonverschiebung, und sie trägt viel dazu bei, dass Pixel-Art gemalt statt ausgegraut aussieht.

Selektive Konturen und saubere Linien

Eine schwarze Linie um alles passt zu manchen Stilen, aber viele Artists färben die Kontur nach der Form, die sie umgibt: dunkler auf der Schattenseite und heller oder gar nicht auf der beleuchteten Seite. Das ist Selout. Linien sollten ein Pixel breit sein, ohne doppelte „L“-Ecken, und dünne Teile wie Schwertklingen und Stäbe sollten saubere Ein-Pixel-Linien bleiben, statt zu zerfallen. Mehr unter Konturen.

Keine Einzelpixel und kein Flackern

Einsame Pixel, die zu keiner Form gehören, wirken wie Rauschen. In der Animation ist das größere Problem Flackern: ein Pixel oder eine Linie, die einen Frame lang auftaucht und im nächsten verschwindet. Ein Render erzeugt beides ständig, weil winzige Änderungen am Modell Werte knapp über oder unter einen Schwellwert schieben.

Kein versehentliches Dithering

Dithering kann ein bewusster Stil sein. Wenn es genutzt wird, sollte das Muster auf der Oberfläche bleiben, während sich das Modell bewegt, und nicht wie eine Fliegengittertür darüber kriechen.

Die Pipeline, Schritt für Schritt

Hier ist die übliche Kette und wo Pixor in jedem Schritt passt.

1. Das Modell

Jedes geriggte oder statische Modell eignet sich. Pixor liest glTF und GLB, FBX (einschließlich Mixamo-Downloads), OBJ und MagicaVoxel-.vox-Dateien. Einfachere Modelle mit klaren Formen und eindeutigen Materialien ergeben bessere Sprites als sehr detaillierte; Details kleiner als ein Pixel gehen ohnehin verloren.

2. Eine Kamera pro Seite

Jede Richtung ist eine Kamera, die auf das Modell schaut. Side-Scroller brauchen eine; Spiele in Draufsicht und isometrische Spiele nutzen Kränze aus 4 oder 8. Die Neigung zählt so viel wie die Richtung: Seitenansicht, Dreiviertelansicht, 2:1-isometrische Ansicht und Draufsicht passen jeweils zu anderen Spielen. In Pixor ist jede Seite eine Kamera, in Kränzen aus 4, 8 oder 16 oder in jedem Winkel, den du wählst.

3. Der G-Buffer

Statt sofort ein fertiges Bild zu rendern, rendere die Informationen, die du brauchst: die flache Farbe jedes Pixels, die Richtung, in die seine Oberfläche zeigt (Normalen), seinen Abstand zur Kamera (Tiefe) und zu welchem Teil oder Material es gehört. Das nennt man einen G-Buffer. Jeder spätere Schritt arbeitet damit, und das macht den Rest steuerbar. Die Bilder oben auf dieser Seite zeigen Farbe, Normalen und Tiefe einer Truhe und das fertige Sprite.

4. Licht in Stufen

Weiche Schattierung wird zu ein paar flachen Stufen: Licht, Mitte, Schatten. Pixel-Art nutzt typischerweise zwei bis vier. Das Schwierige ist, die Stufen stabil zu halten, wenn sich das Modell bewegt, damit eine Stufenkante nicht auf einer Oberfläche hin und her springt, die sich kaum gedreht hat. Pixor schattiert in 1 bis 4 Stufen und hält eine Stufe, bis sich die Oberfläche klar gedreht hat.

5. Linien

Aus Tiefe, Normalen und Teile-IDs findest du die Silhouette, die Innenkanten zwischen Teilen und Falten, wo eine Oberfläche knickt. Jede lässt sich anders zeichnen: dunkel, farbig oder gar nicht. Pixor behandelt Silhouetten-, Innen- und Faltenlinien als eigene Arten, jede mit ihrer eigenen Selective-Outline-Einstellung, zeichnet sie ein Pixel breit ohne L-Ecken und behält dünne Teile als Ein-Pixel-Linien.

6. Palette

Jede Stufe jedes Materials wird einer Farbe in einer Rampe zugeordnet. Du kannst das Tool Rampen aus den Farben des Modells bauen lassen oder eine feste Palette erzwingen, die das ganze Spiel teilt. Pixor baut farbtonverschobene Rampen pro Material und kann eine automatische Palette nutzen, eine von sieben eingebauten, eine Lospec-.hex- oder GIMP-.gpl-Datei oder eine Palette aus einem Bild. Es schreibt indizierte PNGs und hat Konsolenmodi für die Farbgrenzen von Game Boy, NES, PICO-8, TIC-80 und C64.

7. Bereinigung

Der letzte Durchgang entfernt verirrte Einzelpixel und Linien, die nur für einen Frame auftauchen. Das ist der Unterschied zwischen einem Sheet, das handgemacht aussieht, und einem, das wie Video aussieht. Pixor führt diese Bereinigung als eigene Stufe aus.

8. Das Sheet

Frames werden in ein Sheet gepackt, meist eine Reihe pro Action und Seite, mit Daten, die der Engine sagen, wo jeder Frame liegt.

In Pixor ist jede dieser Stufen eine Node im Style-Graphen, sodass du jede davon sehen und ändern kannst. Einen Look, der dir gefällt, kannst du als Kit speichern und im ganzen Projekt wiederverwenden. Die eingebauten Presets (clean, selout, retro4, flat und wireframe) sind Ausgangspunkte.

Größen und Richtungen wählen

Größe ist zuerst eine Designentscheidung. Ein kleineres Sprite ist in einer Menge leichter lesbar und günstiger nachzubessern; ein größeres zeigt mehr Persönlichkeit. Als grobe Richtschnur:

• 16 px passt zu Kacheln, Items und sehr kleinen Figuren.
• 32 px ist eine gängige Figurenhöhe für Top-down- und Platformer-Spiele.
• 48 bis 64 px bieten Platz für Gesichter, Ausrüstung und ausdrucksstarke Animation.

Wähle einen Maßstab in Pixeln pro Meter, der deiner Hauptfigur die gewünschte Höhe gibt, und lass alles andere folgen. Zeig das Spiel in ganzzahligen Vielfachen (2×, 3×, 4×) an, sodass jedes Art-Pixel ein sauberes Quadrat auf dem Bildschirm wird. Sprite-Größen geht darauf genauer ein.

Zu den Richtungen: eine Seite für Side-Scroller (gespiegelt für die andere Richtung), vier für einfache Spiele in Draufsicht, acht für die meisten Action- und Strategiespiele, sechzehn für Dinge, die sich flüssig drehen, wie Fahrzeuge.

Animation

Eine 3D-Animation hat für jeden Augenblick eine Pose. Pixel-Art-Animation hat eine Handvoll Frames, und die Frames werden ausgewählt, nicht gleichmäßig abgetastet.

Extremposen und Halten

Die wichtigsten Frames sind die Extreme: die Kontaktpose eines Gangs, der höchste Punkt eines Sprungs, der Moment, in dem ein Schwert trifft. Gute Sprite-Animation behält diese, hält sie etwas länger und lässt die Zwischenbilder weg, die bei kleinen Größen nichts beitragen. Gleichmäßig verteilte Frames wirken oft schwammig. Pixors Smart Frames wählen die Extremposen und halten sie.

Weniger Frames, sauberere Frames

Ein Gehzyklus aus sechs oder acht Frames reicht bei 32 Pixeln völlig. Mehr Frames bedeuten mehr Gelegenheiten für Flimmern und mehr Nacharbeit. Pixor misst das Flimmern über eine Animation.

Animation bekommen

Du kannst das Modell selbst animieren, Clips nutzen, die mitgeliefert wurden (auch in separaten Clip-Dateien), oder Clips von einem anderen Rig übertragen. Pixor hat außerdem eine Bewegungsbibliothek mit einfachen Actions (Idle, Gehen, Rennen, Springen, Angriff, Treffer, Tod) und Objektbewegungen (Drehen, Wippen, Schwingen, Pulsieren) für Requisiten und Pickups.

Nachbearbeitung von Hand

Ein Render gibt dir einheitliche Frames. Er gibt dir nicht das Urteil eines Artists. Die meisten guten Ergebnisse entstehen, indem man eine saubere Basis rendert und dann die Frames korrigiert, auf die es ankommt: ein klareres Gesicht, eine stärkere Silhouette im Angriffsframe, ein Glanzlicht auf der Klinge.

Aseprite ist das übliche Werkzeug dafür. Pixor exportiert .aseprite-Dateien mit einem Tag für jede Action und Seite. Wenn du das Modell oder die Einstellungen änderst und erneut renderst, bleiben die handgemalten Ebenen auf ihren Frames; Nachbesserungen gehen also bei einem Neu-Backen nicht verloren. Siehe Aseprite.

Export in Engines

Engines wollen Frames plus Metadaten. Übliche Ziele:

• Sprite-Sheets als PNG mit einer JSON-Datei, die Frames, Actions und Seiten auflistet.
• Godot SpriteFrames für Godot-Projekte.
• GIF oder APNG für Vorschauen, Shopseiten und Social-Media-Posts.
• Normal- und Tiefenkarten, falls deine Engine 2D-Sprites beleuchtet.

Pixor exportiert all das. Weil das Rendern deterministisch ist, ergeben dasselbe Modell und dieselben Einstellungen immer dieselben Pixel, sodass Sheets jederzeit ohne Überraschungen neu gebaut werden können. Siehe Exporte und das Export-Handbuch.

Ausprobieren

Pixor ist eine Desktop-App für Windows und Linux, die jeden der Schritte oben erledigt, offline und ohne Konto. Sie enthält keine generative KI: Sie rendert dein Modell mit den Einstellungen, die du wählst. Sie kostet einmalig $19.99, jedes Update ist kostenlos. Fang mit So funktioniert es an, stöbere in der Bibliothek nach Sprites, die so gerendert wurden, oder lies das Handbuch, um jede Einstellung zu sehen.