Sprite Sheet Generator
Combineer afbeeldingen tot sprite sheet met slepen om te herschikken, rasterlay-out, padding, schaalmodi. Exporteer PNG/WebP/JPG met JSON-atlasgegevens voor game-engines en CSS.
Wat is een sprite sheet en waarom zou je er een gebruiken?
Een sprite sheet is een enkel afbeeldingsbestand dat meerdere kleinere afbeeldingen (sprites) bevat die in een raster zijn gerangschikt. Het gebruik van sprite sheets vermindert HTTP-verzoeken, verbetert de paginalaadprestaties en maakt game-rendering efficiënter.
Welke afbeeldingsformaten worden ondersteund?
Je kunt PNG-, JPG-, GIF-, SVG- en WebP-afbeeldingen uploaden. De tool ondersteunt batch-upload en plakken vanuit klembord (Ctrl+V) voor een snelle workflow.
Welke exportformaten zijn beschikbaar?
Exporteer sprite sheets als PNG (met transparantie), WebP (modern formaat met kleinere bestandsgrootte) of JPG (beste voor foto's zonder transparantie). Kies op basis van je platformvereisten.
Hoe herschik ik afbeeldingen in de sprite sheet?
Sleep afbeeldingsminiaturen om hun positie in de sprite sheet te herschikken. Je kunt ook afbeeldingen rechtstreeks vanuit het klembord plakken met Ctrl+V.
Wat zijn JSON-atlasgegevens en welke engines ondersteunen ze?
JSON-atlasgegevens bevatten positie, grootte en frame-informatie voor elke sprite. Ze zijn compatibel met populaire game-engines zoals Phaser, PixiJS, Unity, Cocos2d en vele andere voor automatische sprite-extractie.
Wat zijn de verschillende schaalmodi?
Passend behoudt verhoudingen. Vullen bedekt de cel en snijdt bij. Uitrekken vervormt om te vullen.
Ondersteunt de tool transparantie?
Ja, PNG en WebP behouden transparantie. Je kunt ook een aangepaste achtergrondkleur instellen, wat handig is voor JPG-exports die geen transparantie ondersteunen.
Hoe beïnvloedt padding de sprite sheet?
Padding voegt ruimte toe tussen individuele sprites in het sheet, wat visueel bloeden voorkomt bij het samplen van texturen. Dit is vooral belangrijk voor game-engines die lineaire filtering gebruiken.
Kan ik sprite sheets gebruiken voor CSS?
Ja, sprite sheets werken geweldig voor CSS-sprites. JSON-atlasgegevens kunnen worden gebruikt om CSS background-position-regels te genereren, wat HTTP-verzoeken vermindert en de paginalaadprestaties verbetert.
Wat zijn best practices voor sprite sheet-afmetingen?
Houd afmetingen als machten van 2 (256x256, 512x512, 1024x1024) voor optimale GPU-textuurverwerking. De meeste game-engines geven de voorkeur aan deze afmetingen voor betere prestaties en compatibiliteit.
Hoe verbeteren sprite sheets game-prestaties?
Sprite sheets verminderen draw calls door meerdere sprites te groeperen in een enkele textuur. Dit minimaliseert GPU-statuswijzigingen, vermindert geheugen-overhead en ermöglicht efficiëntere rendering.
Wat is het verschil tussen sprite sheets en texture atlases?
Sprite sheets rangschikken frames typisch in een uniform raster, terwijl texture atlases onregelmatig gevormde sprites efficiënter kunnen inpakken met algoritmen zoals bin packing.
Hoe Sprite Sheet Generator te gebruiken
Voeg afbeeldingen samen tot één sprite sheet rechtstreeks in je browser. Sleep om frames te herschikken, stel grid en padding fijn af en exporteer een PNG/WebP/JPG-atlas met JSON-data voor game-engines en CSS-sprites. Alles gebeurt lokaal.
- Voeg je afbeeldingen toe en gebruik de knoppen + en − om de Columns en Rows van het raster in te stellen.
- Stel Padding (px) in om ruimte tussen de sprites te maken en texture bleeding te voorkomen.
- Laat Sprite Size op Auto staan voor het grootste frame, of typ vaste afmetingen voor gelijke cellen.
- Kies een Scale Mode — Fit, Fill of Stretch — om te bepalen hoe elke afbeelding in zijn cel past.
- Kies een Background (Transparent, White, Black of Custom), stel het Format in op PNG, WebP of JPG en geef het bestand een naam onder Filename.
- Sleep de miniaturen om frames te herschikken — de atlascoördinaten worden automatisch bijgewerkt — en exporteer het werkblad inclusief de JSON-atlas.
Gebruik minstens 2 px padding zodat aangrenzende sprites niet in elkaar overlopen wanneer texturen in je engine worden geschaald of gefilterd.
Gerelateerde tools
- Chmod-calculator Gratis online chmod-calculator om Linux-bestandsrechten te visualiseren en berekenen met selectievakjes. Converteer direct tussen numerieke (755, 644) en symbolische notatie (rwxr-xr-x). Ondersteunt speciale rechten zoals setuid, setgid, sticky bit.
- ASCII-tabel Volledige ASCII-tekencoderingreferentie met decimale, hexadecimale, octale, binaire codes, HTML-entiteiten en karakterbeschrijvingen. Direct zoeken en filteren.
- HTTP-verzoek Tester Test REST API's direct in je browser. Verstuur GET-, POST-, PUT-, DELETE-verzoeken met aangepaste headers, body en parameters. Bekijk responsstatus, headers en JSON-body direct.
- .htaccess-generator Genereer Apache .htaccess-regels voor redirects, herschrijvingen, beveiligingsheaders, caching en meer.
- Robots.txt Generator Gratis online robots.txt generator. Maak en pas robots.txt bestanden aan om het crawlen van zoekmachines te beheren, crawler-toegang te beheren en de SEO van uw site te optimaliseren.
- Sitemap Generator Gratis online XML sitemap generator. Voeg URLs toe, stel prioriteiten en frequenties in, maak direct SEO-sitemaps.
- GIF Frames Splitsen Extraheer en download afzonderlijke frames uit GIF-animaties als PNG of sprite-sheet. Gratis online tool met preview en ZIP-export.
- GIF Omkeren Keer de afspeelvolgorde van GIF-animaties gratis online om. Upload, bekijk en download direct.