Sprite-Sheet oder PNG-Sequenz für 2D-Spiele: Was exportieren?

Beide können dieselbe transparente Animation erhalten, verpacken sie aber für unterschiedliche Aufgaben. Für Echtzeit-2D-Spiele beginne mit Sprite-Sheet plus Metadaten, wenn der Atlas zur Hardware passt und der Importer Frame-Rechtecke versteht. Behalte eine PNG-Sequenz, wenn du Frames unabhängig prüfen, bearbeiten, ersetzen, archivieren oder verarbeiten musst.

Keine Wahl ist automatisch speichersparender, in jeder Engine schneller oder überall kompatibler. Für einen konkreten Vergleich nutzten wir dieselbe öffentliche AnimGen-Animation: 96 RGBA-Frames mit je 512 × 512 für einen viersekündigen Taktikerhieb bei 24 FPS.

Nach Workflowstufe wählen

Oft ist beides am robustesten: Einzelbilder als prüfbare Quelle, ein oder mehrere Sheets als zielabhängige Laufzeit-Assets.

Eine Animation, zwei echte Pakete

Der Test verwendet denselben isometrischen Taktikerhieb wie unser Transparenzformatvergleich. Beide enthalten dieselben 96 Leinwände in gleicher Reihenfolge. Das Sheet ist ein festes 10 × 10 Raster mit 96 belegten und vier leeren transparenten Zellen. JSON nennt 96 Rechtecke von je 512 × 512; alle Einträge sind ungedreht und unbeschnitten.

Alle Testdateien:

• 5120 × 5120 Sprite-Sheet-PNG herunterladen
• Passendes Frame-Layout-JSON öffnen
• 96-Frame-PNG-ZIP herunterladen
• Maschinenlesbare Messungen und SHA-256-Hashes öffnen

Vor Vergleich decodierten wir beide Darstellungen. Alpha stimmte über alle 96 Frames exakt überein; RGB ebenfalls, wo Quell-Alpha größer 8 war. Vollständig transparentes RGB wurde ausgeschlossen, weil es das zusammengesetzte Bild nicht verändert und beim Packen normalisiert werden kann.

„Dieselbe Animation“ sollte mehr als ähnliche Miniaturbilder bedeuten. Diese Prüfung bestätigt, dass wir Verpackung und nicht zwei visuell verschiedene Exporte vergleichen.

Gemessene Downloadgröße und Dateizahl

Für dieses Beispiel:

Das ZIP enthält 96 PNGs und eine README. Seine Einträge summieren sich unkomprimiert auf 14.550.491 Bytes; ZIP spart nur etwa 0,9 %, da PNG bereits komprimiert ist. Das Sheet-Paket ist in diesem Test 54,44 % kleiner.

Das ist kein universelles Kompressionsverhältnis. Transparente Fläche, wiederholte Pixel, Details, Maße, Raster, PNG-Encoder und ZIP-Einstellungen beeinflussen das Ergebnis. Ein Sheet kann ähnliche/leere Bereiche effizient komprimieren; andere Animationen liefern andere Resultate. Messgrafiken behalten ihre englischen Originalbeschriftungen.

Außerdem ist das ZIP trotz 97 entpackter Dateien nur ein Netzwerkdownload. Viele Dateien beeinflussen Entpacken, Versionskontrolle, Editor und Laufzeit, bedeuten als Archiv aber nicht zwingend 97 HTTP-Anfragen.

Kleinerer Download garantiert keinen geringeren Speicherverbrauch

PNG-Größe beschreibt komprimierten Speicher/Transfer. Renderer decodieren Pixel; Engines können danach Plattformkompression, Mipmaps, Padding oder andere interne Formate anwenden.

Als einfache RGBA8-Basis:

