Isometrische Pixelart-Anleitung — Kacheln, Sprites & Charaktere

Isometrische Pixelart wird auf einem 2:1-Rautenraster gezeichnet: Jede Kachel ist genau doppelt so breit wie hoch, und Höhe wird als vertikale Pixelreihe gezeichnet, statt durch eine perspektivische Kamera simuliert zu werden. 32×16 ist die Arbeitsgröße für Kacheln, 64×32 für größere Szenen, 16×8 für kleine Requisiten und Charaktere. Sobald du das 2:1-Verhältnis akzeptierst, folgt daraus jede weitere Entscheidung — Sprite-Grundflächen, Laufzyklen, Nähte, Tiefensortierung.

Diese Seite geht das Raster, die Kacheln, die Sprites und die Charaktersets mit vier und acht Richtungen in der Reihenfolge durch, in der du sie tatsächlich baust. Danach behandelt sie den Schritt, den die meisten Tutorials auslassen: dasselbe Rautenraster in eine echte, begehbare 3D-Welt im Browser zu verwandeln, in der die Kameraneigung fest an die Grafik angepasst ist und die Kacheln zu Geometrie werden. Der 3D-Spiele-Builder von Neta Studio ist das Werkzeug, das wir für diesen letzten Schritt nutzen — und deshalb lohnt es sich, die Projektionsdetails hier genau richtig hinzubekommen.

Kurze Antwort: Was macht Pixelart „isometrisch“?

Isometrische Pixelart ist eine gedrehte Projektion, keine perspektivische. Die X- und Y-Achsen der Welt verlaufen auf dem Bildschirm beide diagonal — rechts-und-unten für die eine, links-und-unten für die andere — und die vertikale Achse verläuft gerade nach oben in einzelnen Pixeln. Nichts konvergiert, es gibt keinen Fluchtpunkt, und Tiefe ist eine Konvention, die du von Hand aufrechterhältst: weiter unten auf der Zeichenfläche bedeutet näher, eine höhere Pixelreihe bedeutet weiter oben.

Das Verhältnis ist 2 nach rechts zu 1 nach unten auf beiden Bodenachsen, was jede Bodenkante auf etwa 26,57° zur Horizontalen bringt. Technisch ist das eine dimetrische Projektion; echtes Isometrisch hat auf allen drei Achsen die gleiche Verkürzung bei etwa 35,264° über dem Horizont und erzeugt eine Bodenkachel von etwa 1,732:1. Der Name hat sich gehalten, weil „isometrisch“ das Wort ist, das die Leute benutzen, und fast jedes Tileset, das du findest, ist auf 2:1 gezeichnet.

Das 2:1-Raster

2:1 existiert, weil es sich auf quadratische Pixel abbilden lässt. Eine Kante mit 2 nach rechts und 1 nach unten ist eine saubere Treppe — zwei Pixel rechts, ein Pixel runter, wiederholt —, sodass jedes Kantenpixel auf einem ganzen Pixel landet, wenn du die Kachel stempelst. Eine echte 30°-Projektion hat ein Verhältnis von etwa 1,732 zu 1: Auf je 2 Pixel nach rechts kommst du 1,155 nach unten. Das lässt sich nicht auf ein Pixelraster abbilden, also wechseln die Kanten zwischen Ein-Pixel- und Zwei-Pixel-Abschnitten und die Linie eiert. Du kannst diese Pixel für eine einzelne Hero-Requisite von Hand setzen; für ein Tileset, das Tausende Kopien stempeln muss, geht das nicht.

Der Fehler, der tatsächlich passiert, ist, eine quadratische Zeichenfläche um 45° zu drehen und das Ergebnis isometrisch zu nennen. Ein um 45° gedrehtes Quadrat ist immer noch ein Quadrat: Die Raute hat gleiche Breite und Höhe, die obere Fläche und die Seitenflächen bekommen dieselbe Silhouette, und benachbarte Tiefenreihen trennen sich nicht mehr sauber. Zeichne die Raute vom ersten Pixel an in 2:1; drehe niemals einen 16×16- oder 32×32-Sprite, um eine Kachel zu erzeugen.

