Ġeneratur tal-CSS sprite sheets

Kif tagħmel sprite sheet

1. Waqqa’ l-immaġini tiegħek fiż-żona tat-tqegħid, jew ikklikkja fuqha biex tagħżilhom. Jiġu aċċettati PNG, SVG, WebP, JPG u l-formati l-oħra li l-brawżer tiegħek jista’ jaqra, sa 500 immaġni. Kull fajl jidher fil-lista Immaġini bid-daqs tiegħu; il-buttuna × tneħħi immaġni waħda u Neħħi l-immaġini kollha tnaddaf il-lista.
2. Agħżel Tqassim: Grid, Mimli (l-iżgħar sheet), Strixxa orizzontali jew Strixxa vertikali. B’Grid, Kolonni (0 = awtomatiku) jistabbilixxi n-numru ta’ kolonni.
3. Issettja l-Padding (px) bejn is-sprites (2 b’mod predefinit) u immarka Daqs b’qawwa ta’ tnejn (256, 512, 1024…) jekk il-magna tal-logħob jew il-GPU tiegħek teħtieġ dan.
4. Agħżel il-Fajl tad-dejta: CSS (klassijiet background-position), JSON (mappa tal-frames) jew CSS u JSON. Irranġa l-Isem tal-fajl u l-Prefiss tal-klassi CSS (it-tnejn “sprite” b’mod predefinit).
5. Iċċekkja l-previżjoni, id-Daqs tas-sheet u l-Spazju użat, imbagħad ikklikkja Niżżel ZIP (PNG + dejta) jew Niżżel PNG biss. Il-Kodiċi ġenerat jista’ jiġi kkopjat ukoll direttament.

L-immaġini jiġu dekodifikati fil-brawżer tiegħek u xejn ma jittella’. SVG mingħajr wisa’ u għoli proprji jiġi rasterizzat bl-itwal naħa tiegħu f’256 px.

Kif tagħżel tqassim

• Grid jagħti kull immaġni ċellola bid-daqs tal-akbar immaġni. B’kolonni awtomatiċi l-grid huwa kważi kwadru. Huwa sempliċi u prevedibbli, u ideali meta s-sprites kollha jkunu tal-istess daqs, bħal sett ta’ tiles.
• Mimli (l-iżgħar sheet) juża shelf packing: l-immaġini jiġu ssortjati mill-itwal l-ewwel u jitqiegħdu mix-xellug għall-lemin f’ringieli. L-għodda tipprova ħafna wisgħat tas-sheet u żżomm dik bl-iżgħar erja, billi tqis ir-rawnding għal qawwa ta’ tnejn meta dik l-għażla tkun attiva. L-aħjar għal ikoni ta’ daqsijiet imħallta.
• Strixxa orizzontali u Strixxa vertikali jpoġġu l-immaġini f’ringiela jew kolonna waħda fl-ordni li żidthom. Dan huwa dak li jistennew ħafna players tal-animazzjoni għall-frames.

Is-sheet ma jistax jaqbeż 16,384 px għal kull naħa jew madwar 16.7 megapixels, il-limitu li l-brawżers jistgħu jpinġu.

Użu tas-CSS

Is-CSS fih klassi bażi bis-sheet bħala background-image u no-repeat, imbagħad klassi waħda għal kull sprite li tieħu isimha mill-fajl: home.png isir sprite-home. L-ismijiet jinkitbu b’ittri żgħar, l-aċċenti jitneħħew, karattri oħra jsiru hyphens, u d-duplikati jieħdu -2, -3.

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

Kull klassi ta’ sprite tistabbilixxi width, height u background-position b’offsets negattivi. Sprite f’x = 40, y = 20 jieħu background-position: -40px -20px: is-sheet kollu jinġarr 40 px lejn ix-xellug u 20 px ’il fuq ġewwa l-element, għalhekk biss dak l-sprite jidher mill-kaxxa tal-element. Il-padding iżomm lill-sprites ġirien milli jidħlu meta l-paġna tiġi zoomjata jew texture tiġi ffiltrata.

Skrins b’DPI għoli: ipponġi l-immaġini tiegħek bid-doppju tad-daqs li juru, ġenera s-sheet, imbagħad żid background-size mal-klassi bażi bin-nofs tad-daqs tas-sheet, u nofs il-wisa’, l-għoli u l-offsets. L-għodda ma tiġġenerax dan; huwa aġġustament manwali.

Is-sprites għadhom utli bl-HTTP/2?

Is-sprites ġew maħluqa biex jiffrankaw talbiet HTTP. Bil-multiplexing tal-HTTP/2, ħafna fajls żgħar jitgħabbew kważi malajr daqs wieħed, għalhekk il-qligħ għas-siti web huwa ħafna iżgħar, u l-ikoni SVG jew il-fonts tal-ikoni spiss ikunu aħjar għall-ikoni skalabbli. Is-sprite sheets jibqgħu l-istandard għal-logħob 2D u l-frames tal-animazzjoni: texture waħda tfisser inqas bdil ta’ textures tal-GPU u fajl wieħed x’titgħabba.