• 5120 × 5120 enthält 26.214.400 Pixel, bei vier Bytes genau 100 MiB;
• 96 einzelne 512 × 512 Frames enthalten 25.165.824 Pixel, genau 96 MiB, wenn alle gleichzeitig decodiert geladen sind;
• vier ungenutzte 512 × 512 Zellen erklären die 4 MiB Differenz.

Das bedeutet nicht, dass PNG-Sequenzen immer 96 MiB brauchen. Ein Werkzeug kann einzeln laden, Teile streamen, decodierte Bilder verwerfen oder beim Build neu packen. Umgekehrt kann eine Engine alle Frames behalten. Messe den Zielbuild statt Downloadgröße mit GPU-Speicher gleichzusetzen.

Ein Atlas erleichtert möglicherweise Batching durch gemeinsame Textur, garantiert aber keinen einzelnen Draw Call. Materialien, Blend-Zustand, Sortierung, Shader, Rendererregeln und andere Zustandswechsel zählen weiterhin.

Maximale Texturgröße beachten

Das gemessene Sheet ist 5120 × 5120. Als PNG ist das gültig, überschreitet aber die konservative 4096 × 4096 Basis für breite Mobil-/WebGL-Kompatibilität.

Godots Texturgrößenhinweise empfehlen für breite Kompatibilität maximal 4096 × 4096 und nennen dies als typisches Mobil-GPU-Limit. MDNs WebGL-Empfehlungen behandeln 4096 ebenfalls als breite Basis, während Desktopgeräte erheblich mehr erlauben können.

Das ist eine Kompatibilitätsbasis, keine allgemeine Obergrenze. Unity liefert Hardwarelimits über SystemInfo.maxTextureSize, WebGL über den aktiven Kontext:

const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);

Für genau diese 96 Frames mit 512er-Zellen passen unter 4096:

• ein 8 × 8 Sheet mit 64 Frames bei 4096 × 4096;
• ein 8 × 4 Sheet mit 32 Frames bei 4096 × 2048.

Metadaten müssen dann die Textur je Frame nennen. Skaliere nicht einfach den 5120er-Atlas mit unveränderten 512er-Rechtecken; das ändert Zellen und macht Koordinaten ungültig. Alternativen sind kleinere Frames, weniger Frames oder ein Engine-Paket mit zielgerechter Packung.

Was Metadaten beitragen

Ein nacktes Sheet erklärt seine Wiedergabe nicht. Mindestens Rechtecke und Reihenfolge sind nötig, gegebenenfalls Dauer, Animationsnamen, Loop, Quellleinwand, Drehpunkt, Versatz und Texturdateinamen.

Das verwendete öffentliche JSON liefert:

• Schlüssel frame_0000.png bis frame_0095.png;
• x, y, w, h je Frame;
• Quell- und Sprite-Quellgrößen;
• ganzzahlige 42 ms Dauer pro Frame;
• tactician_slash-Tag für Frames 0–95;
• Sheet-Größe und RGBA8888-Format.

42 ms ist eine ganzzahlige Näherung von 24 FPS. Bei exakter Synchronisierung nutze maßgebliche FPS-/Dauerangaben des Exportmanifests, statt gerundete Einzelwerte über lange Sequenzen als exakt zu behandeln.

Das PNG-ZIP enthält geordnete Namen und eine README mit 24 FPS, fester Leinwandausrichtung und empfohlenem unteren mittleren Drehpunkt. PNGs selbst speichern weder Animationsreihenfolge noch FPS, Loop oder Spielzustand. Bewahre Begleitdaten mit der Sequenz.

Deshalb ist Sheet versus Sequenz auch eine Metadatenentscheidung, nicht nur ein Bildformatvergleich.

Sprite-Sheet und Texturatlas sind verwandt, nicht immer identisch

Die Begriffe werden oft gleichgesetzt; eine hilfreiche Unterscheidung:

• Ein Sprite-Sheet nutzt oft einen vorhersehbaren Streifen oder ein Raster von Animationsframes.
• Ein Texturatlas kann unterschiedliche Sprites kombinieren, transparente Ränder beschneiden, Regionen drehen und unregelmäßige Rechtecke eng packen.