Behalte den Kachelschritt als Versatz im Kopf. Bei 32×16 ist das Bewegen um eine Kachel nach Osten +32 auf x und +16 auf y im Bildschirmraum; eine Kachel nach Norden ist +32 auf x und -16 auf y. Genau dieses Offsets-Paar benutzt du für die Platzierung, für die Sprite-Bewegung und für die Tiefensortierung.

Deine erste isometrische Kachel zeichnen

Zeichne eine Kachel, bevor du ein Tileset zeichnest. Das Ziel ist eine Kachel, die du stempeln kannst, ohne nachzubessern — das heißt, jedes Kantenpixel bleibt auf dem 2:1-Schritt, und die drei sichtbaren Flächen teilen sich eine Helligkeitsrampe: obere Fläche im Grundwert, eine Seite eine Stufe dunkler, die andere zwei Stufen dunkler.

Die beiden Seitenflächen sind es, die das Ganze isometrisch lesbar machen. Wenn beide Seiten denselben Wert nutzen, flacht der Würfel zu einem Sechseck ab und das Auge liest keine Höhe mehr. Wähle eine Lichtrichtung — oben links ist die Konvention — und ändere sie innerhalb eines Projekts nie. Dann sind sich jede Kachel und jeder Sprite einig, wo das Licht herkommt.

Isometrische Sprites & Sprite-Sheets

Ein Seitenansicht-Sprite hat eine rechteckige Grundfläche und läuft horizontal. Ein isometrischer Sprite hat eine rautenförmige Grundfläche, und seine Füße sitzen innerhalb dieser Raute. Alles am Sheet folgt daraus: Der Anker ist die Mitte der Raute — oder die untere Ecke der Raute, wenn du lieber in Füßen denkst —, und der Sprite wird am selben Kachelursprung gezeichnet wie die Bodenkachel, auf der er steht.

Die Bewegung auf dem Bildschirm ist diagonal. Eine Kartenkachel nach Osten sind +32 Pixel rechts und +16 runter; eine Kachel nach Norden sind +32 rechts und -16 runter. Ein nach Osten ausgerichteter Laufzyklus ist also keine horizontale Schleife — der Körper driftet entlang der 2:1-Steigung, während die Beine sich drehen. Wenn die Versätze pro Frame auf einer horizontalen Linie gezeichnet werden, rutscht der Charakter über die Kachel. Teste es, indem du vier Kopien entlang einer Diagonalen platzierst und prüfst, ob die Füße den Kachelmitten folgen.

Lege das Sheet so an, dass Reihen für die Richtung und Spalten für den Frame stehen, in einer einheitlichen Zelle. Eine 32×16-Grundfläche mit einem 32 Pixel hohen Charakter passt in eine 32 breite mal 48 hohe Zelle: 16 Pixel für die Raute, 32 darüber für den Körper. Halte das Alpha binär, 0 oder 255. Halbtransparente Randpixel nehmen auf, was hinter ihnen liegt, sobald das Sheet gepackt oder skaliert wird, und du bekommst einen hellen Halo um jeden Charakter vor einer dunklen Kachel.

Isometrische Charaktere (4/8 Richtungen)

Vier Richtungen sind der Standard, weil das Bodenraster vier Diagonalen hat: Südost, Südwest, Nordost, Nordwest. Diese Ausrichtungen decken jede Bewegung entlang der Kartenachsen ab. Acht Richtungen fügen die Bildschirm-Himmelsrichtungen hinzu — Norden, Süden, Osten und Westen —, die nur erscheinen, wenn der Charakter diagonal über das Raster läuft, entlang beider Achsen gleichzeitig. Das verdoppelt die Grafik, und die vier zusätzlichen Reihen sind nur zu sehen, während der Spieler zwei Tasten hält.

Die Engine braucht eine eindeutige Zuordnung. Entweder entspricht die Reihe dem Richtungsindex und die Spalte dem Frame, oder ein flacher Index aus directionIndex * framesPerDirection + frame. Schreibe die Reihenfolge in eine Textdatei neben dem Sheet. Der klassische Bug ist ein Sheet, das mit Osten zuerst erstellt und mit Süden zuerst importiert wurde, sodass eine Richtung rückwärts zeigt und der Fehlerbericht als „die Laufanimation sieht falsch aus“ zurückkommt.

