Ein Spritesheet ist nur die halbe Arbeit. Die Engine muss auch wissen, wo jeder Frame liegt und wie lange er dauert. Dieser Maker packt deine Frames in ein Raster, einen Streifen oder einen engen Atlas und schreibt diese Daten in den Formaten, die Engines wirklich importieren: TexturePacker/Phaser JSON, Aseprite JSON, eine Godot 4 SpriteFrames-Ressource, CSS und Unity-Slicing-Einstellungen. Die Frames werden so sortiert, wie du sie nummerieren würdest, walk_10 kommt also nach walk_9.
Anleitung: Spritesheet-Maker
- Zieh alle Frame-PNGs auf einmal hierher. Sie werden natürlich nach Namen sortiert. Du kannst jederzeit weitere hinzufügen.
- Sortier mit den Pfeilen um, entferne verirrte Frames oder kehr die Reihenfolge um.
- Wähl ein Layout: Raster (automatische oder feste Spalten), eine einzelne Zeile, eine einzelne Spalte oder Eng packen mit abgeschnittenen transparenten Rändern.
- Leg Padding zwischen den Frames, einen Außenrand und Kanten-Extrusion fest. Aktivier Zweierpotenz, wenn deine Zielplattform Texturen mit 64, 128, 256 px braucht.
- Prüf die Animation in der Vorschau und stell die FPS ein.
- Lade das PNG und eine Datendatei herunter oder ein ZIP mit dem PNG und allen Formaten.
Was du bekommst
- PNG-Sheet mit Transparenz, genau wie in der Vorschau.
- Phaser / TexturePacker JSON (Hash und Array), inklusive Trim-Versatz, damit eng gepackte Frames trotzdem bündig sitzen.
- Aseprite JSON mit Frame-Tag und Dauern.
- Godot 4 SpriteFrames .tres mit AtlasTextures, bereit für AnimatedSprite2D.
- CSS-Sprites mit einer Klasse pro Frame und gestufter Animation, dazu Import- und Slicing-Einstellungen für Unity.
Zu welchen Engines es passt
- Phaser 3:
this.load.atlas(key, 'sheet.png', 'sheet.json'), dann die Animation aus den Frame-Namen erstellen. - Godot 4: Leg die .tres neben das PNG und weise sie den Sprite Frames eines AnimatedSprite2D zu.
- Unity: Raster-Layouts slicest du mit Grid By Cell Size anhand der Werte aus der Einstellungsdatei. Nutze Point-Filterung und keine Kompression.
- PixiJS, Defold, Cocos, Construct: lesen TexturePacker JSON (Hash) direkt oder über ihre Importer.
Tipps aus der Spieleentwicklung damit
- Nimm für Figurenanimationen Raster mit einheitlichen Frames. Grid-Slicer und Onion-Skin-Tools von Engines erwarten das.
- Nimm Eng packen mit Trim für Item- und UI-Atlanten mit vielen unterschiedlich großen Bildern.
- Füg 1–2 px Extrusion hinzu, wenn das Sheet mit einem nicht ganzzahligen Faktor skaliert oder gemipmappt wird. So bluten benachbarte Frames an den Kanten nicht hinein.
- Gib den Frames sinnvolle Namen (hero_walk_00…). Sie werden zu den Frame-Keys im JSON.
Anwendungsfälle
- Aus Aseprite, Blender oder Spine exportierte Frames in eine einzige Textur packen.
- Einen UI- oder Item-Atlas für ein Webgame bauen.
- KI-generierte Frames in ein Sheet verwandeln, das deine Engine animieren kann.
- Eine CSS-Sprite-Animation für eine Landingpage machen.
FAQ
Welche Datenformate exportiert es?
TexturePacker JSON als Hash und Array (lesen Phaser, PixiJS und viele Engines), Aseprite JSON, eine Godot 4 SpriteFrames .tres, CSS-Sprite-Klassen mit Keyframes und eine Textdatei mit Import- und Slicing-Einstellungen für Unity.
Was macht Eng packen?
Es schneidet den transparenten Rand jedes Frames ab und packt die beschnittenen Frames nach Höhe sortiert in Zeilen, probiert dabei mehrere Breiten und behält das kleinste Sheet. Das JSON speichert die ursprüngliche Größe und den Versatz jedes Frames, damit er an der richtigen Stelle gerendert wird.
Was ist Kanten-Extrusion?
Extrusion kopiert die äußerste Pixelreihe jedes Frames um 1–4 px nach außen. Tastet eine GPU knapp außerhalb eines Frames ab (Filterung, Mipmaps, nicht ganzzahliger Zoom), liest sie so die eigene Kante des Frames statt eines Nachbarn.
Meine Frames sind unterschiedlich groß. Was passiert dann?
In den Layouts Raster, Zeile und Spalte ist jede Zelle so groß wie der größte Frame, und kleinere Frames werden unten mittig, mittig oder oben links ausgerichtet. Eng packen behält für jeden Frame seine eigene Größe.
Gibt es ein Frame-Limit?
Kein festes. Alles läuft in deinem Browser, die praktische Grenze ist also der Arbeitsspeicher deines Geräts. Hunderte Frames mit 64 px sind kein Problem.
Werden meine Bilder hochgeladen?
Nein. Die Frames werden lokal gelesen und gepackt. Nichts wird an einen Server geschickt.