Generátor CSS sprite sheet

Ako vytvoriť sprite sheet

1. Presuň obrázky do vyznačenej oblasti alebo na ňu klikni a vyber ich. Prijímajú sa PNG, SVG, WebP, JPG a ďalšie formáty, ktoré tvoj prehliadač vie čítať, až do 500 obrázkov. Každý súbor sa zobrazí v zozname Obrázky so svojou veľkosťou; tlačidlo × odstráni jeden obrázok a Odstrániť všetky obrázky vyprázdni zoznam.
2. Vyber Rozloženie: Mriežka, Husto zbalené (najmenší hárok), Vodorovný pás alebo Zvislý pás. Pri Mriežke nastavuje Stĺpce (0 = automaticky) počet stĺpcov.
3. Nastav Odsadenie (px) medzi spritmi (predvolene 2) a zaškrtni Rozmer v mocninách dvojky (256, 512, 1024…), ak to vyžaduje tvoj engine alebo grafická karta.
4. Vyber Súbor s údajmi: CSS (triedy s background-position), JSON (mapa snímok) alebo CSS a JSON. Uprav Názov súboru a Predponu tried CSS (obe predvolene „sprite“).
5. Skontroluj náhľad, Veľkosť hárka a Využité miesto a potom klikni na Stiahnuť ZIP (PNG + údaje) alebo Stiahnuť iba PNG. Vygenerovaný kód môžeš aj priamo skopírovať.

Obrázky sa dekódujú v tvojom prehliadači a nič sa nenahráva. SVG bez vlastnej šírky a výšky sa rasterizuje s dlhšou stranou 256 px.

Výber rozloženia

• Mriežka dá každému obrázku bunku s veľkosťou najväčšieho obrázka. Pri automatických stĺpcoch je mriežka približne štvorcová. Je jednoduchá a predvídateľná a ideálna, keď majú všetky sprity rovnakú veľkosť, napríklad sada dlaždíc.
• Husto zbalené (najmenší hárok) používa policové balenie: obrázky sa zoradia od najvyššieho a umiestnia sa zľava doprava do radov. Nástroj vyskúša mnoho šírok hárka a ponechá tú s najmenšou plochou, pričom pri zapnutej možnosti zohľadní zaokrúhlenie na mocniny dvojky. Najlepšie pre ikony rôznych veľkostí.
• Vodorovný pás a Zvislý pás zoradia obrázky do jedného riadka alebo stĺpca v poradí, v akom boli pridané. To očakáva veľa prehrávačov animácií pre snímky.

Hárok nemôže presiahnuť 16 384 px na stranu ani približne 16,7 megapixela, čo je limit, ktorý vedia prehliadače nakresliť.

Použitie CSS

CSS obsahuje základnú triedu s hárkom ako background-image a no-repeat, potom jednu triedu pre každý sprite pomenovanú podľa jeho súboru: home.png sa stane sprite-home. Názvy sa prevedú na malé písmená, diakritika sa odstráni, ostatné znaky sa zmenia na spojovníky a duplicity dostanú -2, -3.

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

Každá trieda spritu nastavuje width, height a background-position so zápornými posunmi. Sprite na pozícii x = 40, y = 20 dostane background-position: -40px -20px: celý hárok sa v elemente posunie o 40 px doľava a o 20 px nahor, takže cez rámik elementu presvitá iba tento sprite. Odsadenie bráni tomu, aby susedné sprity prenikali dnu pri priblížení stránky alebo filtrovaní textúry.

Obrazovky s vysokým rozlíšením (high-DPI): nakresli obrázky v dvojnásobnej zobrazovanej veľkosti, vygeneruj hárok, potom do základnej triedy pridaj background-size nastavené na polovicu veľkosti hárka a polovicu zmenši šírky, výšky aj posuny. Nástroj to negeneruje; ide o ručnú úpravu.

Sú sprity stále užitočné s HTTP/2?

Sprity vznikli na úsporu požiadaviek HTTP. S multiplexovaním HTTP/2 sa mnoho malých súborov načíta takmer rovnako rýchlo ako jeden, takže zisk pre weby je oveľa menší a ikony SVG alebo ikonové písma sú pre škálovateľné ikony často lepšie. Sprite sheety zostávajú štandardom pre 2D hry a snímky animácií: jedna textúra znamená menej prepínaní textúr na grafickej karte a jeden súbor na načítanie.