Sprite-Sheet erklärt: Formate, Tools und 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 sampeln kann, statt Dutzende Dateien zu laden. Wenn Sie schon einmal Frames aus einer 3D-Animation exportiert und sich dann gefragt haben, warum die Figur zittert oder der Hintergrund schwarz wird, steckt das Problem meist im Sprite-Sheet.

Diese Seite behandelt den gesamten Weg: was ein Sheet tatsächlich ist, wie es sich von einem Atlas unterscheidet, wann ein Raster statt eines horizontalen Streifens verwendet wird, welches Format exportiert werden sollte 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 Game Builder —, weil das die Pipeline ist, die wir ausliefern und testen.

Was ist ein Sprite-Sheet

Ein Sprite-Sheet ist ein Rasterbild, in dem jeder Animations-Frame eine gleich große Zelle in einem regelmäßigen Raster belegt. Das Sheet selbst enthält keine semantische Information darüber, welche Zelle welcher Frame ist; dieses Mapping steckt entweder in der Dateinamenskonvention, einem Sidecar-JSON-Index oder den Animationseinstellungen der Engine. Die vier Dinge, die Sie kennen müssen, um ein Sheet zu zerlegen, sind: die Zellenbreite und -höhe in Pixeln, die Anzahl der Spalten, die Anzahl der Zeilen und der Ursprung (oben links für die 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 Sie durch das Sheet fortschreiten, was wie ein langsames horizontales Wandern wirkt. 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-Bugs; es sind Metadaten-Fehlanpassungen.

Anatomie eines Sheets

Betrachten Sie ein Sheet wie eine Tabelle. 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 Pixeln und 64 mal 64 Zellen hat 8 Spalten und 2 Zeilen, also 16 Frames. Wenn Sie zwischen den Zellen ein Pixel Padding hinzufügen, ändert sich die Rechnung: 512 Pixel Breite mit 64-Pixel-Zellen und 1 Pixel Padding bieten Platz für 7 Zellen, nicht 8, weil das Padding 8 Pixel frisst. Padding und Spacing müssen berücksichtigt werden, bevor Sie den Code zum Zerteilen schreiben.

Wo der Ursprung wichtig ist

Die meisten WebGL- und Canvas-Pipelines setzen den Ursprung oben links im Bild, was dem Koordinatensystem von Bildbearbeitungswerkzeugen entspricht. Manche Game-Engines und älteren Frameworks drehen die Y-Achse um und erwarten den Ursprung unten links. Wenn Ihr Sprite auf dem Kopf erscheint, prüfen Sie den Ursprung, bevor Sie irgendetwas skalieren. Die Lösung ist meist eine einzeilige Transformation oder ein Neuerzeugen mit umgekehrter Zeilenreihenfolge, kein vollständiger Re-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 taucht in Code-Identifikatoren, Dateinamen und manchen Engine-APIs auf, weil Leerzeichen in diesen Kontexten unpraktisch sind. Suchmaschinen behandeln sie als nahezu synonym, daher finden Sie dieselbe Technik unter beiden Schreibweisen.

Der eigentliche Unterschied besteht zwischen einem Sheet und einem Atlas. Ein Sprite-Sheet ist ein gepacktes Bild ohne zwingenden Index. Ein Sprite-Atlas ist dasselbe gepackte Bild plus eine maschinenlesbare Beschreibung davon, 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 Sie Pixelkoordinaten fest codieren. Wenn Ihre Frames gleichmäßig und Ihre Schleife einfach ist, reicht ein einfaches Sheet. Wenn Sie unregelmäßige Bereiche oder benannte Zustände haben, wollen Sie einen Atlas.

• SheetEin Raster oder Streifen aus gleich großen Frames. Keine Metadaten erforderlich. Das Zerteilen ist Arithmetik.
• SpritesheetDasselbe Artefakt, als ein Wort geschrieben. Häufig in Code- und Asset-Dateinamen.
• AtlasGepackte Frames plus ein Index, der Namen oder IDs Rechtecken zuordnet. Ermöglicht Namenssuche statt Koordinatenrechnung.

Raster-Sheet vs. horizontaler Frame-Strip

Ein Raster-Sheet packt Frames in Zeilen und Spalten, damit das Bild annähernd quadratisch bleibt. 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 Zerteilen in der Engine: Sie legen Zellgröße und Frame-Anzahl fest, und die Engine läuft das Raster Zeile für Zeile durch.

Ein horizontaler Frame-Strip legt jeden Frame in eine einzige 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 Sie einem Shader, der einen Strip annimmt, ein Raster-Sheet geben, sampelt die Animation über Zeilen hinweg und wrappt auf Arten, die Sie nicht beabsichtigt haben. Wenn Sie einem Engine-Slicer, der ein Raster annimmt, einen Strip geben, behandelt er den Strip entweder als eine sehr breite Zeile oder findet überhaupt keine Zeilen.

Das Fehlerbild ist anfangs meist subtil: Die Animation läuft, aber das Timing fühlt sich falsch an oder Frames wiederholen sich in der falschen Reihenfolge. Bevor Sie die Animationslogik debuggen, prüfen Sie, ob das Layout zum Consumer passt. In unserem 3D Game Builder verwenden Sprite-basierte Charaktere ein Raster, weil die Engine das Zerteilen übernimmt; Shader-gesteuerte Effekte wie Feuer oder Wasser verwenden einen Strip, weil das Material ihn direkt sampelt.

Welches Format exportieren

PNG ist die sichere Standardwahl. Es unterstützt volles Alpha, ist verlustfrei und wird von jeder Engine und jedem Browser dekodiert. 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. Verwenden Sie WebP, wenn Dateigröße zählt und Sie prüfen können, dass die Ziel-Runtime es dekodiert. GIF ist ein Auslieferungsformat, kein Authoring-Format: Es unterstützt nur 1-Bit-Transparenz, sodass jedes halbtransparente Pixel entweder vollständig undurchsichtig oder vollständig transparent wird. Wenn Ihre Quelle weiche Kanten hat, erzeugt GIF Farbsäume daran.

Fügen Sie ein JSON-Sidecar hinzu, wenn Ihre Frames kein einfaches gleichmäßiges Raster bilden, wenn Sie benannte Zustände benötigen oder wenn der Consumer einen Atlas erwartet. Das Sidecar ist klein und erspart das Festcodieren von Koordinaten. Wenn Ihre Frames gleichmäßig sind und die Animation eine einzelne Schleife ist, können Sie es weglassen und die Engine die Rechtecke berechnen lassen. Exportieren Sie Sprites niemals als JPEG. JPEG ist verlustbehaftet und hat keinen Alpha-Kanal, 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

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

Für animierte GIFs packt der Konverter jeden Frame aus und packt ihn in ein Sheet oder einen Strip, wobei die Frame-Verzögerungen in einem Sidecar erhalten bleiben, wenn Sie eines anfordern. Für Standbilder schneidet der Konverter eine von Ihnen bereitgestellte Bildsequenz zu und ordnet sie in einem Raster an. Für Video tastet der Konverter Frames in einer gewählten Rate ab und schreibt sie in ein Sheet; Sie steuern das Abtastintervall und die Zellgröße. Wenn Sie einen Charakter für The Cyclops' Island oder ein Prop für Mini World bauen, beginnen Sie mit dem Quellformat, das Sie haben, und wählen Sie den passenden Konverter.

• GIF zu Sprite-SheetPackt ein animiertes GIF Frame für Frame aus und packt die Frames in ein Raster oder einen horizontalen Strip.
• 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 Strip.
• Agent Sprite ForgeUnser auf Sprites fokussiertes Tool zum Generieren und Packen von Charakter-Frames in Sheets, die vom 3D Game Builder verwendet werden.

Glossar

Dies sind die Begriffe, die auftauchen, wenn Sie Sprite-Sheet-Dokumentation, Engine-Einstellungen oder Shader-Code lesen. Die Definitionen sind absichtlich kurz.

• AtlasEin gepacktes Bild aus Bereichen plus ein maschinenlesbarer Index, der Namen oder IDs Rechtecken zuordnet.
• ZelleDas Rechteck in einem Sheet, das einen Frame enthält. Seine Breite und Höhe sind die Zellgröße.
• Frame-StripEin Sheet, das als einzelne horizontale Zeile von Frames angelegt ist und von Shadern und Flipbook-Texturen verwendet wird.
• FlipbookEine Textur, die im Zeitverlauf jeweils einen Bereich nach dem anderen sampelt, um eine Animation zu erzeugen, typischerweise aus einem Frame-Strip.
• IndexDie Sidecar-Daten, die Bereiche in einem Atlas benennen oder nummerieren. Ohne sie ist das Zerteilen 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, die Texture-Bleeding verhindern sollen. Padding ändert, wie viele Zellen hineinpassen.
• SpacingDer Abstand zwischen Zellen, oft synonym mit Padding verwendet, aber manchmal separat gezählt.

Betreten Sie die Welt, zu der es gehört

Ein Sprite ist eine Figur ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand anbietet: Nehmen Sie das Sheet, das Sie gerade erstellt haben, und setzen Sie 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 eine Seite veröffentlicht, die Sie spielen können.