Frame-Anzahl und Timing

Ein Laufzyklus liest sich mit 8 bis 12 Frames pro Sekunde. Vier Frames bei 8 fps sind 125 ms pro Frame; sechs Frames lassen dich eine Kontaktpose und eine Durchgangspose zeichnen und bewegen sich flüssiger entlang der 2:1-Diagonalen, ohne viel Mehraufwand. Halte die Frame-Anzahl in jeder Richtungsreihe identisch, es sei denn, deine Metadaten speichern eine Anzahl pro Richtung — eine Sechs-Frame-Reihe neben Vier-Frame-Reihen spielt mit der falschen Geschwindigkeit, sobald der Code ein einheitliches Raster annimmt. Idle besteht aus einem oder zwei Frames in einer langsamen Schleife. Angriffe und Interaktionen kommen auf ein separates Sheet mit derselben Zellgröße, damit sich der Drehpunkt nie ändert.

Spiegeln ist billiger und meistens falsch

Ost nach West zu spiegeln halbiert die Zeichenarbeit. Es spiegelt aber auch das Licht. Wenn dein Licht von oben links kommt, wird ein gespiegelter Sprite von oben rechts beleuchtet, und asymmetrische Details — ein Schildarm, eine Scheide, ein Umhängetaschenriemen — landen auf der falschen Seite. Spiegle nur, wenn der Charakter symmetrisch und die Schattierung so flach ist, dass es niemandem auffällt, und spiegle niemals einen Sprite mit einem starken gerichteten Glanzlicht.

Objekte, Requisiten & Höhe

Die Grafikbox einer Requisite ist höher als ihre Grundfläche. Ein Baum mit einer 1×1-Grundfläche (32×16) und 40 Pixeln Krone darüber braucht eine Zelle, die 32 breit und etwa 56 hoch ist: 16 für die Raute, 40 für das, was darüber aufragt. Lege diese Zellgröße einmal fest und halte jede Requisite im selben Modul, sonst braucht der Importer für jede einzelne einen Versatz pro Sprite.

Requisiten über mehrere Kacheln werden auf einer größeren Raute gezeichnet. Ein 2×2-Gebäude deckt vier Kacheln ab, seine Bodengrundfläche ist also eine 64×32-Raute, selbst wenn die Grafik 48 oder 64 Pixel darüber aufragt. Halte den Ursprung in der Mitte der Grundfläche — bei einer 2×2-Requisite ist das der Punkt, an dem die vier Kacheln zusammentreffen —, nicht in der Mitte der Begrenzungsbox des Sprites. Eine Zentrierung an der Begrenzungsbox setzt die Basis um eine halbe Kachel daneben, und das Gebäude scheint über einer Ecke seines eigenen Grundstücks zu schweben.

Die Tiefensortierung in einem 2D-isometrischen Renderer ist der Maler-Algorithmus: sortiere nach tileX + tileY und löse Gleichstände dann mit einer Priorität pro Objekt auf. Hohe Requisiten brechen ihn. Ein sechs Kacheln hoher Turm in Reihe 2 wird über eine Wand in Reihe 5 gezeichnet, die ihn eigentlich verdecken sollte. Zwei Lösungen: Zerlege hohe Requisiten in einen Sockel und einen oberen Abschnitt und sortiere jeden nach den Reihen, die er tatsächlich abdeckt, oder gib jedem Sprite eine Belegungsmaske pro Kachel, damit der Renderer weiß, welche Reihen er überlappt.

Tilesets, die sich nicht wiederholen

In einem isometrischen Set gibt es zwei Nähte, und sie brauchen unterschiedliche Lösungen. Die Wertnaht ist dort, wo eine Seitenfläche auf die obere Fläche der Kachel darunter trifft: Ist der Wandfuß heller als die Bodenoberseite, bekommst du eine helle Linie entlang jeder Wand auf der Karte. Die Musternaht ist dort, wo sich eine Folge identischer Bodenkacheln wiederholt — der 2:1-Schritt ist regelmäßig genug, dass das Auge sich nach etwa drei Kacheln auf den Rhythmus einschließt.

