Sprite Extractor

Drop files here or click (max 12 MB)

Sleep een afbeelding hierboven om sprites te extraheren.

Over Online Sprite Extractor

Moet je een sprite sheet of statische afbeelding omzetten in individuele sprites? Deze Sprite Extractor detecteert automatisch spritegebieden, snijdt ze netjes bij (met optioneel trimmen en opvullen) en exporteert gebruiksklare transparante PNG's. 🚀 Ideaal voor Scratch-projecten, 2D game prototypes, klasactiviteiten en indie games. Werkt perfect met pixel art, UI-elementen, iconen en personages.

Waarom Deze Sprite Extractor Gebruiken?

  • Automatische sprite-detectie op basis van transparantie en configureerbare drempels
  • Schoon bijsnijden met optioneel trimmen van transparante randen rond elke sprite
  • Beheer opvulling, uitlijning (midden/onder) en optionele uniforme uitvoergrootte
  • Behoudt transparantie (alfakanaal) voor PNG-export – ideaal voor tilemaps en karakters
  • Visuele galerij van alle gedetecteerde sprites voor snelle inspectie voor het downloaden
  • Client-side ZIP-export met JSZip, houdt je bestandsnamen en sprite-volgorde stabiel
  • Scratch-vriendelijk: snel een enkele sprite sheet omzetten in meerdere kostuums of assets
  • Perfect voor hergebruik van assets tussen engines (Scratch, Godot, Unity 2D, Phaser, etc.)

🛠️ Hoe Sprites Uit een Sprite Sheet Te Extraheren for sprite-extractor

1

1. Laat je afbeelding vallen

Sleep een sprite sheet of afbeelding naar de dropzone, of klik om een bestand te kiezen. Voor de beste resultaten, gebruik PNG met transparante achtergrond of hoog contrast tussen sprites en achtergrond.

2

2. Voer automatische detectie uit

De tool stuurt een lichtgewicht representatie van je afbeelding naar een detectie-eindpunt, dat begrenzingsvakken voor elke sprite berekent op basis van transparantie en minimale grootte. De vakken worden over je afbeelding gelegd zodat je snel kunt zien wat wordt geëxporteerd.

3

3. Pas extractie-opties aan

Pas opvulling, transparante achtergrond versus effen kleur, trimmen van transparante randen, uitlijning (midden of onder) en optionele uniforme uitvoerbreedte/hoogte aan. De tool herbouwt elke sprite-canvas dienovereenkomstig.

4

4. Bekijk sprites in voorbeeld

Blader door de galerij van gegenereerde sprites. Elk voorbeeld wordt client-side gebouwd met een offscreen canvas en kan worden hernoemd of verwijderd afhankelijk van de UI-opties.

5

5. Download PNG's of een ZIP

Exporteer individuele PNG-sprites of download een enkel ZIP-bestand met alle huidige voorbeelden. De ZIP wordt client-side gebouwd met JSZip, en bestandsnamen volgen een sequentieel patroon zoals <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, etc.

Technische Specificaties

Detectie & Begrenzingsvakken

De detectiefase draait op een toegewezen backend-eindpunt en retourneert schone begrenzingsvakken die de client gebruikt om uiteindelijke sprites te bouwen.

AspectGedragOpmerkingen
Detectie-eindpuntPOST /api/sprite-extractor/inspectAccepteert een data-URL en detectieopties, retourneert een array van spriteboxen.
Detectie-ingangentolerantie, alphaDrempel, minimaleBreedte, minimaleHoogteStel deze parameters af in de gebruikersinterface om kleine ruis te negeren of alleen betekenisvolle sprites vast te leggen.
Vorm van de boxAs-uitgelijnde rechthoekenElke <code>SpriteBox</code> bevat <code>x</code>, <code>y</code>, <code>breedte</code>, <code>hoogte</code> in bronafbeeldingscoördinaten.
Afhandeling van transparantieAlpha-bewustTransparante pixels dragen bij aan bijsnijd-/trimbeslissingen maar kunnen in de uitvoer behouden blijven.
FoutafhandelingElegante terugvaloptiesAls detectie mislukt, toont het hulpmiddel een leesbare fout en verstoort het de gebruikersinterface niet.

Bijsnijden, Trimmen & Uitlijnen

Zodra de boxen bekend zijn, wordt alle spriteweergave in de browser gedaan met HTML canvas.

StapImplementatieDetails
Initiële bijsnijdingdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Elke sprite wordt eerst uit de originele afbeelding bijgesneden op een tijdelijk canvas.
Transparante trimscan alfakanaal via getImageDataHet hulpmiddel scant pixels om de minimale niet-transparante begrenzingsbox te berekenen wanneer trimmen is ingeschakeld.
Opvullingconfigureerbaar 0–256 pxOpvulling wordt toegepast rond de getrimde of bijgesneden sprite om randartefacten in engines te verminderen.
Uitlijningmidden / onderSprites kunnen gecentreerd of aan de onderkant worden uitgelijnd (handig voor personages die op een basislijn staan).
Uniforme uitvoergrootteoptionele spriteBreedte / spriteHoogteWanneer ingeschakeld, worden alle sprites weergegeven in een canvas met vaste grootte om animaties te standaardiseren.
Achtergrondtransparant of effen kleurHoud volledige transparantie of vul het canvas met een gekozen achtergrond-RGBA-kleur.

