Sprite-Sheet-Maker: Kostenloser Online-Sheet- und Atlas-Builder

Ein Sprite-Sheet-Maker hat eine Aufgabe: eine Reihe einzelner Frames zu nehmen und sie an bekannten Koordinaten in einem einzigen Bild zu packen. Du führst ihm PNG-, JPG- oder WebP-Dateien zu, wählst Spalten, Padding und Skalierung, und er liefert ein PNG plus einen JSON-Atlas, der jeden Frame-Namen auf ein Rechteck aus x, y, width und height abbildet. Dieses Rechteck ist alles, was dein Renderer braucht, um die richtige Zelle zu zeichnen.

Der Begriff umfasst zwei verschiedene Werkzeuge. Eines ist ein Packer: Du hast bereits Frames und möchtest sie auf einem Sheet. Das andere ist ein Generator: Du schreibst einen Prompt und erhältst ein vollständiges animiertes Charakter-Sheet in einem konsistenten Stil. Der browserbasierte 3D-Welt-Builder von Neta Studio kann beides, und die Ausgabe landet direkt in einer Three.js-Szene, ohne Konvertierungsschritt.

Erstelle ein Sprite-Sheet aus deinen Frames

Dies ist der Packing-Pfad. Du ziehst Frames hinein, und das Sheet wird deterministisch aufgebaut: von links nach rechts, von oben nach unten, in der Reihenfolge, in der du sie geliefert hast. Der erste Frame belegt Zelle (0,0), der zweite sitzt eine Zelle rechts daneben, und so weiter, bis die Zeile voll ist; dann bricht das Packing in die nächste Zeile um.

Die Reihenfolge ist hier wichtiger als alles andere. Der Packer sortiert nicht nach Dateinamen und leitet keine Animationsgruppen aus Namen ab. Wenn deine Frames von frame_1.png bis frame_8.png nummeriert sind und du sie in falscher Reihenfolge hineinziehst, ist das exportierte Sheet falsch, und der JSON-Atlas zeichnet die falsche Reihenfolge getreu auf. Sortiere vor dem Hineinziehen, oder prüfe den Thumbnail-Streifen vor dem Export.

Die Ausgabe besteht aus zwei Dateien. Das PNG ist das gepackte Bild. Das JSON ist ein kleines Objekt, das nach Frame-Namen indiziert ist; jeder Wert enthält das Rechteck und die Quellgröße. Die meisten Engines können dieses JSON direkt einlesen; wenn deine das nicht kann, sind die Zahlen einfach genug, um sie von Hand neu zuzuordnen.

Generiere ein Sprite-Sheet aus einem Prompt

Die zweite Bedeutung von Sprite-Sheet-Maker hat nichts mit Grid-Packing zu tun. Du beschreibst einen Charakter und bekommst ein vollständiges Sheet zurück — einen ganzen Satz Posen, gerendert in einem konsistenten Stil, bereits in einem Raster angeordnet. Es gibt keine Quellgrafik, die du hineinziehen kannst, denn die Grafik ist die Ausgabe.

Das Nützliche daran ist die Konsistenz. Acht Richtungen eines Walk-Cycles in einem Durchgang zu generieren hält Silhouette, Palette und Proportionen über die Zellen hinweg aufeinander abgestimmt. Jeden Frame in einer separaten Anfrage zu generieren tut das nicht, und die Abweichung zeigt sich als Charakter, der zwischen den Frames seine Masse zu verändern scheint.

Neta Studio generiert 8-Richtungs-Walk-Cycles sowie Idle-, Attack- und Cast-Sets. Agent Sprite Forge ist das Asset im Studio, das diese Sheets erzeugt; du kannst ein generiertes Sheet in eine Welt im 3D-Spiel-Builder ziehen und es mit demselben Atlas-JSON steuern, das der Packer erzeugt hätte.

Spalten, Padding, Skalierung und der JSON-Atlas

Vier Einstellungen entscheiden, ob ein Sheet brauchbar ist. Stelle sie beim Export richtig ein, denn eine spätere Korrektur bedeutet, das Sheet neu zu packen und jede Animation, die auf die alten Koordinaten verwiesen hat, erneut zu testen.

Der JSON-Atlas ist der Vertrag zwischen dem Sheet und deinem Code. Er speichert pro Frame die Position und Größe der Zelle. Wenn du das Sheet änderst und den Atlas nicht neu generierst, sampeln Sprites den falschen Bereich, und ein Streifen benachbarter Frames blutet in die Zelle.

