Sprite-Extraktor

Drop files here or click (max 12 MB)

Legen Sie ein Bild oben ab, um mit der Sprites-Extraktion zu beginnen.

Über Online Sprite Extraktor

Müssen Sie ein Sprite-Sheet oder statisches Bild in einzelne Sprites umwandeln? Dieser Sprite Extraktor erkennt automatisch Sprite-Bereiche, schneidet sie sauber zu (mit optionalem Zuschneiden und Auffüllen) und exportiert gebrauchsfertige transparente PNGs. 🚀 Ideal für Scratch-Projekte, 2D-Spielprototypen, Unterrichtsaktivitäten und Indie-Spiele. Funktioniert hervorragend mit Pixelkunst, UI-Elementen, Icons und Charakteren.

Warum diesen Sprite-Extraktor verwenden?

  • Automatische Sprite-Erkennung basierend auf Transparenz und konfigurierbaren Schwellenwerten
  • Sauberes Zuschneiden mit optionalem Trimmen transparenter Ränder um jeden Sprite
  • Steuerung von Abstand, Ausrichtung (zentriert/unten) und optionaler einheitlicher Ausgabegröße
  • Erhält Transparenz (Alpha-Kanal) für PNG-Exporte – ideal für Tilemaps und Charaktere
  • Visuelle Galerie aller erkannten Sprites zur schnellen Überprüfung vor dem Download
  • Clientseitiger ZIP-Export mit JSZip, der Dateinamen und Sprite-Reihenfolge stabil hält
  • Scratch-freundlich: Schnelles Umwandeln eines einzelnen Sprite-Sheets in mehrere Kostüme oder Assets
  • Perfekt zur Wiederverwendung von Assets über Engines hinweg (Scratch, Godot, Unity 2D, Phaser, etc.)

🛠️ So extrahierst du Sprites aus einem Sprite-Sheet for sprite-extractor

1

1. Bild einfügen

Ziehe ein Sprite-Sheet oder Bild per Drag & Drop in den Ablagebereich oder klicke zur Dateiauswahl. Für beste Ergebnisse verwende PNG mit transparentem Hintergrund oder hohem Kontrast zwischen Sprites und Hintergrund.

2

2. Automatische Erkennung starten

Das Tool sendet eine leichtgewichtige Repräsentation deines Bildes an einen Erkennungsendpunkt, der Begrenzungsrahmen für jeden Sprite basierend auf Transparenz und Mindestgröße berechnet. Die Rahmen werden über dein Bild gelegt, sodass du schnell siehst, was exportiert wird.

3

3. Extraktionsoptionen anpassen

Passe Abstand, transparenten Hintergrund vs. Vollfarbe, Trimmen transparenter Ränder, Ausrichtung (zentriert oder unten) und optionale einheitliche Ausgabebreite/-höhe an. Das Tool baut jede Sprite-Leinwand entsprechend neu auf.

4

4. Sprites vorschauen

Scrolle durch die Galerie der generierten Sprites. Jede Vorschau wird clientseitig mit einem Offscreen-Canvas erstellt und kann je nach UI-Optionen umbenannt oder verworfen werden.

5

5. PNGs oder ZIP herunterladen

Exportiere einzelne PNG-Sprites oder lade eine ZIP-Datei mit allen aktuellen Vorschauen herunter. Die ZIP wird clientseitig mit JSZip erstellt, und Dateinamen folgen einem sequenziellen Muster wie <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, usw.

Technische Spezifikationen

Erkennung & Begrenzungsrahmen

Die Erkennungsphase läuft auf einem dedizierten Backend-Endpunkt und liefert saubere Begrenzungsrahmen, die der Client für den Aufbau der finalen Sprites verwendet.

