Bild- und Video-zu-Sprite-Sheet-Konverter — PNG-Frames zu einem Spiel-Atlas

Ein Bild-zu-Sprite-Sheet-Konverter nimmt eine Folge von PNG-Frames — oder ein kurzes Video — und packt sie in einen Atlas, den du an eine Spiel-Engine übergeben kannst. Auf Neta Studio läuft die Konvertierung vollständig in deinem Browser: keine Upload-Warteschlange, kein Server-Roundtrip, keine Datei verlässt deinen Rechner. Du ziehst einen Ordner mit nummerierten PNGs oder eine einzelne MP4 hinein, legst Spalten, Zeilen, Zellgröße und Hintergrundentfernung fest und exportierst ein Sheet mit passendem JSON-Manifest.

Was tatsächlich schiefgeht, ist nicht das Packen. Es sind die Reihenfolge (frame_10 sortiert vor frame_2), das Padding (Filter tasten die benachbarte Zelle ab und erzeugen einen Saum) und die Zellgröße (ein Sheet, dessen Abmessungen nicht durch das Raster teilbar sind, sodass die letzte Spalte abgeschnitten wird). Diese Seite behandelt jeden dieser Punkte konkret, außerdem wie du Frames aus einem Video ausschneidest und wie du das Ergebnis animiert in einer echten 3D-Welt prüfst.

Bilder oder ein Video ablegen

Der erste Bildschirm hat ein Ablageziel und zwei Zweige. Legst du einen Ordner oder eine Mehrfachauswahl von PNG-, WebP- oder JPG-Frames ab, behandelt das Tool die Eingabe als geordnete Bildsequenz. Legst du eine einzelne Videodatei ab — MP4, WebM oder MOV, die der Browser dekodieren kann —, wechselt das Tool in den Extraktionszweig, in dem du eine Abtastrate wählst und es Frames über den WebCodecs-Pfad oder ersatzweise über ein verstecktes Video-Element zieht.

Beide Zweige landen im selben Editor: ein Raster aus Zellen rechts, eine Einstellungsspalte links und eine Live-Vorschau, die das Sheet an Ort und Stelle durchläuft. Bis zum Export wird nichts auf die Festplatte geschrieben. Die Dekodierung läuft bei Standbildern im Main-Thread und bei Video in einem Worker, sodass ein 4K-Clip die Oberfläche reaktionsfähig hält, eine PNG-Sequenz mit 300 Frames das Zeichnen während der Dekodierung aber kurz blockiert.

Wenn die Ablage abgelehnt wird, liegt der Grund fast immer bei einem von drei Problemen: Der Video-Codec ist in deinem Browser nicht dekodierbar (häufig bei HEVC in MOV), die Bilder haben unterschiedliche Abmessungen, oder die Frame-Anzahl überschreitet das Zellbudget für das eingestellte Raster. Das Tool nennt die fehlerhafte Datei, statt sie stillschweigend zu verwerfen.

So erstellst du ein Sprite-Sheet aus PNG-Frames

Die Reihenfolge ist die erste Entscheidung, und das Tool kann sie falsch treffen, wenn deine Dateinamen uneinheitlich sind. Der Standardvergleich zerlegt jeden Dateinamen in Text- und Zahlenfolgen und vergleicht diese, sodass walk_0001.png … walk_0048.png in der richtigen Reihenfolge landet und ebenso walk_1.png … walk_48.png. Wenn deine Frames nach Zeitstempel oder UUID benannt sind, ist die Sortierreihenfolge beliebig — benenne sie zuerst um oder ziehe sie im Thumbnail-Streifen vor dem Packen in die richtige Reihenfolge.

Gleiche die Frame-Anzahl mit dem ab, was du von der Animation erwartest. Eine 12-Frame-Idle-Schleife und ein 24-Frame-Walk-Cycle sehen im Thumbnail-Raster bei kleinen Größen identisch aus. Öffne die Vorschau, springe zur letzten Zelle und bestätige, dass es der Frame ist, der dem ersten beim erneuten Durchlauf vorausgehen sollte — das ist der Frame, an dem eine Schleife meist kaputt aussieht.

