Softonic

Sprite sheet-generator

Steg / 3
Återställer vald fil...

Släpp en hög med bilder så placerar generatorn dem på ett jämnt rutnät och ritar en enda sprite sheet-PNG i webbläsaren, och skapar sedan CSS med en background-position-offset per sprite. Allt körs lokalt på canvasen, så inget laddas upp till en server. Praktiskt för ikonuppsättningar, retrospelsrutor och gränssnittslägen där du vill ha en enda fil i stället för många separata bilder. Du styr antalet kolumner, rutstorleken, mellanrummet mellan cellerna och bakgrunden (transparent, vit eller svart).

Så byggs sprite-arket

  1. 1

    Släpp dina bilder

    Lägg till PNG-, JPG- eller WebP-filer. Ändra ordning med upp/ned-knapparna eller ta bort en ruta; arket byggs om direkt.

  2. 2

    Ställ in rutnätet

    Välj antal kolumner; antalet rader följer av hur många bilder du lagt till. Varje bild skalas för att passa i en kvadratisk ruta, med bibehållet bildförhållande och centrerad.

  3. 3

    Justera rutstorlek och mellanrum

    Välj rutstorleken i pixlar och lägg till mellanrum mellan cellerna så att intilliggande sprites inte flyter ihop vid skalning.

  4. 4

    Ladda ner PNG och kopiera CSS

    Spara sprite-arket som en enda PNG och kopiera de genererade CSS-klasserna, en `.spr-namn`-regel per bild med bredd, höjd och background-position.

Så fungerar layouten

Generatorn använder en enda förutsägbar layout: ett jämnt rutnät. Du anger antalet kolumner, och antalet rader är avrunda_uppåt(bilder / kolumner). Varje cell har samma kvadratiska storlek (den valda rutstorleken), så varje bild skalas för att passa i sin cell med bibehållet bildförhållande och centreras. Bilder av olika storlek hamnar alla i lika stora celler, precis vad CSS-sprites med background-position förväntar sig.

Inställning Intervall Effekt
Kolumner 1 till 16 Sprites per rad; raderna beräknas automatiskt
Rutstorlek 32 till 512 px Den kvadratiska cell som varje bild passas in i
Mellanrum 0 till 64 px Transparent lucka mellan celler mot hopflytning vid skalning
Bakgrund Transparent / Vit / Svart Fyllning bakom sprites i utdata-PNG:n

Formen på den genererade CSS-koden

Varje bild blir en klass med filens namn (.spr-<namn>), dimensionerad till rutstorleken och förskjuten till sin cell. Med fyra kolumner, en rutstorlek på 128 px och utan mellanrum ser arket ut så här:

.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; }

Offseten rör sig i två dimensioner: sprites fyller varje rad från vänster till höger och hoppar sedan till nästa rad. Spara PNG:n som spritesheet.png bredvid din CSS (eller ändra url(...) så att den matchar din sökväg).

Mellanrum och hopflytning

Sprites som packats kant i kant kan flyta ihop när webbläsaren skalar arket (icke-heltaliga pixelförhållanden, CSS-transformationer). Lägg till 2 till 4 pixlar mellanrum mellan cellerna så att intilliggande pixlar inte läcker in.

Skärmar med hög täthet (retina)

Det finns ingen automatisk 2x-export, men du kan enkelt få ett skarpare ark: välj en större rutstorlek (till exempel 256 px i stället för 128 px) så att varje sprite bär fler pixlar, och visa den sedan i halva CSS-storleken. Då får du skarpa sprites på skärmar med hög täthet utan en separat omgång.

Sprite sheets eller alternativ

  • Sprite sheets: klassiska ikonuppsättningar i CSS, HTML5-spelsrutor och sidor som tjänar på att bunta ihop många små bilder i en fil.
  • SVG-sprites (symbol): bättre för moderna gränssnittsikoner, skalar rent, tar emot fill i CSS, inget pillande med background-position.
  • Ikonteckensnitt: begränsade, men används fortfarande för pyttesmå enfärgade ikoner.
  • Separata filer med HTTP/2 eller HTTP/3: multiplexering gör antalet förfrågningar mindre viktigt än förr.

Vanliga frågor

Bilderna stannar i din webbläsare. I flerstegsflödet lagras de valda filerna och layouten tillfälligt i den här webbläsarfliken i högst 30 minuter. Ingenting skickas till en server eller läggs in i webbadressen.

Ja, men inline-SVG eller SVG-<symbol>-sprites passar oftast bättre för komponentramverk. CSS-sprite sheets kommer till sin rätt när många bilder visas samtidigt på statiska sidor.

Sätt antalet kolumner lika med antalet rutor så att varje ruta ligger på en rad, och styr den sedan med animation-timing-function: steps(N) i CSS och en background-position som hoppar cell för cell. Fungerar bra för korta loopade animationer (spinnare, vilolägen).

Varje cell i rutnätet har samma kvadratiska storlek (den valda rutstorleken), så varje bild passas in i sin cell och centreras. Är dina sprites redan identiska kvadrater, ställ in rutstorleken därefter så går de igenom oförändrade.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

QR-kodsgenerator

Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.

Ändra bildstorlek

Ändra bilder till exakta pixelmått eller procentvärden och behåll proportionerna. Smidigt för flera filer, utan uppladdning.

Streckkodsgenerator

Skapa en 1D-streckkod i webbläsaren i Code 128, EAN, UPC, ITF-14 och andra format som stöds och ladda ned den som SVG eller PNG.

Memgenerator

Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.

GIF-skapare

Gör en bildsekvens till en animerad GIF. Ställ in bildfrekvens, kvalitet och storlek före export.