Sprite sheet-generator

Zo werkt de indeling

De generator gebruikt één voorspelbare indeling: een gelijkmatig raster. Je stelt het aantal kolommen in, het aantal rijen is naar_boven_afronden(afbeeldingen / kolommen). Elke cel heeft dezelfde vierkante grootte (de gekozen tegelgrootte), dus elke afbeelding wordt geschaald om in haar cel te passen met behoud van de beeldverhouding en wordt gecentreerd. Afbeeldingen van verschillende grootte komen allemaal in gelijke cellen terecht, precies wat CSS-sprites met background-position verwachten.

Vorm van de gegenereerde CSS

Elke afbeelding wordt een klasse met de naam van het bestand (.spr-<naam>), op de tegelgrootte gedimensioneerd en naar haar cel verschoven. Bij vier kolommen, een tegelgrootte van 128 px en zonder tussenruimte ziet het sheet er zo uit:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

De offset beweegt in twee dimensies: sprites vullen elke rij van links naar rechts en springen dan naar de volgende rij. Sla de PNG op als spritesheet.png naast je CSS (of pas url(...) aan je pad aan).

Tussenruimte en overlopen

Sprites die rand aan rand zijn gepakt kunnen in elkaar overlopen wanneer de browser het sheet schaalt (niet-gehele pixelverhoudingen, CSS-transformaties). Voeg 2 tot 4 pixels tussenruimte tussen cellen toe zodat naburige pixels niet doorlekken.

Schermen met hoge dichtheid (retina)

Er is geen automatische 2x-export, maar je kunt eenvoudig een scherper sheet maken: kies een grotere tegelgrootte (bijvoorbeeld 256 px in plaats van 128 px) zodat elke sprite meer pixels draagt, en toon hem dan op de helft van de CSS-grootte. Zo krijg je scherpe sprites op schermen met hoge dichtheid zonder aparte doorgang.

Sprite sheets of alternatieven

• Sprite sheets: klassieke iconensets in CSS, HTML5-gameframes en pagina’s die baat hebben bij het bundelen van veel kleine afbeeldingen in één bestand.
• SVG-sprites (symbol): beter voor moderne UI-iconen, schalen zuiver, accepteren CSS fill, geen gegoochel met background-position.
• Icoonlettertypen: beperkt, maar nog steeds in gebruik voor piepkleine eenkleurige iconen.
• Losse bestanden met HTTP/2 of HTTP/3: multiplexing maakt het aantal verzoeken minder belangrijk dan vroeger.