Sprite sheet-generator — PNG + JSON + CSS

Wat een sprite sheet is en waarom het helpt

Een sprite sheet bundelt veel kleine afbeeldingen — animatieframes, game-tiles, UI-iconen, emoji of vlaggen — in één grotere afbeelding. Eén bestand laden in plaats van tientallen vermindert het aantal HTTP-verzoeken en textuurwissels, waardoor webpagina's en games sneller laden en renderen. Elke afzonderlijke sprite wordt vervolgens weergegeven door naar zijn rechthoek binnen de sheet te verwijzen. Deze sprite sheet-generator maakt de afbeelding en de coördinaten voor je: sleep je bestanden erin, kies een indeling en download een PNG samen met een JSON-databestand en een direct bruikbaar CSS-stylesheet.

Alles gebeurt in je browser. De afbeeldingen worden lokaal op een canvas getekend en de coördinatenbestanden worden in JavaScript gegenereerd, dus je artwork wordt nooit geüpload en je kunt de sheet zo vaak opnieuw genereren als je wilt terwijl je met de instellingen experimenteert.

Raster of compacte indeling

Het uniforme raster geeft elke sprite een cel zo groot als de grootste afbeelding en centreert elke sprite in zijn cel. Die voorspelbare structuur is wat de meeste animatiesystemen verwachten: frame n staat altijd in kolom n modulo het aantal kolommen. Compacte rijen sorteren sprites op hoogte en vullen rijen tot een doelbreedte, wat veel minder ruimte verspilt wanneer je afbeeldingen verschillende formaten hebben. In beide modi voegt de tussenruimte transparante ruimte rond elke sprite toe om kleurbloeding te voorkomen wanneer de sheet wordt geschaald.

De JSON- en CSS-uitvoer gebruiken

Het JSON-bestand vermeldt elke sprite onder een nette naam die is afgeleid van de bestandsnaam, met x- en y-positie, breedte en hoogte, plus de totale grootte van de sheet. Gameframeworks zoals Phaser en PixiJS kunnen dit hash-formaat rechtstreeks laden, en het is in elke taal eenvoudig te parsen. Het CSS-bestand definieert een basisklasse die de sheet als achtergrondafbeelding instelt en één klasse per sprite met de grootte en achtergrondpositie, zodat een icoon gewoon een span met twee klassen is. Pas het klassevoorvoegsel aan de naamgeving van je project aan en zet de PNG naast het CSS-bestand of pas de URL aan.