Prestaties & Limieten

Ontworpen voor interactief gebruik in de browser.

ParameterTypisch GedragOpmerkingen
Maximale invoergrootte~10 MB afbeeldingGrotere bestanden kunnen nog steeds werken, maar laden/detecteren langzamer.
Aantal spritestot ~400 spritesZeer hoge aantallen zijn mogelijk, maar voorvertoning weergeven en ZIP-creatie nemen meer tijd in beslag.
ExportformaatPNG in een ZIP (Blob)De ZIP wordt volledig aan de clientzijde gegenereerd met JSZip.
CanvasbewerkingenPer-sprite bijsnijden en tekenenVertrouwt op de 2D canvas-API van de browser; prestaties schalen met resolutie en aantal.

Commandoregel Alternatieven

Voor enorme sprite sheets of geautomatiseerde pijplijnen kun je CLI-tools zoals ImageMagick combineren met scripting.

Linux / 🍎 macOS

Uniform raster bijsnijden met ImageMagick

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

Snijdt een regelmatig 64×64 raster in individuele PNG-bestanden.

Alle sprites in een zip

zip sprites.zip sprite_*.png

Verpakt alle gegenereerde sprites in een enkel archief.

Windows (PowerShell + ImageMagick)

Rastergebaseerd bijsnijden

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

Hetzelfde als hierboven, gebruikmakend van de <code>magick</code> CLI op Windows.

Praktische Toepassingen

2D Gameontwikkeling

  • Extraheer karakteranimatieframes van een sprite sheet voor Godot, Unity 2D, Phaser of Construct.
  • Isoleer UI-elementen (knoppen, pictogrammen, gezondheidsbalken) van een ontwerp mock-up.
  • Breek tilesets op in individuele tegels voor level editors.
// Godot voorbeeld: laad meerdere frames\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch & Klaslokaalprojecten

  • Verander een enkele sprite sheet in meerdere kostuums voor een Scratch-personage.
  • Bereid thematische asset-pakketten (dieren, planeten, pictogrammen) voor voor programmeerworkshops.
  • Laat leerlingen sprite sheets ontwerpen in een tekenprogramma en ze vervolgens extraheren voor Scratch.
// Scratch-stijl pseudocode voor eenvoudige animatie\nwanneer groene vlag wordt aangeklikt\nvoor altijd\n  volgend kostuum\n  wacht 0,1 seconden

Pixelkunst & Assetbibliotheken

  • Splits oude pixelkunstbladen op in een doorzoekbare bibliotheek van individuele sprites.
  • Haal alleen de benodigde assets uit grote commerciële of open-source pakketten.
  • Normaliseer opvulling en uitlijning van sprites uit verschillende bronnen.

❓ Frequently Asked Questions

❓Is sprite-detectie volledig automatisch?

De tool voert automatische detectie uit op basis van transparantie en configureerbare drempels (tolerantie, alfa-drempel, minimale breedte/hoogte). In veel gevallen werkt het 'gewoon', maar voor complexe bladen moet u mogelijk opties aanpassen of een tweede keer uitvoeren.

📏Verandert de extractor mijn originele afbeelding?

Nee. Uw originele afbeelding blijft onaangetast. De tool leest deze alleen in naar een canvas in het geheugen, knipt gebieden uit naar nieuwe canvassen en exporteert vervolgens nieuwe PNG-sprites.

🎯Kan ik opvulling en uitlijning beheren?

Ja. U kunt opvulling configureren (in pixels), kiezen tussen een transparante of effen achtergrond, het bijsnijden van transparante randen inschakelen en sprites gecentreerd of onderaan uitlijnen binnen het uitvoercanvas.

🔒Worden mijn afbeeldingen op de server opgeslagen?

De detectiestap stuurt uw afbeelding (als een data-URL) naar een speciaal eindpunt om spriteboxen te berekenen, maar de sprites zelf worden in uw browser gebouwd en gezipt. De service is ontworpen voor tijdelijke verwerking, niet voor langdurige opslag. Vermijd, zoals altijd, het gebruik van tools van derden voor assets die strikt privé moeten blijven.

🧊Wordt transparantie behouden in de geëxporteerde sprites?

Ja. Standaard blijft het uitvoercanvas transparant en behouden uw sprites hun alfakanaal. U kunt optioneel een effen achtergrondkleur kiezen als uw doelengine de voorkeur geeft aan ondoorzichtige assets.

Pro Tips

Best Practice

Gebruik een kleine hoeveelheid opvulling (2–4 px) rond elke sprite om randuitvloeiing te voorkomen bij schalen of roteren in uw engine.

Best Practice

Geef sprites consistente namen (bijv. <code>held_ren_0001.png</code>, <code>held_ren_0002.png</code>) om animatie-imports en scripting te vereenvoudigen.

Best Practice

Begin in onderwijsomgevingen met zeer eenvoudige spritebladen (weinig grote sprites, duidelijke achtergrond) zodat studenten direct resultaat zien.

Best Practice

Bewaar het geëxporteerde ZIP-bestand naast de bronbestanden van uw project, zodat u later eenvoudig animaties kunt regenereren of aanpassen.

Additional Resources

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

Other Tools