Sprite Sheet Cutter: Sprite Sheets in einzelne Frames schneiden
Kurz gesagt
Der Grab3D Sprite Sheet Cutter schneidet ein Sprite Sheet direkt im Browser in einzelne PNG-Frames. Geschnitten wird nach Raster mit Spalten und Zeilen oder Zellgröße, Rand und Abstand. Alternativ findet die automatische Erkennung unregelmäßig verteilte Sprites auf transparentem oder einfarbigem Hintergrund. Heraus kommen eine ZIP mit PNGs, eine JSON mit den Frame-Koordinaten und ein animiertes GIF. Nichts wird hochgeladen.
- Eingabe
- PNG, WebP, GIF, JPEG, BMP
- Modi
- Raster, automatische Erkennung
- Export
- PNG-ZIP, einzelne PNGs, JSON, GIF, WebP
- Datenschutz
- Läuft im Browser, kein Upload
- Preis
- Kostenlos, ohne Konto, ohne Wasserzeichen
Sprite Sheet ablegen oder ein Beispiel ausprobieren
Frame anklicken, um ihn auszulassen. Ziehen verschiebt, Mausrad oder + und − zoomen, 0 passt ein, Pfeiltasten bewegen.Frame antippen, um ihn auszulassen. Mit einem Finger verschieben, mit zwei Fingern zoomen.
Frames
So wird ein Sprite Sheet in PNG-Frames geteilt
- Das Sprite Sheet auf die Seite ziehen, als Datei wählen oder mit Strg+V einfügen. Das Bild wird auf dem eigenen Gerät gelesen und nie hochgeladen.
- Den Hintergrund prüfen. Transparenz oder die häufigste Randfarbe erkennt das Tool selbst. Bei einer Volltonfarbe lässt sie sich mit der Pipette aufnehmen und die Toleranz einstellen.
- Im Rastermodus eines der vorgeschlagenen Raster übernehmen oder Spalten und Zeilen bzw. die Zellgröße eingeben. Hat das Sheet einen Rand oben und links oder Abstände zwischen den Zellen, kommen diese Werte dazu.
- Für Sheets ohne Raster auf automatische Erkennung umschalten. Jedes einzelne Sprite bekommt einen eigenen Rahmen. Zerfällt ein Sprite in Teile, hilft ein größerer Wert bei „Zusammenfassen bis“, gegen Staubpixel die Mindestgröße.
- Frames im Sheet oder in der Liste anklicken, um sie auszulassen, die Animationsvorschau prüfen und Zuschnitt, Polsterung und Skalierung festlegen.
- Eine ZIP mit allen PNG-Frames und der JSON laden, einzelne PNGs speichern oder die Animation als GIF oder WebP exportieren.
Was ist ein Sprite Sheet?
Ein Sprite Sheet ist ein einzelnes Bild mit vielen kleineren Bildern, etwa allen Frames eines Laufzyklus, den Blickrichtungen einer Figur oder einem Satz Items. Spiele laden so eine Textur statt dutzender Dateien, das ist schneller und hält zusammengehörige Grafiken beisammen.
Viele Tools und Engines erwarten die Frames aber als einzelne Dateien: ein Animationseditor, der Einzelbilder nimmt, ein Level-Editor, der Items einzeln auflistet, oder ein Sprite, das bearbeitet und neu gepackt werden soll. Ein Sprite Sheet Splitter schneidet das Sheet wieder in diese Einzelbilder, und genau das erledigt dieser Sprite Sheet Cutter ohne Desktop-Programm.
Raster oder automatische Erkennung: welcher Modus passt
Rastermodus
Für Sheets, in denen jeder Frame in einer gleich großen Zelle liegt, der übliche Aufbau bei Animationen und Tilesets. Eingabe als Spalten × Zeilen oder als Zellgröße in Pixeln. Das Tool schlägt Raster aus Lücken zwischen Sprites, gezeichneten Trennlinien und den Teilern der Bildgröße vor, leere Zellen werden automatisch übersprungen.
Automatische Erkennung (Sprite Extractor)
Für Sheets ohne Raster: gepackte Atlanten, Item-Sammlungen oder Sheets auf einer Volltonfarbe. Jede zusammenhängende Pixelgruppe wird ein Sprite, nahe beieinander liegende Teile werden zusammengefasst und winzige Staubpixel ignoriert. Nummeriert wird Zeile für Zeile von oben links.
Rand und Abstand erklärt
Der Rand (Offset) ist der leere Bereich vor der ersten Zelle, links und oben. Der Abstand (Spacing) ist die Lücke zwischen zwei Zellen, waagerecht und senkrecht. Beides ist bei Tilesets und bei Sheets aus Packing-Programmen verbreitet, oft 1 oder 2 Pixel, damit Farben nicht in den Nachbar-Frame bluten.
Wandern die Schnitte von links nach rechts langsam von den Sprites weg, fehlt der Abstand oder er stimmt nicht. Zeigt jeder Frame an derselben Seite einen Streifen des Nachbarn, stimmt der Rand nicht. In der Vorschau sind Rand und Abstand farbig markiert, und die Infozeile nennt die ungenutzten Pixel rechts und unten. Im Modus Spalten × Zeilen gilt derselbe Rand auch rechts und unten, bei fester Zellgröße zählt nur der Rand links und oben.
Die Frames in der Engine verwenden
Die PNG-Frames funktionieren in jeder Engine. Die JSON beschreibt die Frames auf dem Original-Sheet im Format TexturePacker JSON Hash, so kann das Sheet auch als eine Textur bleiben.
Godot 4
Ein AnimatedSprite2D anlegen, dessen SpriteFrames öffnen und die nummerierten PNGs in eine Animation ziehen. Sie landen in Namensreihenfolge. Für Pixel-Art den Texturfilter in den Projekteinstellungen unter Rendering, Textures auf Nearest stellen.
Unity
Die PNGs mit Texture Type Sprite (2D and UI) importieren. Alle Frames markieren und in die Szene ziehen, Unity erzeugt daraus einen Animation Clip. Für Pixel-Art Filter Mode Point und Compression None wählen.
Phaser
Das Original-Sheet mit der JSON als Atlas laden: this.load.atlas(key, "sheet.png", "sheet.json"). Die Frame-Namen sind die PNG-Namen, generateFrameNames mit prefix, zeroPad und dem Suffix .png baut daraus die Animation.
GameMaker
Die PNG-Frames im Sprite Editor als Unterbilder eines Sprites hinzufügen, die Reihenfolge folgt den Nummern. Für einen sauberen Streifen funktioniert Import Strip Image im Menü Image mit denselben Werten für Frame-Größe, Offset und Separation.
Typische Probleme und schnelle Lösungen
- Die Animation springt oder wackelt
- Wird jeder Frame einzeln getrimmt, verrutscht das Sprite. Im Rastermodus hilft „Auf gemeinsame Box trimmen“, das schneidet jeden Frame auf dasselbe Rechteck relativ zu seiner Zelle. Bei der automatischen Erkennung für Figuren „Gleiche Größe“ mit Ausrichtung unten Mitte wählen.
- Ränder des Nachbar-Frames sind zu sehen
- Zellgröße, Rand oder Abstand passen nicht zum Sheet. Einen Vorschlag wählen oder den markierten Abstand in der Vorschau mit den Lücken im Bild vergleichen. Bei der automatischen Erkennung „Teile benachbarter Sprites ausblenden“ eingeschaltet lassen.
- Nach dem Entfernen des Hintergrunds bleibt ein farbiger Saum
- Die Randpixel wurden beim Erstellen des Sheets mit der Hintergrundfarbe vermischt. Die Toleranz etwas erhöhen. Eine ganz saubere Kante gibt es nur aus einer Quelle mit echter Transparenz.
- Ein Sprite wird in mehrere Frames geteilt
- Teile ohne Berührung, etwa ein Schwert oder ein Schatten, sind eigene Pixelgruppen. Den Wert bei „Zusammenfassen bis“ erhöhen, bis sie zusammengehören.
- Die letzte Spalte oder Zeile fehlt
- Das Raster passt nicht zur Bildgröße. Die Infozeile unter den Rastereinstellungen zeigt die ungenutzten Pixel rechts und unten. Zellgröße prüfen oder zwischen Spalten × Zeilen und Zellgröße wechseln.
- Pixel-Art wirkt unscharf
- Das Tool glättet keine Pixel, skaliert wird per Nearest Neighbor mit 2× oder 4×. Wirken die Frames im Spiel weich, den Texturfilter der Engine auf Nearest oder Point stellen.
Passende Tools und kostenlose Sprites
Häufige Fragen
Ist der Sprite Sheet Cutter kostenlos, und werden Bilder hochgeladen?
Er ist kostenlos, ohne Konto, ohne Limit und ohne Wasserzeichen. Das Bild wird im Browser dekodiert und geschnitten. Keine Datei geht an einen Server, das Tool eignet sich also auch für unveröffentlichte Grafiken.
Wie wird ein Sprite Sheet in einzelne PNG-Dateien geteilt?
Sheet öffnen, Hintergrund prüfen, ein vorgeschlagenes Raster übernehmen oder Spalten und Zeilen eingeben, dann ZIP laden. Die ZIP enthält ein PNG pro Frame, benannt nach dem gewählten Muster, dazu eine JSON mit den Koordinaten.
Was unterscheidet einen Sprite Sheet Cutter von einem Sprite Extractor?
Ein Cutter oder Splitter schneidet entlang eines regelmäßigen Rasters. Ein Extractor findet frei platzierte Sprites. Dieses Tool kann beides: Rastermodus für regelmäßige Sheets und automatische Erkennung für unregelmäßige.
Was bedeuten Rand und Abstand?
Der Rand ist der Bereich vor der ersten Zelle, links und oben. Der Abstand ist die Lücke zwischen benachbarten Zellen. Beide Werte lassen sich für X und Y getrennt einstellen.
Wie wird eine einfarbige Hintergrundfarbe entfernt?
Als Hintergrund Farbe wählen, die Farbe mit der Pipette aufnehmen und „Hintergrund transparent machen“ eingeschaltet lassen. Die Toleranz bestimmt, wie stark ein Pixel abweichen darf und trotzdem als Hintergrund gilt.
Können alle Frames gleich groß bleiben?
Ja. „Auf gemeinsame Box trimmen“ schneidet jede Zelle auf dasselbe Rechteck und hält die Animation an ihrem Platz. „Trimmen, gleiche Größe“ setzt jeden getrimmten Frame mittig oder unten ausgerichtet auf eine gemeinsame Größe. Die Polsterung fügt auf allen Seiten leere Pixel hinzu.
Welche Dateien lassen sich exportieren?
Eine ZIP mit PNG-Frames und optionaler JSON, einzelne PNGs aus der Frame-Liste, die JSON allein und die gewählten Frames als animiertes GIF oder WebP. Der WebP-Export braucht einen Browser, der WebP schreiben kann.
Wie groß darf ein Sprite Sheet sein?
Bilder bis 16.384 Pixel pro Seite und 134 Megapixel insgesamt werden angenommen. Das Sheet wird streifenweise analysiert, um Speicher zu sparen, 8192 × 8192 klappt daher in einem Desktop-Browser. Smartphones mit wenig Speicher lehnen sehr große Bilder unter Umständen ab.
Lässt sich ein Sprite Sheet aus einem 3D-Modell erstellen?
Ja, mit dem Sprite-Sheet-Generator. Er rendert ein Modell oder einen geriggten Geh- und Laufzyklus aus mehreren Richtungen in ein Sheet mit JSON für Engines.