Sprite-Sheet erklärt: Formate, Tools & wie man jede Animation konvertiert

Ein Sprite-Sheet ist ein einzelnes Bild, das jeden Frame einer Animation enthält, angeordnet in einem festen Raster oder Streifen, sodass ein Renderer pro Frame einen Bereich abtasten kann, statt Dutzende Dateien zu laden. Wenn du schon einmal Frames aus einer 3D-Animation exportiert hast und dann herausfinden musstest, warum die Figur zittert oder der Hintergrund schwarz wird, liegt das Problem meistens beim Sprite-Sheet.

Diese Seite behandelt den gesamten Weg: was ein Sheet tatsächlich ist, wie es sich von einem Atlas unterscheidet, wann man ein Raster statt eines horizontalen Streifens verwendet, welches Format man exportiert und wie man GIF-, Bild- und Videoquellen im Browser in ein nutzbares Sheet konvertiert. Die Beispiele verweisen auf unsere eigenen Tools und Welten — Agent Sprite Forge, The Cyclops' Island, Mini World und den 3D-Spiel-Builder —, weil das die Pipeline ist, die wir ausliefern und testen.

Was ist ein Sprite-Sheet

Ein Sprite-Sheet ist ein Rasterbild, bei dem jeder Animationsframe eine gleich große Zelle in einem regelmäßigen Raster einnimmt. Das Sheet selbst trägt keine semantische Information darüber, welche Zelle welcher Frame ist; diese Zuordnung liegt entweder in der Dateinamenskonvention, einem begleitenden JSON-Index oder den Animationseinstellungen der Engine. Die vier Dinge, die man zum Zerlegen eines Sheets kennen muss, sind: die Zellenbreite und -höhe in Pixeln, die Anzahl der Spalten, die Anzahl der Zeilen und der Ursprung (oben links bei den meisten Engines, aber manche Frameworks gehen von unten links aus).

Wenn einer dieser vier Werte falsch ist, ist der Fehler sofort sichtbar. Eine Zellenbreite von 32 statt 33 verschiebt jeden Frame um ein Pixel nach rechts, während man durch das Sheet läuft, was als langsames horizontales Driften erscheint. Ein falscher Ursprung kippt die Animation vertikal. Eine falsche Frame-Anzahl lässt den letzten Frame weg, sodass ein Gehzyklus mit einem Ruck statt einer Kontaktpose endet. Das sind keine Rendering-Fehler; es sind Metadaten-Fehlpaarungen.

Anatomie eines Sheets

Man kann sich ein Sheet wie eine Tabelle vorstellen. Spalten und Zeilen ergeben sich aus den Pixelabmessungen: Gesamtbreite geteilt durch Zellenbreite ergibt die Spaltenanzahl, und Gesamthöhe geteilt durch Zellenhöhe ergibt die Zeilenanzahl. Ein Sheet mit 512 mal 128 und 64 mal 64 Zellen hat 8 Spalten und 2 Zeilen, also 16 Frames. Fügt man ein Pixel Padding zwischen den Zellen hinzu, ändert sich die Rechnung: 512 Pixel Breite mit 64-Pixel-Zellen und 1 Pixel Padding fasst 7 Zellen, nicht 8, weil das Padding 8 Pixel verbraucht. Padding und Spacing müssen berücksichtigt werden, bevor man den Zerlegungscode schreibt.

Wo der Ursprung zählt

Die meisten WebGL- und Canvas-Pipelines setzen den Ursprung oben links im Bild, was dem Koordinatensystem von Bildbearbeitungswerkzeugen entspricht. Manche Game-Engines und ältere Frameworks kippen die Y-Achse und erwarten den Ursprung unten links. Wenn dein Sprite kopfüber erscheint, prüfe den Ursprung, bevor du irgendetwas skalierst. Die Lösung ist meistens eine einzeilige Transformation oder ein Neugenerieren mit umgekehrter Zeilenreihenfolge, kein vollständiger Neu-Export.

Sprite-Sheet vs. Spritesheet vs. Sprite-Atlas