Was ist ein Textur-Atlas

Ein Atlas ist eine einzelne Textur, die viele kleinere Bilder enthält, plus eine Tabelle, die beschreibt, wo jedes davon liegt. Ein Sprite-Sheet ist der häufige Fall, in dem diese kleineren Bilder Animationsframes desselben Motivs sind.

Der Grund für Atlanten sind Draw Calls. Eine separate Textur pro Frame zu binden zwingt den Renderer, zwischen jedem Frame den Zustand zu wechseln, und Zustandswechsel dominieren die Frame-Zeit, sobald du viele Sprites auf dem Bildschirm hast. Alles auf eine Textur zu packen bedeutet ein Binden für die gesamte Gruppe. Die Geometrie wird weiterhin pro Sprite gezeichnet, aber die Textur ändert sich nicht.

Der Kompromiss ist, dass die Bearbeitung grob ausfällt. Einen Frame zu ändern bedeutet, das Sheet neu zu packen und den Atlas zu aktualisieren, und jeder Code, der ein altes Rechteck hält, ist nun falsch. Deshalb wird der Atlas als Daten exportiert statt als fest codierte Koordinaten. Unser Sprite-Sheet-Leitfaden behandelt die Packing-Entscheidungen ausführlicher.

Sprite-Sheet-Generator für RPG, Platformer und isometrische Spiele

Das gewünschte Layout wird größtenteils vom Genre bestimmt. RPGs indizieren nach Richtung und Animationsphase, daher ist ein Raster naheliegend. Platformer führen meist eine einzelne Aktion gleichzeitig aus, daher ist ein breiter Streifen einfacher. Isometrische Welten brauchen Zellabmessungen, die zur Rautenprojektion passen, sonst überlappen Sprites.

Wähle das Layout, bevor du die Spalten festlegst, und schreibe den Lookup-Code passend zu diesem Layout. Ein Raster nachträglich in eine streifenbasierte Indizierung umzubauen ist eine mechanische, aber mühsame Änderung, und sie berührt jede Animations-Aufrufstelle.

Charakter-Sprite-Sheets

Ein Ensemble konsistent zu halten ist der schwierige Teil, sobald du mehr als einen Charakter hast. Einzeln plausible Sheets scheitern gemeinsam, wenn Paletten abdriften, Proportionen sich verschieben oder die Lichtrichtung zwischen Charakteren in derselben Szene kippt.

Generiere das vollständige Aktions-Set eines Charakters in einem Durchgang statt eine Aktion nach der anderen. Palette und Proportionen übertragen sich innerhalb eines Durchgangs über die Posen hinweg; über Durchgänge hinweg tun sie das nicht, und der Unterschied ist sichtbar, sobald zwei Charaktere einen Frame teilen.

Halte die Zellgröße über jeden Charakter im Ensemble hinweg identisch, auch wenn die Grafik die Zelle nicht ausfüllt. Einheitliche Zellen erlauben der Szene, jeden Charakter in jeden Slot zu setzen, ohne eine Offset-Tabelle pro Charakter. Der Use-Case Charakter-Sprite-Maker führt dies für ein vollständiges Ensemble durch.

Ein vorhandenes Sheet zerlegen

Wenn du bereits ein Sheet hast und die Frames wieder herausziehen möchtest, ist das Slicing, nicht Packing, und es ist die umgekehrte Operation. Der GIF-Konverter und der Animator behandeln diesen Pfad — du lieferst das Sheet, definierst das Zellenraster oder die Frame-Grenzen und erhältst einzelne Frames.

Zwei Dinge lassen Slicing fehlschlagen. Sheets mit ungleichmäßigem Padding lassen sich nicht gleichmäßig durch eine geschätzte Zellgröße teilen; miss daher eine bekannte Zelle, statt die Bildbreite durch deine geschätzte Spaltenanzahl zu teilen. Sheets, die aus einem verlustbehafteten Format exportiert wurden, tragen Kompressionsartefakte entlang der Zellgrenzen, und diese Artefakte werden sichtbar, sobald die Zellen getrennt und hochskaliert werden.

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

Ein Sprite ist ein Charakter, der nirgendwo stehen kann. Der letzte Schritt ist der, den sonst niemand anbietet: Nimm das Sheet, das du gerade erstellt hast, und setze es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, ein Planet, eine verregnete Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