Sprite-Sheet-Generator

Alles läuft im Browser ab — deine Bilder werden nie auf einen Server hochgeladen.

Was sind Sprite-Sheets?

Ein Sprite-Sheet ist eine einzelne Bilddatei, die mehrere kleinere Bilder (Frames) in einem Raster angeordnet enthält – häufig in der Spieleentwicklung und Animation verwendet, da das Laden eines einzigen kombinierten Bildes effizienter ist als das Laden vieler separater Dateien und Frame-für-Frame-Animation vereinfacht. Dieses Tool kombiniert mehrere hochgeladene, gleich große Bilder zu einem einzigen Sprite-Sheet, lässt dich die Spaltenzahl und den Abstand festlegen und ermöglicht anschließend den Download sowohl des kombinierten Bildes als auch einer JSON-Datei mit den Koordinaten jedes Frames.

So werden Sheet und Frame-Daten erzeugt

Die Bilder werden von links nach rechts angeordnet und springen entsprechend deiner gewählten Spaltenzahl in eine neue Zeile, wobei jedes an seiner berechneten Rasterposition auf ein gemeinsames Canvas gezeichnet wird, mit dem von dir angegebenen Abstand zwischen den Frames. Haben deine hochgeladenen Bilder unterschiedliche Größen, richtet das Tool sie innerhalb einer Zelle aus, die auf das größte Bild dimensioniert ist, um Überlappungen zu vermeiden. Die herunterladbare JSON-Datei erfasst die x/y-Position und Breite/Höhe jedes Frames im fertigen Sheet, was Spiele-Engines und Animationstools üblicherweise nutzen, um zu wissen, wo sie beim Abspielen jeden Frame „ausschneiden“ müssen.

Häufig gestellte Fragen

Warum brauche ich die JSON-Koordinatendatei und nicht nur das Bild?
Das kombinierte PNG allein sagt einer Spiele-Engine oder Animationsbibliothek nicht, wo ein Frame endet und der nächste beginnt – die JSON-Datei liefert diese exakten Pixelkoordinaten, wodurch Software das Sheet beim Abspielen korrekt wieder in einzelne Animations-Frames zerlegen kann.
Was passiert, wenn meine hochgeladenen Bilder nicht alle gleich groß sind?
Das Tool funktioniert trotzdem, aber jede Rasterzelle wird an das größte hochgeladene Bild angepasst, sodass kleinere Bilder innerhalb ihrer Zelle zusätzlichen leeren Raum um sich herum haben, statt gestreckt oder zugeschnitten zu werden, um zu passen.
Kann ich die Reihenfolge der Frames nach dem Hochladen ändern?
Ja – du kannst jede Miniaturansicht mit den Umordnungssteuerungen früher oder später in der Sequenz verschieben oder einzelne Bilder entfernen, bevor du das endgültige Sprite-Sheet erzeugst, da die Frame-Reihenfolge normalerweise für den Ablauf einer Animation entscheidend ist.