Sprite sheet-generator — PNG + JSON + CSS

Vad ett sprite sheet är och varför det hjälper

Ett sprite sheet samlar många små bilder — animationsrutor, speltiles, UI-ikoner, emojier eller flaggor — i en enda större bild. Att ladda en fil i stället för dussintals minskar antalet HTTP-förfrågningar och texturbyten, vilket gör att webbsidor och spel laddas och renderas snabbare. Varje enskild sprite visas sedan genom att man hänvisar till dess rektangel i arket. Den här sprite sheet-generatorn skapar bilden och koordinaterna åt dig: släpp dina filer, välj en layout och ladda ner en PNG tillsammans med en JSON-datafil och en färdig CSS-stilmall.

Allt arbete sker i din webbläsare. Bilderna ritas lokalt på en canvas och koordinatfilerna genereras i JavaScript, så din grafik laddas aldrig upp och det finns ingen gräns för hur många gånger du kan generera om arket medan du experimenterar med inställningarna.

Rutnät eller packad layout

Det enhetliga rutnätet ger varje sprite en cell lika stor som den största bilden och centrerar varje sprite i sin cell. Den förutsägbara strukturen är vad de flesta animationssystem förväntar sig: ruta n ligger alltid i kolumn n modulo antalet kolumner. Packade rader sorterar sprites efter höjd och fyller rader upp till en målbredd, vilket slösar betydligt mindre utrymme när dina bilder har olika storlekar. I båda lägena lägger mellanrumsvärdet till transparent utrymme runt varje sprite för att undvika färgblödning när arket skalas.

Använda JSON- och CSS-utdata

JSON-filen listar varje sprite med ett rent namn som härleds från filnamnet, med dess x- och y-position, bredd och höjd, samt arkets totala storlek. Spelramverk som Phaser och PixiJS kan läsa in detta hash-format direkt, och det är lätt att tolka i vilket språk som helst. CSS-filen definierar en basklass som sätter arket som bakgrundsbild och en klass per sprite med dess storlek och bakgrundsposition, så en ikon är bara en span med två klasser. Ändra klassprefixet så att det passar ditt projekts namngivning, och lägg PNG-filen bredvid CSS-filen eller justera URL:en.