Spritesheet-snijder

Kies de snijmethode die bij het sheet past

Een spritesheet kan een nauwkeurige matrix met animatieframes zijn, een tegelset met regelmatige tussenruimtes of een los ingedeelde verzameling pictogrammen. Die indelingen vragen om verschillende detectiemethoden. De snijder brengt ze samen in één werkwijze, maar jij bepaalt het uiteindelijke resultaat.

Deze instellingen sluiten aan op bestaande spritewerkwijzen. De Sprite Editor van Unity ondersteunt automatisch snijden, rasters op celgrootte of celaantal en opties voor verschuiving, padding, lege rechthoeken en draaipunten. De spritesheet-import van Aseprite gebruikt eveneens een x/y-verschuiving, spritebreedte en -hoogte, padding en leesvolgorde. Deze snijder richt zich op uitpakken: hij exporteert uitsnedecoördinaten, maar maakt geen projectbestanden voor Unity, Godot of Aseprite.

Automatische detectie is een beginpunt, geen garantie

Automatische detectie zoekt naar zichtbare gebieden die niet met elkaar verbonden zijn. Dat werkt snel wanneer er transparante ruimte tussen sprites zit, maar geen detector kan voor elk sheet de bedoelde framegrenzen raden. Twee figuren die elkaar raken kunnen één onderdeel lijken; een losse schaduw of vonk kan juist een apart resultaat worden. De extractiegids van Phaser beschrijft dezelfde beperking van verbonden pixels: sprites die elkaar raken worden samen gedetecteerd.

Controleer daarom altijd de genummerde kaders vóór het exporteren. Automatische detectie heeft geen schuifregelaars voor tolerantie, minimumgrootte of samenvoegafstand, dus corrigeer het resultaat handmatig. Wordt een effen achtergrond als afbeelding gezien, stel de detectie van lege pixels dan in op de achtergrondkleur van de hoek, of schakel de detectie uit en snijd met het raster. Is het resultaat te versnipperd, verwijder dan de losse kaders en teken één kader rond de hele sprite. Vervang een samengevoegde suggestie door handmatige kaders als twee frames elkaar raken. Het oorspronkelijke sheet wordt nooit gewijzigd.

Inhoud van de ZIP en frames.json

PNG is de standaarduitvoer omdat pixels en transparantie exact behouden blijven. Elk geselecteerd frame krijgt een veilige, unieke bestandsnaam op basis van de framenaam of de gekozen voorvoeging. De ZIP bundelt deze PNG’s met het manifest frames.json. Elke invoer bevat de naam, volgorde en bronrechthoek van het frame:

{
  "name": "player-run-03",
  "x": 128,
  "y": 64,
  "width": 32,
  "height": 48
}

De coördinaten gebruiken de pixels van de bronafbeelding en worden gemeten vanaf de linkerbovenhoek. Ze zijn bruikbaar voor scripts en eigen werkstromen, maar het bestand is bewust algemeen: het is geen engine-specifieke atlas of importbestand.

Privé en lokaal verwerkt met beperkt herstel

Decoderen, detecteren, bewerken, uitsnijden en de ZIP maken gebeurt in de browser. Afbeeldingsgegevens en bestandsnamen worden niet naar de server gestuurd. Om de meerstapswerkwijze te kunnen herstellen, mag het actieve tabblad een begrensde lokale werkkopie met instellingen maximaal twee uur bewaren. Opnieuw beginnen verwijdert het project van het actieve tabblad direct. Een afzonderlijk geopend tabblad heeft een eigen geïsoleerde kopie; die wordt binnen twee uur automatisch verwijderd, ook wanneer een ander tabblad opnieuw wordt ingesteld.

Sluit bij grote sheets andere tabbladen die veel afbeeldingen verwerken en vermijd honderden lege frames. De snijder meldt een limiet voor grootte of frameaantal in plaats van stilzwijgend de beeldkwaliteit te verlagen. Downloads gebruiken tijdelijke object-URL’s van de browser, die na gebruik worden vrijgegeven volgens de MDN-richtlijnen.

Controlelijst vóór het exporteren

• Controleer of de leesvolgorde overeenkomt met de animatie- of tegelreeks.
• Zoom in en controleer het eerste, een middelste en het laatste frame op een verschuiving van één pixel.
• Sluit lege cellen en toevallige losse pixels uit, tenzij hun positie betekenis heeft.
• Gebruik verschillende namen en controleer op dubbele namen voordat je de ZIP maakt.
• Bekijk transparante randen tegen een contrasterende voorbeeldachtergrond.
• Corrigeer kaders met velden of knoppen als nauwkeurig slepen lastig is; de werkwijze blijft met het toetsenbord bedienbaar volgens de W3C-richtlijnen.