Die Schreibweise ist nicht standardisiert. „Sprite sheet“ mit Leerzeichen ist die gängige englische Form und die, die die meisten Dokumentationen und Tutorials verwenden. „Spritesheet“ als ein Wort erscheint in Code-Bezeichnern, Dateinamen und manchen Engine-APIs, weil Leerzeichen in diesen Kontexten unpraktisch sind. Suchmaschinen behandeln beide als nahezu synonym, sodass man dieselbe Technik unter beiden Schreibweisen findet.

Der eigentliche Unterschied liegt zwischen einem Sheet und einem Atlas. Ein Sprite-Sheet ist ein gepacktes Bild ohne verpflichtenden Index. Ein Sprite-Atlas ist dasselbe gepackte Bild plus eine maschinenlesbare Beschreibung, was wo liegt — üblicherweise eine JSON-, XML- oder Binärdatei, die jeden Bereich benennt. Dieser Index ermöglicht es einem Tool, den Idle-Frame, den Run-Frame und den Attack-Frame zu finden, ohne dass man Pixelkoordinaten fest kodiert. Wenn die Frames gleichmäßig und die Schleife einfach ist, reicht ein einfaches Sheet. Bei unregelmäßigen Bereichen oder benannten Zuständen braucht man einen Atlas.

• SheetEin Raster oder Streifen gleich großer Frames. Keine Metadaten erforderlich. Das Zerlegen ist Arithmetik.
• SpritesheetDasselbe Artefakt, als ein Wort geschrieben. Häufig in Code und Asset-Dateinamen.
• AtlasGepackte Frames plus ein Index, der Namen oder IDs auf Rechtecke abbildet. Ermöglicht benannten Zugriff statt Koordinatenberechnung.

Raster-Sheet vs. horizontaler Frame-Strip

Ein Raster-Sheet packt Frames in Zeilen und Spalten, um das Bild annähernd quadratisch zu halten. Das ist wichtig, weil Texturspeicher und GPU-Sampling auf mancher Hardware quadratische oder Zweierpotenz-Abmessungen bevorzugen und weil ein quadratisches Sheet in einem Bildeditor leichter in der Vorschau zu prüfen ist. Raster sind der Standard für das engine-seitige Zerlegen: Man legt Zellgröße und Frame-Anzahl fest, und die Engine durchläuft das Raster Zeile für Zeile.

Ein horizontaler Frame-Strip platziert jeden Frame in einer einzigen Zeile. Das ist das Layout, das Shader und Flipbook-Texturen erwarten, weil der UV-Offset zu einer einzigen Multiplikation wird: Frame-Index geteilt durch Frame-Anzahl ergibt den X-Offset, und Y bleibt konstant. Wenn man einem Shader, der einen Streifen annimmt, ein Raster-Sheet übergibt, tastet die Animation über Zeilen hinweg ab und läuft in nicht beabsichtigter Weise um. Wenn man einem Engine-Slicer, der ein Raster annimmt, einen Streifen übergibt, behandelt er den Streifen entweder als eine sehr breite Zeile oder findet überhaupt keine Zeilen.

Der Fehlerfall ist anfangs meist subtil: Die Animation läuft, aber das Timing fühlt sich falsch an oder Frames wiederholen sich in falscher Reihenfolge. Bevor man die Animationslogik debuggt, sollte man prüfen, ob das Layout zum Konsumenten passt. In unserem 3D-Spiel-Builder verwenden sprite-basierte Charaktere ein Raster, weil die Engine das Zerlegen übernimmt; shader-getriebene Effekte wie Feuer oder Wasser verwenden einen Streifen, weil das Material ihn direkt abtastet.

Welches Format exportieren

PNG ist der sichere Standard. Es unterstützt volle Alphatransparenz, ist verlustfrei, und jede Engine und jeder Browser dekodiert es. Für Sprites mit harten Kanten und flachen Farben komprimiert PNG gut. Für fotografische oder stark schattierte Sprites erzeugt WebP bei gleicher visueller Qualität meist eine kleinere Datei, und alle aktuellen Browser unterstützen es. Verwende WebP, wenn die Dateigröße zählt und man sicherstellen kann, dass die Ziel-Laufzeitumgebung es dekodiert. GIF ist ein Auslieferungsformat, kein Autorenformat: Es unterstützt nur ein-Bit-Transparenz, sodass jedes halbtransparente Pixel entweder vollständig deckend oder vollständig transparent wird. Wenn die Quelle weiche Kanten hat, wird GIF sie ausfransen.