Kantenvarianten verbergen das Muster. Das kleinste nützliche Set umfasst neun Kacheln: eine mittlere Kachel, vier Kacheln mit einem Übergang an einer einzelnen Kante und vier mit Übergängen an zwei benachbarten Kanten. Zeichne den Übergang als weiches, aufgelockertes Band von zwei bis vier Pixeln statt als gerade Linie, sonst hast du die Naht verschoben statt sie zu entfernen. Randomisiere die Platzierung mit einem Hash der Kachelkoordinate statt mit einem laufenden Zufallsgenerator, damit dieselbe Welt jedes Mal identisch neu entsteht — das zählt, wenn die Welt aus einer geschriebenen Beschreibung neu aufgebaut wird.

Der Nachbarschaftsgraph ist derselbe wie bei orthogonalen Tilesets: vier Kantennachbarn und vier diagonale Nachbarn pro Kachel. Deshalb lässt sich das 47-Kachel-Blob-Set unverändert aus orthogonaler Arbeit übertragen — nur die Grafik unterscheidet sich. Aktiviere nur-diagonale Fälle nicht, es sei denn, du hast sie gezeichnet, sonst bekommst du Eck-Artefakte oder eine Ein-Pixel-Lücke, wo zwei Bodenkacheln nicht zusammenpassen.

• 47-Kachel-Blob-SetDeckt jede Vier- und Acht-Nachbar-Kombination ab, einschließlich der nur-diagonalen Fälle, die ein Neun-Kachel-Set auslässt. Gleiche Kachelanzahl wie ein orthogonales Blob-Set; nur die Grafik ändert sich.
• Neun-Kachel-SetMitte, vier Kacheln mit Einzelkante, vier Eckkacheln. Günstig zu zeichnen, deckt die meisten Bodenübergänge ab und versagt nur bei nur-diagonalen Fällen, wenn deine Platzierungsregeln deren Erzeugung verbieten.
• SpiegelvariantenEine Bodenkachel horizontal zu spiegeln ist kostenlose Variation, wenn die Kachel keinen Lichtbezug hat. Spiegle niemals eine Wand oder eine beleuchtete Requisite: Die Lichtrichtung kippt mit ihr und die Kachel passt nicht mehr zu ihren Nachbarn.

Von 2D-Iso zu einer spielbaren 3D-Iso-Welt

Eine 2:1-Raute erhältst du von einer orthografischen Kamera mit Gierwinkel 45° und Neigung 30°. Bei 30° ist die vertikale Stauchung genau sin(30°) = 0,5, sodass eine quadratische Bodenkachel als Raute doppelt so breit wie hoch projiziert wird — dasselbe Verhältnis wie die Pixel, die du gezeichnet hast. Die echte isometrische Neigung von 35,264° ergibt 1,732:1 und passt nicht zu einem 2:1-Tileset. Eine 32×16-Kachel lässt sich also sauber auf eine 1×1-Welteinheit abbilden, und das gesamte 2D-Set kann als Texturen auf flachen Quads oder zu Boxen extrudiert genutzt werden, ohne etwas neu zu zeichnen.

Zwei Dinge brechen, wenn sich die Kamera bewegt. Erstens die freie Umkreisung: Bei einem Gierwinkel von 37° landen die Kachelkanten zwischen Pixeln und die ganze Karte flimmert. Sperre die Neigung auf 30°, raste den Gierwinkel auf 90°-Schritte ein und raste, wenn du eine Drehung animierst, vor dem Zur-Ruhe-Kommen zurück. Zweitens die Beleuchtung: Die Grafik trägt ein eingebackenes Licht von oben links. Bleibt das Führungslicht im Weltraum fixiert und die Kamera dreht sich um 90°, stimmt die Schattierung in der Grafik nicht mehr mit der Szene überein. Hänge das Führungslicht an die Kamera, oder backe die Schattierung in die Textur ein und halte das Licht bildschirmrelativ.