AspektVerhaltenHinweise
ErkennungsendpunktPOST /api/sprite-extractor/inspectAkzeptiert eine Data-URL und Erkennungsoptionen, gibt ein Array von Sprite-Boxen zurück.
ErkennungseingabenToleranz, Alpha-Schwellenwert, Mindestbreite, MindesthöhePassen Sie diese Parameter in der Benutzeroberfläche an, um winziges Rauschen zu ignorieren oder nur bedeutungsvolle Sprites zu erfassen.
Box-FormAchsausgerichtete RechteckeJede <code>SpriteBox</code> enthält <code>x</code>, <code>y</code>, <code>Breite</code>, <code>Höhe</code> in Quellbildkoordinaten.
TransparenzbehandlungAlpha-bewusstTransparente Pixel beeinflussen Zuschneide-/Trimment-Entscheidungen, können aber in der Ausgabe erhalten bleiben.
FehlerbehandlungSanfte FallbacksWenn die Erkennung fehlschlägt, zeigt das Werkzeug einen lesbaren Fehler an und unterbricht nicht die Benutzeroberfläche.

Zuschneiden, Trimmen & Ausrichtung

Sobald die Boxen bekannt sind, erfolgt das gesamte Sprite-Rendering im Browser mit HTML Canvas.

SchrittImplementierungDetails
Erstes ZuschneidendrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Jeder Sprite wird zunächst aus dem Originalbild auf eine temporäre Leinwand zugeschnitten.
Transparentes TrimmenAlpha-Kanal über getImageData scannenDas Werkzeug scannt Pixel, um die minimale nicht-transparente Begrenzungsbox zu berechnen, wenn Trimmen aktiviert ist.
Polsterungkonfigurierbar 0–256 pxPolsterung wird um den getrimmten oder zugeschnittenen Sprite angewendet, um Randartefakte in Engines zu reduzieren.
Ausrichtungzentriert / untenSprites können zentriert oder unten ausgerichtet werden (nützlich für Charaktere, die auf einer Grundlinie stehen).
Einheitliche Ausgabegrößeoptional spriteWidth / spriteHeightWenn aktiviert, werden alle Sprites in eine feste Leinwand gerendert, um Animationen zu standardisieren.
Hintergrundtransparent oder VolltonfarbeEntweder volle Transparenz beibehalten oder die Leinwand mit einer gewählten RGBA-Hintergrundfarbe füllen.

Leistung & Grenzen

Entworfen für interaktive Nutzung im Browser.

ParameterTypisches VerhaltenHinweise
Maximale Eingabegröße~10 MB BildGrößere Dateien können möglicherweise noch funktionieren, laden/erkennen jedoch langsamer.
Sprite-Anzahlbis zu ~400 SpritesSehr hohe Anzahlen sind möglich, aber die Vorschau-Darstellung und ZIP-Erstellung dauern länger.
ExportformatPNG in einer ZIP (Blob)Die ZIP wird vollständig clientseitig mit JSZip erstellt.
Canvas-OperationenSprite-spezifisches Zuschneiden und ZeichnenBasiert auf der 2D-Canvas-API des Browsers; Leistung skaliert mit Auflösung und Anzahl.

Befehlszeilen-Alternativen

Für massive Sprite-Sheets oder automatisierte Pipelines können Sie CLI-Tools wie ImageMagick mit Skripting kombinieren.

Linux / 🍎 macOS

Einheitliches Raster-Zuschneiden mit ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Schneidet ein regelmäßiges 64×64-Raster in einzelne PNG-Dateien.

Alle Sprites zippen

zip sprites.zip sprite_*.png

Verpackt alle generierten Sprites in ein einzelnes Archiv.

Windows (PowerShell + ImageMagick)

Rasterbasiertes Zuschneiden

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Wie oben, unter Verwendung der <code>magick</code> CLI unter Windows.

Praktische Anwendungsfälle

2D-Spieleentwicklung

  • Extrahiere Charakteranimationsframes aus einem Sprite-Sheet für Godot, Unity 2D, Phaser oder Construct.
  • Isoliere UI-Elemente (Schaltflächen, Symbole, Gesundheitsleisten) aus einem Design-Mock-up.
  • Zerlege Tilesets in einzelne Kacheln für Level-Editoren.
