Gjenerues CSS sprite sheet

Si ta bësh një sprite sheet

1. Lësho imazhet në zonën e zgjedhjes ose kliko mbi të për t’i zgjedhur. Pranohen PNG, SVG, WebP, JPG dhe formatet e tjera që lexon shfletuesi yt, deri në 500 imazhe. Çdo skedar shfaqet në listën Imazhet me madhësinë e tij; butoni × e heq një imazh dhe Hiq të gjitha imazhet e pastron listën.
2. Zgjidh një Faqosja: Rrjetë, E ngjeshur (fleta më e vogël), Shirit horizontal ose Shirit vertikal. Me Rrjetë, Kolonat (0 = automatike) caktojnë numrin e kolonave.
3. Cakto Hapësira e brendshme (px) mes sprite-ve (2 si parazgjedhje) dhe shëno Madhësi fuqi e dyshit (256, 512, 1024…) nëse motori ose GPU-ja jote e kërkon.
4. Zgjidh Skedari i të dhënave: CSS (klasa background-position), JSON (hartë kuadrosh) ose CSS dhe JSON. Rregullo Emri i skedarit dhe Parashtesa e klasave CSS (të dyja “sprite” si parazgjedhje).
5. Kontrollo pamjen paraprake, Madhësia e fletës dhe Hapësira e përdorur, pastaj kliko Shkarko ZIP (PNG + të dhëna) ose Shkarko vetëm PNG. Kodi i gjeneruar mund të kopjohet edhe drejtpërdrejt.

Imazhet dekodohen në shfletuesin tënd dhe asgjë nuk ngarkohet. Një SVG pa gjerësi e lartësi të veten rasterizohet me anën më të gjatë 256 px.

Zgjedhja e faqosjes

• Rrjetë i jep çdo imazhi një qelizë sa imazhi më i madh. Me kolona automatike rrjeta është afërsisht katrore. Është e thjeshtë dhe e parashikueshme, ideale kur të gjithë sprite-t kanë të njëjtën madhësi, si një grup pllakash.
• E ngjeshur (fleta më e vogël) përdor paketimin me rafte: imazhet renditen nga më i larti dhe vendosen nga e majta në të djathtë në rreshta. Mjeti provon shumë gjerësi fletësh dhe mban atë me sipërfaqen më të vogël, duke marrë parasysh rrumbullakimin në fuqi të dyshit kur ky opsion është aktiv. Më e mira për ikona me madhësi të përziera.
• Shirit horizontal dhe Shirit vertikal i vendosin imazhet në një rresht ose një kolonë sipas radhës që i ke shtuar. Kjo është ajo që pret shumica e lexuesve të animacioneve për kuadrot.

Fleta nuk mund të kalojë 16 384 px për anë ose rreth 16,7 megapiksele, kufirin që mund të vizatojnë shfletuesit.

Përdorimi i CSS-it

CSS-i përmban një klasë bazë me fletën si background-image dhe no-repeat, pastaj një klasë për çdo sprite me emrin e nxjerrë nga skedari: home.png bëhet sprite-home. Emrat kalojnë në shkronja të vogla, theksat hiqen, karakteret e tjera bëhen vizëza dhe dublikatat marrin -2, -3.

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

Çdo klasë sprite cakton width, height dhe një background-position me zhvendosje negative. Një sprite te x = 40, y = 20 merr background-position: -40px -20px: e gjithë fleta zhvendoset 40 px majtas dhe 20 px lart brenda elementit, kështu që nga kutia e elementit duket vetëm ai sprite. Hapësira e brendshme i pengon sprite-t fqinjë të futen kur faqja zmadhohet ose kur një teksturë filtrohet.

Ekrane me DPI të lartë: vizato imazhet në dyfishin e madhësisë së shfaqjes, gjenero fletën, pastaj shto background-size të vendosur në gjysmën e madhësisë së fletës te klasa bazë dhe përgjysmo gjerësitë, lartësitë dhe zhvendosjet. Mjeti nuk e gjeneron këtë; është një rregullim manual.

A janë sprite-t ende të dobishëm me HTTP/2?

Sprite-t u shpikën për të kursyer kërkesat HTTP. Me multipleksimin e HTTP/2, shumë skedarë të vegjël ngarkohen pothuajse po aq shpejt sa një i vetëm, ndaj përfitimi për faqet e internetit është shumë më i vogël dhe ikonat SVG ose shkronjat-ikona shpesh janë më të mira për ikona të shkallëzueshme. Sprite sheet mbeten standardi për lojërat 2D dhe kuadrot e animacioneve: një teksturë do të thotë më pak ndërrime teksturash në GPU dhe një skedar për t’u ngarkuar.