Wenn du den Pixel-Look in WebGL erhalten willst, rendere mit niedriger interner Auflösung und skaliere mit Nearest-Neighbour-Filterung hoch, und raste die Kameraposition auf ganze Bildschirmpixel ein. Sonst landen Texel-Zentren zwischen Fragmenten und die Grafik kriecht, während der Charakter läuft, was wie ein Texturfehler wirkt, obwohl die Grafik in Ordnung ist.

Der 3D-Spiele-Builder von Neta Studio nimmt eine geschriebene Beschreibung und baut im Browser eine echte Three.js-Welt mit einer orthografischen Kamera in der festen Neigung — begehbar, ohne lokale Toolchain. Mini World ist die kleine Version davon und der schnellste Weg zu testen, ob ein Tileset und ein Charakterset korrekt lesbar sind, bevor du dich auf eine große Karte festlegst. The Cyclops' Island ist eine fertige Beispielwelt, durch die du laufen kannst, um die Projektion in Aktion zu sehen. Für Charaktere erzeugt Agent Sprite Forge Sprite-Sheets in einer gewählten Zellgröße, und das hält den Drehpunkt über alle Richtungen hinweg konsistent.

Software für isometrische Pixelart

Alles auf dieser Seite lässt sich in einem Rastereditor mit Raster machen. Was die spezialisierten Werkzeuge hinzufügen, ist Kachel-Bewusstsein: ein Kachelkarten-Modus, der die Kachel, die du zeichnest, neben ihren Nachbarn anzeigt, sodass du die Naht schon während des Malens siehst und nicht erst, nachdem du sie zweihundert Mal gestempelt hast.

Wähle danach, was du produzieren musst, nicht nach Funktionslisten. Kacheln brauchen ein Raster, eine Kachelvorschau und eine stabile Palette. Charaktere brauchen Onion Skin, einheitliche Zellen und einen Sheet-Export, der einen Drehpunkt mitführt. Karten brauchen ein Werkzeug, das Kachelkoordinaten speichert, denn ein PNG ist keine Karte.

• AsepriteRastereditor mit Kachelkarten-Modus, Kachelraster, Onion Skin und Sheet-Export mit JSON, das Frame-Tags und Drehpunkt mitführt. Die Kachelvorschau ist der Grund, warum er für Tilesets genutzt wird: Du siehst die Naht, während du sie malst.
• LibreSpriteOpen-Source-Editor aus derselben Codebasis. Der Kachel-Workflow ist weitgehend derselbe; rechne mit weniger der späteren Funktionen.
• Krita und PhotoshopAllgemeine Rastereditoren. Rasterhilfslinien und Symmetrie bringen dir eine Raute, aber keiner hat einen Kachelkarten-Modus, also stempelst du von Hand. Der Versatz-Filter — verschiebe die Zeichenfläche um die halbe Kachelgröße und schau in die Mitte — ist immer noch der schnellste Weg, eine Wertnaht zu finden.
• TiledEin Karteneditor, kein Grafikwerkzeug. Speichert Kachelkoordinaten, unterstützt isometrische Ausrichtung mit einer 2:1-Kachelgröße und exportiert die Layer-Daten. Zeichne in einem Werkzeug, platziere in einem anderen.
• Der 3D-Spiele-Builder von Neta StudioBrowserbasiert. Eine geschriebene Beschreibung wird zu einer spielbaren isometrischen Welt in Three.js, sodass du die lokale Toolchain und den Importschritt ganz überspringst und testest, ob die Grafik bei der richtigen Kameraneigung lesbar ist.
• Agent Sprite ForgeErzeugt Sprite-Sheets für Charaktere, was meist der längste Teil eines isometrischen Sets ist. Lege Zellgröße und Richtungsanzahl fest, bevor du generierst; ein Sheet, das mit einer anderen Zellgröße erstellt wurde, passt nicht zu deinen Kacheln.

Lauf in die Welt hinein, zu der es gehört

Ein Sprite ist ein Charakter ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: Nimm das Sheet, das du gerade gebaut hast, und setze es in eine Welt, durch die jemand laufen kann — eine kleine Insel, einen Planeten, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