3BearLabs3Bear Tools
Bilder

Sprite-Normalisierer: Sprite-Sheets neu packen

Wandle ein ungleichmäßiges Sprite-Sheet in ein einheitliches Raster um, mit einer JSON-Datei, die jeden Frame beschreibt.

Läuft im Browser – Dateien verlassen dieses Gerät nicht.

So funktioniert es

  1. Lade ein Sprite-Sheet mit transparentem Hintergrund.
  2. Warte, bis die Sprite-Erkennung fertig ist, und prüfe dann die Sprite-Anzahl, die Rastergröße und die Zellengröße über den Vorschauen.
  3. Vergleiche das Original mit dem neu gepackten Sheet und lade dann das PNG und die JSON-Datei herunter.

Von Hand gezeichnete oder exportierte Sprite-Sheets haben oft Frames unterschiedlicher Größe mit ungleichmäßigem Abstand, was das Zerschneiden mühsam macht. Dieses Tool findet jedes Sprite anhand des Alphakanals und braucht daher einen transparenten Hintergrund. Ein Pixel zählt als Teil eines Sprites, wenn sein Alphawert über einer kleinen Schwelle liegt. Das Sheet wird nach Zeilen von Sprites durchsucht, dann nach Sprites innerhalb jeder Zeile, und winzige verirrte Teile werden herausgefiltert, wenn ihre Fläche deutlich kleiner ist als das typische Sprite.

Die Sprites werden dann in ein Raster gleich großer Zellen kopiert. Das Raster ist im Layout ungefähr quadratisch, wobei Zellenbreite und -höhe auf das größte gefundene Sprite gesetzt werden. Jedes Sprite wird am linken Rand seiner Zelle platziert und vertikal zentriert. Das Tool zeigt, wie viele Sprites es gefunden hat, das Raster als Spalten mal Zeilen und die Zellengröße in Pixeln, neben dem Original- und dem neu gepackten Bild.

Du erhältst zwei Downloads. Das PNG ist das neu gepackte Sheet. Die JSON-Datei listet jeden Frame mit Namen auf, mit seiner Position und Größe im neuen Sheet, der Quellgröße, dem Versatz des Sprites innerhalb seiner Zelle und einem Pivot von 0 und 0,5. Die Namen bestehen aus deinem Dateinamen plus einem dreistelligen Index.

Wird nichts erkannt, fordert dich die Seite auf, ein Bild mit transparentem Hintergrund zu verwenden. Erkennung und Neupacken erfolgen in deinem Browser, und das Bild wird nicht hochgeladen.

Häufige Fragen

Warum wurden keine Sprites erkannt?

Die Erkennung beruht auf Transparenz. Hat dein Sheet einen einfarbigen Hintergrund, entferne ihn zuerst, zum Beispiel mit dem Hintergrund-Entferner.

In welcher Reihenfolge werden die Sprites gepackt?

In Leserichtung: Zeile für Zeile von oben und innerhalb jeder Zeile von links nach rechts.

Was steht in der JSON-Datei?

Ein frames-Objekt mit dem Rechteck, der Quellgröße, dem Sprite-Versatz und dem Pivot jedes Frames sowie einem kleinen meta-Abschnitt.

Werden die Sprites in der Größe geändert?

Nein. Jedes Sprite behält seine Pixelgröße. Nur Abstand und Position ändern sich.

Wird das Sheet irgendwohin hochgeladen?

Nein. Alles läuft in deinem Browser.

Verwandte Tools