CSS Sprite Sheet Generator

Paano gumawa ng sprite sheet

1. I-drop ang iyong mga larawan sa drop zone, o i-click ito para pumili. Tinatanggap ang PNG, SVG, WebP, JPG at ang iba pang format na nababasa ng iyong browser, hanggang 500 larawan. Lalabas sa listahan ng Mga larawan ang bawat file kasama ang laki nito; inaalis ng × na button ang isang larawan at nililinis ng Alisin ang lahat ng larawan ang listahan.
2. Pumili ng Layout: Grid, Siksik (pinakamaliit na sheet), Pahalang na strip o Patayong strip. Sa Grid, itinatakda ng Mga column (0 = awtomatiko) ang bilang ng mga column.
3. Itakda ang Padding (px) sa pagitan ng mga sprite (2 bilang default) at lagyan ng tsek ang Laking power-of-two (256, 512, 1024…) kung kailangan ito ng iyong engine o GPU.
4. Piliin ang Data file: CSS (mga class na background-position), JSON (mapa ng mga frame) o CSS at JSON. Ayusin ang Pangalan ng file at ang Prefix ng CSS class (parehong “sprite” bilang default).
5. Suriin ang preview, ang Laki ng sheet at ang Nagamit na espasyo, saka i-click ang I-download ang ZIP (PNG + data) o PNG lang ang i-download. Puwede ring direktang kopyahin ang Nabuong code.

Dine-decode sa iyong browser ang mga larawan at walang ina-upload. Ang SVG na walang sariling lapad at taas ay ni-rasterize na may 256 px ang mas mahabang gilid.

Pagpili ng layout

• Binibigyan ng Grid ang bawat larawan ng cell na kasinglaki ng pinakamalaking larawan. Sa awtomatikong mga column, halos parisukat ang grid. Simple at predictable ito, at perpekto kapag magkakapareho ang laki ng lahat ng sprite, gaya ng tile set.
• Gumagamit ang Siksik (pinakamaliit na sheet) ng shelf packing: inaayos ang mga larawan mula sa pinakamataas at inilalagay mula kaliwa pakanan sa mga row. Sinusubukan ng tool ang maraming lapad ng sheet at pinapanatili ang may pinakamaliit na area, kasama ang pag-round sa power-of-two kapag naka-on ang option na iyon. Pinakamainam para sa mga icon na magkakaiba ang laki.
• Inilalagay ng Pahalang na strip at Patayong strip ang mga larawan sa isang row o column ayon sa pagkakasunod ng pagdaragdag mo. Iyon ang inaasahan ng maraming animation player para sa mga frame.

Hindi puwedeng lumampas ang sheet sa 16,384 px bawat gilid o mga 16.7 megapixel, ang limitasyon ng kayang iguhit ng mga browser.

Paggamit ng CSS

Naglalaman ang CSS ng base class na may sheet bilang background-image at no-repeat, saka isang class bawat sprite na hango sa pangalan ng file nito: ang home.png ay nagiging sprite-home. Ginagawang maliliit na titik ang mga pangalan, inaalis ang mga accent, nagiging gitling ang ibang character, at ang mga doble ay nagkakaroon ng -2, -3.

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

Nagtatakda ang bawat sprite class ng width, height at background-position na may negatibong offset. Ang sprite na nasa x = 40, y = 20 ay nakakakuha ng background-position: -40px -20px: inililipat ang buong sheet nang 40 px pakaliwa at 20 px pataas sa loob ng element, kaya ang sprite lang na iyon ang lumalabas sa kahon ng element. Pinipigilan ng padding na pumasok ang mga katabing sprite kapag naka-zoom ang page o kapag may filter ang texture.

Mga high-DPI na screen: iguhit ang iyong mga larawan sa dalawang beses ng laki ng display, gawin ang sheet, saka idagdag sa base class ang background-size na kalahati ng laki ng sheet, at hatiin sa dalawa ang mga lapad, taas at offset. Hindi ito ginagawa ng tool; manu-manong pag-aayos ito.

Kapaki-pakinabang pa ba ang mga sprite sa HTTP/2?

Naimbento ang mga sprite para makatipid ng mga HTTP request. Sa HTTP/2 multiplexing, halos kasing-bilis ng iisang file ang pag-load ng maraming maliliit na file, kaya mas maliit na ang pakinabang para sa mga website, at madalas na mas mainam ang mga SVG icon o icon font para sa mga scalable na icon. Nananatiling pamantayan ang mga sprite sheet sa mga 2D na laro at animation frame: ang isang texture ay nangangahulugan ng mas kaunting paglipat ng GPU texture at isang file lang ang ilo-load.