Jeder Frame muss dieselbe Breite und Höhe haben. Der Packer übernimmt die Abmessungen des ersten Bildes und lehnt jede weitere abweichende Datei ab. Wenn dein Exporter beim Zuschneiden einen 1px-Rahmen hinzugefügt oder einen Sprite mit einem anderen Ankerpunkt ausgegeben hat, sind diese Frames die Ausreißer, und sie sollten an der Quelle korrigiert werden, statt sie hier aufzufüllen.

Ein Video in ein Sprite-Sheet konvertieren

Bei der Frame-Extraktion aus Video bestimmt eine Zahl, ob das Ergebnis brauchbar ist: die Extraktionsrate. Video läuft üblicherweise mit 24, 30 oder 60 fps; Sprite-Animation braucht das selten. Ein 30-fps-Clip, der über drei Sekunden mit 30 fps abgetastet wird, ergibt 90 Zellen und einen unnötig großen Atlas. Derselbe Clip mit 12 fps abgetastet ergibt 36 Zellen und für die meisten Charakterbewegungen nicht unterscheidbare Wiedergabe.

Wähle die Extraktionsrate nach der vorgesehenen Wiedergaberate der Animation, nicht nach der Quelle. Wenn der Sprite im Spiel mit 12 fps läuft, extrahiere mit 12 fps. Wenn du das Timing später ändern willst, extrahiere mit 24 und lasse in der Engine jeden zweiten Frame weg — du behältst die Option, auf Kosten eines größeren Sheets.

Die Zellgröße ergibt sich aus den Video-Abmessungen nach jeder von dir angewendeten Skalierung. Ein 1920×1080-Clip, auf 480×270 skaliert, ergibt 480×270 große Zellen. Behalte das Seitenverhältnis der Quelle bei; eine nicht uniforme Skalierung verzerrt jeden Frame, und keine Padding-Einstellung behebt das. Wenn das Video Letterbox-Balken hat, schneide die Balken vor der Extraktion zu, statt sie danach herauszukeyen, denn ein bewegtes Motiv kann die Balkenfarbe berühren.

PNG zu Sprite: Transparenz und Padding

Behalte den Alphakanal. Die meisten gemeldeten Packprobleme gehen auf einen Konverter zurück, der RGBA beim Export auf RGB reduziert hat, wodurch jedes transparente Pixel je nach Canvas-Füllung schwarz oder weiß wird. Bei diesem Tool wird die Export-Leinwand ohne undurchsichtigen Hintergrund erstellt, sodass ein gekeytes oder bereits gekeytes PNG sein Alpha durch das Packen hindurch behält.

Padding existiert, weil Texturfilterung außerhalb der Zelle abtastet. Am Rand eines Sprites liest ein bilinearer oder trilinearer Filter die Pixel der benachbarten Zelle und mischt sie ein, was einen 1px-Saum erzeugt, dessen Farbe sich danach ändert, welcher Sprite daneben liegt. Ein 2px transparenter Rand um jede Zelle hindert den Filter daran, nach außen zu greifen. Padding-Werte werden ins Manifest geschrieben, sodass die Engine die UVs beim Lesen des Atlas um das Padding versetzen kann.

Sheet-Abmessungen als Zweierpotenz sind von den meisten Engines nicht mehr erforderlich, helfen aber weiterhin auf Hardware und in älteren Pipelines, die sie voraussetzen. Lege Spalten und Zeilen so fest, dass (Zelle + 2 × Padding) × Spalten und (Zelle + 2 × Padding) × Zeilen auf 256, 512, 1024, 2048 oder 4096 landen. Wenn dein Raster nicht gleichmäßig aufgeht, wird die letzte Zeile oder Spalte abgeschnitten oder mit leerem Raum gefüllt — das Tool zeigt die endgültigen Sheet-Abmessungen live an, sodass du das vor dem Export siehst.

Automatische Zellgrößenerkennung