// Godot-Beispiel: mehrere Frames laden\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch & Schulprojekte

  • Verwandle ein einzelnes Sprite-Sheet in mehrere Kostüme für einen Scratch-Charakter.
  • Bereite thematische Asset-Pakete (Tiere, Planeten, Symbole) für Programmierworkshops vor.
  • Lass Schüler Sprite-Sheets in einem Zeichenprogramm entwerfen und dann für Scratch extrahieren.
// Scratch-artiger Pseudocode für einfache Animation\nwenn grüne Flagge angeklickt\ndauerhaft\n  nächstes Kostüm\n  warte 0,1 Sekunden

Pixelkunst & Asset-Bibliotheken

  • Alte Pixel-Art-Sheets in eine durchsuchbare Bibliothek einzelner Sprites aufteilen.
  • Extrahieren Sie nur die benötigten Assets aus großen kommerziellen oder Open-Source-Paketen.
  • Normalisieren Sie Abstände und Ausrichtung von Sprites aus verschiedenen Quellen.

❓ Frequently Asked Questions

❓Ist die Sprite-Erkennung vollautomatisch?

Das Tool führt eine automatische Erkennung basierend auf Transparenz und konfigurierbaren Schwellenwerten (Toleranz, Alpha-Schwellenwert, minimale Breite/Höhe) durch. In vielen Fällen funktioniert es "einfach so", aber bei komplexen Sheets müssen Sie möglicherweise Optionen anpassen oder einen zweiten Durchlauf durchführen.

📏Verändert der Extractor mein Originalbild?

Nein. Ihr Originalbild bleibt unberührt. Das Tool liest es nur in einen In-Memory-Canvas ein, schneidet Bereiche in neue Canvas aus und exportiert dann frische PNG-Sprites.

🎯Kann ich Abstände und Ausrichtung steuern?

Ja. Sie können Abstände (in Pixeln) konfigurieren, zwischen transparentem oder einfarbigem Hintergrund wählen, das Zuschneiden transparenter Ränder aktivieren und Sprites entweder zentriert oder unten ausgerichtet im Ausgabe-Canvas positionieren.

🔒Werden meine Bilder auf dem Server gespeichert?

Der Erkennungsschritt sendet Ihr Bild (als Data-URL) an einen speziellen Endpunkt, um Sprite-Boxen zu berechnen, aber die Sprites selbst werden in Ihrem Browser erstellt und gezippt. Der Dienst ist für vorübergehende Verarbeitung, nicht für Langzeitspeicherung konzipiert. Vermeiden Sie wie immer die Verwendung von Drittanbietertools für Assets, die streng privat bleiben müssen.

🧊Wird Transparenz in den exportierten Sprites erhalten bleiben?

Ja. Standardmäßig bleibt der Ausgabe-Canvas transparent und Ihre Sprites behalten ihren Alphakanal. Optional können Sie eine einfarbige Hintergrundfarbe wählen, wenn Ihre Ziel-Engine opake Assets bevorzugt.

Pro Tips

Best Practice

Verwenden Sie einen kleinen Abstand (2–4 px) um jeden Sprite, um Randüberlauf beim Skalieren oder Drehen in Ihrer Engine zu verhindern.

Best Practice

Benennen Sie Sprites konsistent (z.B. <code>held_rennen_0001.png</code>, <code>held_rennen_0002.png</code>), um Animationsimporte und Skripting zu vereinfachen.

Best Practice

Beginnen Sie im Unterricht mit sehr einfachen Sprite-Sheets (wenige große Sprites, klarer Hintergrund), damit Schüler sofort Ergebnisse sehen.

Best Practice

Bewahren Sie das exportierte ZIP neben den Quelldateien Ihres Projekts auf, um später Animationen leicht neu generieren oder anpassen zu können.

Additional Resources

Scratch Wiki – Sprites
Documentation
Godot Docs – 2D-Sprite-Animation
Documentation
Unity Manual – 2D-Sprites
Documentation

Other Tools