CSS-spritesheet-generator

Så gör du ett spritesheet

1. Släpp dina bilder i släppytan, eller klicka på den för att välja dem. PNG, SVG, WebP, JPG och andra format som din webbläsare kan läsa godtas, upp till 500 bilder. Varje fil visas i listan Bilder med sin storlek; knappen × tar bort en bild och Ta bort alla bilder tömmer listan.
2. Välj en Layout: Rutnät, Packad (minsta ark), Vågrät remsa eller Lodrät remsa. Med Rutnät anger Kolumner (0 = automatiskt) antalet kolumner.
3. Ställ in Utfyllnad (px) mellan sprites (2 som standard) och kryssa i Tvåpotensstorlek (256, 512, 1024 …) om din spelmotor eller GPU kräver det.
4. Välj Datafil: CSS (klasser med background-position), JSON (bildrutekarta) eller CSS och JSON. Justera Filnamn och Prefix för CSS-klasser (båda ”sprite” som standard).
5. Kontrollera förhandsvisningen, Arkets storlek och Utnyttjad yta och klicka sedan på Ladda ner ZIP (PNG + data) eller Ladda ner bara PNG. Den Genererade koden kan också kopieras direkt.

Bilderna avkodas i din webbläsare och ingenting laddas upp. En SVG utan egen bredd och höjd rastreras med den längsta sidan på 256 px.

Välja layout

• Rutnät ger varje bild en cell lika stor som den största bilden. Med automatiska kolumner blir rutnätet ungefär kvadratiskt. Det är enkelt och förutsägbart, och idealiskt när alla sprites har samma storlek, som en uppsättning rutor.
• Packad (minsta ark) använder hyllpackning: bilderna sorteras med de högsta först och placeras från vänster till höger i rader. Verktyget prövar många arkbredder och behåller den med minst yta, med hänsyn till avrundning till tvåpotens när det alternativet är på. Bäst för ikoner i blandade storlekar.
• Vågrät remsa och Lodrät remsa lägger bilderna i en rad eller kolumn i den ordning du lade till dem. Det är vad många animationsspelare förväntar sig för bildrutor.

Arket kan inte överskrida 16 384 px per sida eller cirka 16,7 megapixlar, den gräns som webbläsare kan rita.

Använda CSS-koden

CSS-koden innehåller en basklass med arket som background-image och no-repeat, därefter en klass per sprite som får sitt namn från filen: home.png blir sprite-home. Namnen skrivs med gemener, accenter tas bort, andra tecken blir bindestreck, och dubbletter får -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Varje spriteklass sätter width, height och en background-position med negativa förskjutningar. En sprite vid x = 40, y = 20 får background-position: -40px -20px: hela arket förskjuts 40 px åt vänster och 20 px uppåt inuti elementet, så att bara den spriten syns genom elementets ruta. Utfyllnaden hindrar att angränsande sprites blöder in när sidan zoomas eller en textur filtreras.

Skärmar med hög pixeltäthet: rita dina bilder i dubbla visningsstorleken, generera arket, lägg sedan till background-size med halva arkets storlek i basklassen och halvera bredder, höjder och förskjutningar. Verktyget genererar inte detta; det är en manuell justering.

Är sprites fortfarande användbara med HTTP/2?

Sprites uppfanns för att spara HTTP-förfrågningar. Med multiplexing i HTTP/2 laddas många små filer nästan lika snabbt som en enda, så vinsten för webbplatser är mycket mindre, och SVG-ikoner eller ikonteckensnitt är ofta bättre för skalbara ikoner. Spritesheets är fortfarande standard för 2D-spel och animationsrutor: en textur ger färre texturbyten i GPU:n och en enda fil att läsa in.