Dieser Test nutzt ein regelmäßiges Sheet ohne Beschnitt oder Drehung. Jeder Frame bleibt 512 × 512. Das verschwendet einige transparente Pixel, vereinfacht aber Ausrichtung und unteren mittleren Drehpunkt.

Ein engerer Atlas spart Raum; der Importer muss aber Quellgrößenversatz, Beschnitt, Drehung, Padding und Randextrusion beachten. Sonst springt die Figur, Nachbarzellen werden abgetastet oder Nähte entstehen. Wähle die kompakteste vom echten Importer korrekt reproduzierbare Struktur, nicht den kompaktesten Screenshot.

Wann ein Sprite-Sheet besser passt

Wähle Sheet plus JSON oder Engine-Paket, wenn:

• Frames für Echtzeit-2D bestimmt sind;
• der Atlas innerhalb getesteter Limits bleibt;
• der Importer Rechtecke und Timing versteht;
• Frames gewöhnlich gemeinsam geladen/verwendet werden;
• gemeinsame Textur Batching und Assetverwaltung hilft;
• das Paket schwerer versehentlich getrennt oder umgeordnet werden soll.

Der Godot-4-Praxistest validiert ein laufzeitnahes Paket mit kleineren Zellen, SpriteFrames, Timing, Drehpunkt und echter Wiedergabe. Wegen anderer 96 × 96 Frame-Maße steht es bewusst nicht in der Größentabelle.

Wann eine PNG-Sequenz besser passt

Wähle PNGs, wenn:

• einzelne Frames retuschiert/ersetzt werden;
• Compositor, Encoder oder eigene Pipeline nummerierte Bilder erwartet;
• eine verlustfreie Quelle für WebM, ProRes, Sheets oder Engine-Pakete gebraucht wird;
• die gesamte Animation sichere Texturmaße überschreitet;
• die Laufzeit nur aktuell benötigte Frames/Aktionen laden kann;
• du Quelle, Packung, Import, Filterung oder Wiedergabe als Fehlerursache untersuchst.

Einzelfiles lassen sich bei einer Frame-Änderung auch leichter in der Versionskontrolle vergleichen. Dafür müssen Namen, Timing, Leinwand und Drehpunkt synchron bleiben; manche Engines packen sie beim Import ohnehin neu.

Videoschnitt und Weblieferung haben andere Kriterien. Der WebM-/ProRes-/PNG-Vergleich prüft sie mit derselben Quellanimation.

Ein praktischer Exportablauf

Für Spiele:

1. Nützlichen Bereich vor Verpackung auswählen und prüfen.
2. Einzelne PNGs als Prüf-/Produktionsquelle exportieren.
3. Alpha, feste Leinwand, Reihenfolge, FPS und Drehpunkt bestätigen.
4. Maximale Zieltexturgröße und Ausgabeauflösung wählen.
5. Ein Sheet, mehrere Sheets oder zielgerechtes Engine-Paket erstellen.
6. In kleiner Szene Timing, Filter, Kanten, Drehpunkt und Loop-Enden prüfen.
7. Frame-Sequenz, JSON, Manifest und getestetes Laufzeitpaket getrennt bewahren.

AnimGens Sprite-Sheet-Ersteller startet aus generierter Bewegung oder unterstütztem Video, erlaubt Bereich/Frame-Anzahl und exportiert PNGs, Sheet mit JSON oder Engine-Pakete. Die Formatreferenz nennt genaue Inhalte; aktuelle Preise und Exportzugang bestimmen kostenlose und bezahlte Berechtigungen.

Nutze PNGs für unabhängige Frame-Arbeit und Sheets für getestete Laufzeiten mit gemeinsamer Textur und verlässlichen Metadaten. Behalte beides für unterschiedliche Produktionsstufen.