CSS-sprite sheet -generaattori

Näin teet sprite sheetin

1. Pudota kuvasi pudotusalueelle tai valitse ne napsauttamalla aluetta. PNG, SVG, WebP, JPG ja muut selaimesi lukemat muodot kelpaavat, enintään 500 kuvaa. Jokainen tiedosto ilmestyy Kuvat-luetteloon kokoineen. ×-painike poistaa yhden kuvan ja Poista kaikki kuvat tyhjentää luettelon.
2. Valitse Asettelu: Ruudukko, Pakattu (pienin arkki), Vaakasuuntainen nauha tai Pystysuuntainen nauha. Ruudukolla Sarakkeet (0 = automaattinen) määrää sarakkeiden määrän.
3. Aseta spritejen välinen Väli (px) (oletuksena 2) ja rastita Kahden potenssin koko (256, 512, 1024…), jos pelimoottorisi tai näytönohjaimesi sitä vaatii.
4. Valitse Datatiedosto: CSS (background-position-luokat), JSON (kehyskartta) tai CSS ja JSON. Säädä Tiedostonimi ja CSS-luokan etuliite (molemmat oletuksena ”sprite”).
5. Tarkista esikatselu, Arkin koko ja Käytetty tila ja napsauta sitten Lataa ZIP (PNG + data) tai Lataa vain PNG. Myös Luodun koodin voi kopioida suoraan.

Kuvat puretaan selaimessasi, eikä mitään lähetetä palvelimelle. SVG, jolla ei ole omaa leveyttä ja korkeutta, rasteroidaan niin, että sen pidempi sivu on 256 px.

Asettelun valinta

• Ruudukko antaa jokaiselle kuvalle suurimman kuvan kokoisen solun. Automaattisilla sarakkeilla ruudukko on suunnilleen neliö. Se on yksinkertainen ja ennustettava, ja se sopii ihanteellisesti, kun kaikki spritet ovat samankokoisia, kuten laattasarjassa.
• Pakattu (pienin arkki) käyttää hyllypakkausta: kuvat lajitellaan korkein ensin ja sijoitetaan vasemmalta oikealle riveihin. Työkalu kokeilee useita arkin leveyksiä ja säilyttää pienimmän pinta-alan antavan, ottaen huomioon kahden potenssin pyöristyksen, kun se on valittuna. Paras eri kokoisille kuvakkeille.
• Vaakasuuntainen nauha ja Pystysuuntainen nauha asettavat kuvat yhdelle riville tai sarakkeeseen lisäysjärjestyksessä. Sitä monet animaatiosoittimet odottavat kehyksiltä.

Arkki ei voi ylittää 16 384 px:ää per sivu eikä noin 16,7 megapikseliä, mikä on selainten piirtoraja.

CSS:n käyttö

CSS sisältää peruskaluokan, jossa arkki on background-image ja no-repeat, sekä yhden luokan kutakin spriteä kohti sen tiedostonimestä nimettynä: home.png muuttuu muotoon sprite-home. Nimet muutetaan pieniksi kirjaimiksi, aksentit poistetaan, muut merkit muutetaan tavuviivoiksi ja kaksoiskappaleille lisätään -2, -3.

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

Jokainen sprite-luokka asettaa width, height ja background-position-arvon negatiivisin siirtymin. Sprite kohdassa x = 40, y = 20 saa arvon background-position: -40px -20px: koko arkkia siirretään elementin sisällä 40 px vasemmalle ja 20 px ylös, joten vain kyseinen sprite näkyy elementin laatikon läpi. Väli estää naapurispritejä vuotamasta mukaan, kun sivua zoomataan tai tekstuuria suodatetaan.

Korkean DPI:n näytöt: piirrä kuvat kaksinkertaisiksi näyttökokoonsa nähden, luo arkki, lisää sitten peruskaluokkaan background-size, jonka arvo on puolet arkin koosta, ja puolita leveydet, korkeudet ja siirtymät. Työkalu ei luo tätä: se on manuaalinen säätö.

Ovatko spritet vielä hyödyllisiä HTTP/2:n aikakaudella?

Spritet keksittiin HTTP-pyyntöjen säästämiseksi. HTTP/2:n multipleksauksella monta pientä tiedostoa latautuu lähes yhtä nopeasti kuin yksi, joten verkkosivujen hyöty on paljon pienempi, ja SVG-kuvakkeet tai kuvakefontit ovat usein parempia skaalautuville kuvakkeille. Sprite sheetit ovat edelleen 2D-pelien ja animaatiokehysten vakioratkaisu: yksi tekstuuri tarkoittaa vähemmän näytönohjaimen tekstuurinvaihtoja ja yhden ladattavan tiedoston.