Füge einen JSON-Sidecar hinzu, wenn die Frames kein einfaches gleichmäßiges Raster sind, wenn benannte Zustände benötigt werden oder wenn der Konsument einen Atlas erwartet. Der Sidecar ist klein und erspart das feste Kodieren von Koordinaten. Wenn die Frames gleichmäßig und die Animation eine einzige Schleife ist, kann man ihn weglassen und die Engine die Rechtecke berechnen lassen. Exportiere Sprites niemals als JPEG. JPEG ist verlustbehaftet und hat keinen Alphakanal, sodass Transparenz entweder schwarz oder weiß wird und die Kompressionsartefakte genau auf den harten Kanten landen, die die Silhouette eines Sprites definieren. Es gibt keine Einstellung, die das behebt.

Alle unsere Konverter

Das sind die Konvertierungspfade, die wir ausliefern. Jeder läuft im Browser, sodass man eine Datei hineinlegen und ein Sprite-Sheet herausbekommen kann, ohne etwas zu installieren. Sie decken die gängigen Quellen ab: animierte GIFs, Standbilder und Videoclips.

Für animierte GIFs entpackt der Konverter jeden Frame und packt ihn in ein Sheet oder einen Streifen, wobei die Frame-Verzögerungen in einem Sidecar erhalten bleiben, wenn man einen anfordert. Für Standbilder schneidet der Konverter eine Sequenz von Bildern, die man bereitstellt, zu und ordnet sie in einem Raster an. Für Video tastet der Konverter Frames in einem gewählten Intervall ab und schreibt sie in ein Sheet; man steuert das Abtastintervall und die Zellgröße. Wenn man einen Charakter für The Cyclops' Island oder ein Requisit für Mini World baut, beginne mit dem Quellformat, das man hat, und wähle den passenden Konverter.

• GIF zu Sprite-SheetEntpackt ein animiertes GIF Frame für Frame und packt die Frames in ein Raster oder einen horizontalen Streifen.
• Bild zu Sprite-SheetNimmt eine Sequenz von Standbildern und ordnet sie in einem gleichmäßigen Raster mit konsistenter Zellgröße an.
• Video zu Sprite-SheetTastet Frames aus einem Video in einem gewählten Intervall ab und schreibt sie in ein Sheet oder einen Streifen.
• Agent Sprite ForgeUnser sprite-fokussiertes Tool zum Generieren und Packen von Charakter-Frames in Sheets, die vom 3D-Spiel-Builder verwendet werden.

Glossar

Das sind die Begriffe, die beim Lesen von Sprite-Sheet-Dokumentation, Engine-Einstellungen oder Shader-Code auftauchen. Die Definitionen sind bewusst kurz gehalten.

• AtlasEin gepacktes Bild aus Bereichen plus ein maschinenlesbarer Index, der Namen oder IDs auf Rechtecke abbildet.
• ZelleDas Rechteck in einem Sheet, das einen Frame enthält. Seine Breite und Höhe sind die Zellgröße.
• Frame-StripEin Sheet, das als eine einzelne horizontale Reihe von Frames angeordnet ist, verwendet von Shadern und Flipbook-Texturen.
• FlipbookEine Textur, die über die Zeit Bereich für Bereich abgetastet wird, um eine Animation zu erzeugen, typischerweise aus einem Frame-Strip.
• IndexDie Sidecar-Daten, die Bereiche in einem Atlas benennen oder nummerieren. Ohne ihn ist das Zerlegen Arithmetik.
• UrsprungDie Ecke des Bildes oder der Zelle, von der aus Koordinaten gemessen werden, üblicherweise oben links oder unten links.
• PaddingZusätzliche Pixel zwischen Zellen in einem Sheet, um Textur-Bleeding zu verhindern. Padding verändert, wie viele Zellen hineinpassen.
• SpacingDer Abstand zwischen Zellen, oft synonym mit Padding verwendet, manchmal aber separat gezählt.

Betrete die Welt, zu der es gehört

Ein Sprite ist eine Figur 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, in der man herumlaufen 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.