Beschnittene Aseprite-Einzelbilder aus einem Sprite-Sheet und JSON wiederherstellen
Ein platzsparend gepacktes Aseprite-Sheet spart Texturfläche, indem leere Pixel um jede Pose herum abgeschnitten werden. Schneidest du diese Rechtecke ohne Berücksichtigung ihrer Position aus, springt die Figur hin und her, weil jeder Ausschnitt einen anderen Ursprung hat. Die zugehörige JSON liefert die fehlenden Zuordnungsdaten für die Rückkehr zur ursprünglichen Arbeitsfläche.
Zwei Dateien aus derselben Aseprite-Sitzung exportieren
- Öffne die Animation in Aseprite und verwende File → Export Sprite Sheet. Exportiere ein PNG-Sprite-Sheet und aktiviere die Ausgabe der JSON-Daten. Der ImageMint-Entpacker akzeptiert sowohl die JSON-Hash- als auch die JSON-Array-Form.
- Bewahre Sprite-Sheet und JSON gemeinsam auf. Eine JSON-Datei aus einem früheren Export kann auf Rechtecke verweisen, die nicht mehr zum Sprite-Sheet passen, selbst wenn beide Dateien ähnliche Namen haben.
- Wenn du Beschneiden oder ein gepacktes Layout aktivierst, behalte die JSON-Datei. Ein einfaches Schneidewerkzeug für gleich große Zellen kann die ursprüngliche Position unterschiedlich beschnittener Einzelbilder nicht allein aus dem Sprite-Sheet ableiten.
- Lade das exportierte Sheet und die JSON-Datei in den Entpacker. Prüfe mehrere Posen in der Vorschau, bevor du die ZIP-Datei herunterlädst. Verlasse dich nicht nur auf das erste Einzelbild.
Drei Rechtecke, drei unterschiedliche Aufgaben
Betrachte eine Figur auf einer Arbeitsfläche mit 64 × 64 Pixeln. Eine beschnittene Pose belegt ein Rechteck mit 22 × 38 Pixeln, das 19 Pixel vom linken und 20 Pixel vom oberen Rand der ursprünglichen Arbeitsfläche entfernt liegt. Beim Packen kann dieser Zuschnitt im exportierten Sprite-Sheet bei x=128, y=0 landen. Die JSON-Datei benötigt alle drei Angaben:
| JSON-Feld | Beispiel | Was es bedeutet |
|---|---|---|
frame | x=128, y=0, w=22, h=38 | Wo die Pixel aus dem exportierten Sheet ausgeschnitten werden. |
spriteSourceSize | x=19, y=20, w=22, h=38 | Wo dieser Ausschnitt auf der ursprünglichen Einzelbild-Arbeitsfläche platziert wird. |
sourceSize | w=64, h=64 | Die vollständige Arbeitsflächengröße, die wiederhergestellt werden soll. |
Der Entpacker erzeugt ein transparentes Einzelbild mit 64 × 64, kopiert den 22 × 38 großen Ausschnitt aus dem Sheet und zeichnet ihn bei (19, 20). Wird das für jede Pose wiederholt, bleibt die Grundlinie der Figur erhalten. Diese Feldfunktionen entsprechen Aseprites Dokumentation zum Sprite-Sheet-/JSON-Export; die genauen Positionen stammen aus deiner eigenen JSON-Datei.
Was du in der heruntergeladenen ZIP-Datei prüfen solltest
Jedes wiederhergestellte Einzelbild ist eine nummerierte PNG-Datei. manifest.json listet die Namen der Quell-Einzelbilder, Anzeigedauern in Millisekunden, Abmessungen und Einzelbild-Tags. Öffne eine Leerlaufpose und die extremste Angriffspose nebeneinander. Die Arbeitsflächen sollten gleich groß sein, und die Füße oder der gewählte Bezugspunkt sollten stabil bleiben. Springt die Wiedergabe weiterhin, können die Zeichnungen im ursprünglichen Aseprite-Projekt uneinheitlich ausgerichtet sein. Die Wiederherstellung von Beschnittversätzen behebt dieses Grafikproblem nicht.
.aseprite Dateien oder gedreht gepackte Einzelbilder. Unterstützt werden bis zu 100 Einzelbilder, 1024 Pixel pro Seite eines wiederhergestellten Einzelbilds und insgesamt 20 Millionen Einzelbildpixel. Bei einem Drehungsfehler exportiere ohne Drehung und versuche es erneut.Wenn du nur gleichmäßig verteilte Zellen brauchst, ist der normale Sprite-Sheet-Schneidewerkzeug ist einfacher. Nutze JSON-Wiederherstellung, wenn Packen oder Beschnitt das gleichmäßige Raster zerstört haben.
Ein passendes Dateipaar untersuchen, das trotzdem falsch aussieht
| Symptom | Erste Prüfung | Sichere Korrektur |
|---|---|---|
| meta.size stimmt nicht überein | Wurde das Sheet nach dem Export skaliert? | Exportiere beide Dateien erneut aus demselben Projekt. |
| Falsche Pose erscheint in einem Einzelbild | Stammt die JSON-Datei aus einem anderen Packdurchgang? | Ersetze das Dateipaar, auch wenn die Abmessungen übereinstimmen. |
| Die Arbeitsfläche stimmt, aber die Figur verschiebt sich | Vergleiche die ursprünglichen Aseprite-Posen. | Korrigiere die Quellausrichtung; lösche keine Beschnittversätze. |
| Drehungsfehler | War die Drehung beim Packen aktiviert? | Exportiere nicht gedrehte Einzelbilder. |
Ein passender Dateiname ist keine Validierung. Auch übereinstimmende Abmessungen allein beweisen nicht, dass die Zuschnittkoordinaten das hochgeladene Bild beschreiben. Zwei Atlanten können gleich groß sein und die Posen dennoch unterschiedlich anordnen. Prüfe eine markante Pose, etwa einen Angriff mit ausgestreckter Waffe, statt nur ein nahezu identisches Ruhebild zu beurteilen.
Zeitangaben und Tags in die nächste Anwendung übernehmen
Ein Einzelbild mit einer Dauer von 200 ms sollte länger stehen bleiben als eines mit 80 ms. Wiederhergestellte PNGs enthalten die Pixel, während manifest.json durationMs und Frame-Tags enthält. Behalte beides. Wenn du die PNGs in einem Player mit einheitlicher Bildrate testest, ist ein anderer Rhythmus zu erwarten, selbst bei perfekter Platzierung.
Tags kennzeichnen Bereiche wie Leerlauf und Gehen. Einen Tag zu erhalten ist aber nicht dasselbe wie das Einrichten eines Animationszustands in einer Engine. Prüfe die Bereiche und die Wiedergaberichtung in der Zielanwendung. Die ImageMint-Vorschau hilft bei der Ausrichtung; sie exportiert nicht automatisch den Animationscontroller deiner Engine.
Arbeitsablauf ausprobieren
Lade das Sprite-Sheet und seine passende JSON-Datei, um ausgerichtete Einzelbilder in der Vorschau zu sehen und PNGs in voller Größe herunterzuladen.
Aseprite-Einzelbilder wiederherstellen →