Das Tool liest die Zellgröße aus der Quelle. Bei einer Bildsequenz nimmt es die Abmessungen des ersten dekodierten Frames; bei einem Video die Ausgabe-Abmessungen nach der Skalierung. Dieser Wert wird im Feld für die Zellgröße vorausgefüllt und zur Berechnung des Standardrasters verwendet, sodass ein Ordner mit 64×64-Frames mit 64×64-Zellen geöffnet wird.

Überschreibe ihn, wenn der transparente Rand um dein Motiv größer ist als das Motiv. Ein Sprite, das mit großzügigem Padding exportiert wurde, erzeugt Zellen, die überwiegend leer sind, und der Atlas ist größer als nötig. Die Trim-Einstellung findet die Bounding-Box der nicht transparenten Pixel über alle Frames hinweg und schneidet auf die Vereinigung zu — nicht pro Frame, denn Zuschneiden pro Frame lässt den Sprite bei der Animation zittern.

Überschreibe ihn umgekehrt, wenn die Frames uneinheitlich sind. Wenn die Sequenz 64×64 und 66×66 mischt, weil ein Exportdurchlauf eine Kontur hinzugefügt hat, rastet die Zellgrößenerkennung auf die erste Datei ein und der Rest wird skaliert oder abgelehnt. Korrigiere die Quelle. Es gibt keine Zellgröße, die unpassende Frames korrekt macht.

In 3D animiert ansehen

Ein Sprite-Sheet ist nur korrekt, wenn es abspielt. The Cyclops' Island ist eine spielbare Welt auf Neta Studio, die Charaktere im Sprite-Stil verwendet, und der schnellste Weg, einen Atlas in Bewegung zu prüfen — lasse eine Figur herumlaufen, beobachte den Schleifenpunkt und sieh, ob die Padding-Säume sichtbar werden, wenn die Kamera zurückfährt und Filterung einsetzt.

Wenn du den Test lieber selbst baust, kannst du im 3D Game Builder das exportierte PNG und sein Manifest in eine Szene legen und den UV-Versatz über einen Timer steuern. Stelle die Frame-Zeit auf die von dir gewählte Extraktionsrate ein, und die Animation läuft mit der vorgesehenen Geschwindigkeit. Wenn es hier falsch aussieht, wird es in deiner Engine falsch aussehen, und die Ursache ist fast immer der Zell- oder Padding-Wert im Manifest.

Mini World ist die kleinere Sandbox, wenn du nur eine flache Ebene mit dem Sheet darauf und eine umkreisbare Kamera willst, was oft reicht, um einen schlechten Key am Sprite-Rand zu erkennen.

Weitere kostenlose Tools

Der Konverter steht neben drei Tools, die denselben Editor und dasselbe Exportformat verwenden. Ein Sheet, das in einem erstellt wurde, öffnet sich in einem anderen ohne Konvertierung.

GIF zu Sprite-Sheet nimmt ein animiertes GIF und extrahiert seine Frames. GIF-Frame-Verzögerungen sind pro Frame unterschiedlich, daher liest das Tool sie aus und meldet die effektive Wiedergaberate des Sheets, statt eine konstante anzunehmen. Sprite-Sheet zu GIF läuft in die andere Richtung: Wähle einen Zeitbereich über die Zellen und exportiere ein animiertes GIF mit einer gewählten Frame-Verzögerung, nützlich, um eine Schleife zu teilen, ohne ein PNG auszuliefern. Der Sprite-Animator nimmt ein Sheet und ein Manifest und spielt es in einer Leinwand mit Reglern für Geschwindigkeit, Richtung und Schleife ab, sodass du das Frame-Timing prüfen kannst, bevor du dich auf eine Engine festlegst.

Jedes Tool exportiert dieselbe Manifest-Form. Zellbreite, Zellhöhe, Spalten, Zeilen, Padding und die geordnete Frame-Liste — sodass ein Sheet, das im Video-Extraktor beginnt und im Animator endet, dieselben Zahlen durchgängig mitführt.

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 jemand 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.