CSS sprite generator

Kako da napraviš sprite sheet

1. Prevuci slike na polje za otpuštanje ili klikni na njega da ih izabereš. Prihvataju se PNG, SVG, WebP, JPG i drugi formati koje tvoj pregledač može da pročita, do 500 slika. Svaki fajl se pojavljuje na listi Slike sa svojom veličinom; dugme × uklanja jednu sliku, a Ukloni sve slike briše listu.
2. Izaberi Raspored: Mreža, Zbijeno (najmanja tabela), Vodoravna traka ili Uspravna traka. Uz Mreža polje Kolone (0 = automatski) određuje broj kolona.
3. Podesi Razmak (px) između sprajtova (podrazumevano 2) i označi Veličina stepena dvojke (256, 512, 1024…) ako to traži tvoj engine ili GPU.
4. Izaberi Fajl sa podacima: CSS (klase sa background-position), JSON (mapa kadrova) ili CSS i JSON. Podesi Ime fajla i Prefiks CSS klase (oba su podrazumevano „sprite“).
5. Proveri pregled, Veličina tabele i Iskorišćen prostor, pa klikni na Preuzmi ZIP (PNG + podaci) ili Preuzmi samo PNG. Generisani kod možeš i direktno da kopiraš.

Slike se dekodiraju u tvom pregledaču i ništa se ne otprema. SVG bez sopstvene širine i visine rasterizuje se sa dužom stranom od 256 px.

Izbor rasporeda

• Mreža daje svakoj slici ćeliju veličine najveće slike. Uz automatske kolone mreža je otprilike kvadratna. Jednostavna je i predvidiva, a idealna je kada su svi sprajtovi iste veličine, kao kod skupa pločica.
• Zbijeno (najmanja tabela) koristi pakovanje po policama: slike se sortiraju od najviše ka najnižoj i postavljaju sleva udesno u redove. Alat isprobava mnogo širina tabele i zadržava onu sa najmanjom površinom, uzimajući u obzir zaokruživanje na stepen dvojke kada je ta opcija uključena. Najbolje za ikonice različitih veličina.
• Vodoravna traka i Uspravna traka stavljaju slike u jedan red ili kolonu redosledom kojim si ih dodao. To očekuju mnogi plejeri animacija za kadrove.

Tabela ne može da pređe 16.384 px po strani ni oko 16,7 megapiksela, što je granica koju pregledači mogu da nacrtaju.

Korišćenje CSS-a

CSS sadrži osnovnu klasu sa tabelom kao background-image i no-repeat, a zatim po jednu klasu za svaki sprajt, imenovanu prema njegovom fajlu: home.png postaje sprite-home. Imena se pišu malim slovima, kvačice se uklanjaju, ostali znakovi postaju crtice, a duplikati dobijaju -2, -3.

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

Svaka klasa sprajta postavlja width, height i background-position sa negativnim pomacima. Sprajt na x = 40, y = 20 dobija background-position: -40px -20px: cela tabela se unutar elementa pomera 40 px ulevo i 20 px nagore, pa kroz okvir elementa prolazi samo taj sprajt. Razmak sprečava da susedni sprajtovi prodru kada se stranica uveća ili se tekstura filtrira.

Ekrani visoke gustine: nacrtaj slike u dvostruko većoj veličini od prikaza, generiši tabelu, zatim dodaj osnovnoj klasi background-size postavljen na polovinu veličine tabele i prepolovi širine, visine i pomake. Alat to ne generiše; to je ručno podešavanje.

Da li su sprajtovi još korisni uz HTTP/2?

Sprajtovi su izmišljeni da uštede HTTP zahteve. Uz multipleksiranje u HTTP/2 mnogo malih fajlova učitava se skoro jednako brzo kao jedan, pa je dobitak za sajtove mnogo manji, a SVG ikonice ili fontovi sa ikonicama su često bolji za skalabilne ikonice. Sprite sheet-ovi ostaju standard za 2D igre i kadrove animacija: jedna tekstura znači manje prebacivanja tekstura na GPU-u i jedan fajl za učitavanje.