Sprite Sheet -generaattori

Yhdistä useita kuvia yhdeksi sprite-arkiksi ja luo CSS-koodi.

Jakaa:

Vedä ja pudota kuvat tähän

tai napsauta ladataksesi useita tiedostoja

Why Use This Tool?

Korkean Tehokkuuden Frontend-optimointityökalut

Reduce HTTP requests and speed up loading.

1

Automaattinen Koordinaattien Generointi

Me hoidamme matematiikan. Saat välittömästi tarkat X- ja Y-koordinaatit jokaiselle kuvalle yhdistetyssä sprite-arkissa.

2

Älykäs Ruudukkopakkausalgoritmi

Moottorimme järjestää älykkäästi erikokoisia kuvia mahdollisimman tehokkaaseen ruudukkoon minimoiden tyhjän tilan.

3

Valmiit CSS-luokat

Luo siistin, kopioi-ja-liitä-valmiin CSS-lohkon yksittäisillä luokilla jokaiselle resurssille, sisältäen background-position ja dimension-ominaisuudet.

4

Mukautettavat Asettelutilat

Valitse pystynauhan, vaakanauhan tai tehokkaimman 'Ruudukkotilan' välillä projektin tarpeiden mukaan.

5

Täytteen ja Välyksen Hallinta

Lisää mukautettua välytyistä sprite-kuvien väliin estääksesi 'pikselivuotoa' — jossa viereisen kuvakkeen osia näkyy käyttöliittymässä.

6

Paikallinen Käsittely

Käyttöliittymäresurssisi ovat omaisuuttasi. Kaikki pakkaus ja koodin generointi tapahtuu selaimessasi.

Nopeuskurssi: Kuinka Käyttää Generaattoria

Create sprites in minimal steps.

1

Kerää Pienet Resurssisi

Kokoa kaikki pienet kuvakkeet, painikkeet tai animaation kehykset, jotka haluat yhdistää. Varmista, että ne ovat korkealaatuisessa muodossa kuten PNG.

2

Erälataa Työkaluun

Valitse kaikki tiedostot kerralla ja lataa ne. Työkalu luo välittömästi esikatselun pakkauksen tuloksesta.

3

Määritä Optimointi

Säädä 'Täyte' jos huolettaa reunojen näkyminen retina-näytöillä, tai valise 'Pystyasettelu' sivuvalikkoa tai filminauhaa varten.

4

Tarkista Sprite-esikatselu

Tarkista luotu arkki. Varmista, että jokainen kohde on näkyvissä ja ruudukko on tiivis ja tehokas.

5

Lataa Atlas-kuva

Napsauta 'Lataa Sprite-arkki' -painiketta tallentaaksesi yhdistetyn kuvatiedoston projektin resurssikansioon.

Sprite-arkin Usein Kysytyt Kysymykset

Ovatko sprite-arkit vieläkin ajankohtaisia HTTP/2:n kanssa?
Kyllä! Vaikka HTTP/2 käsittelee useita pyyntöjä paremmin, sprite-arkit ovat silti nopeampia, koska ne vähentävät metadatan ja pakkauksen kokonaismäärää.
Mitä tapahtuu, jos kuvani ovat erikokoisia?
Älykäs ruudukkialgoritmimme on suunniteltu juuri tähän! Se järjestää kaikenkokoiset kuvat kompakteimmaksi mahdolliseksi suorakulmioksi.
Pitäisikö käyttää JPG:tä vai PNG:tä sprite-arkissa?
Suosittelemme vahvasti PNG:tä. Se käsittelee kuvakkeiden terävät reunat paremmin ja tukee läpinäkyvyyttä, mikä on olennaista useimmille verkkokäyttöliittymille.
Onko kuvien lukumäärälle rajaa?
Teknisesti ei. Suosittelemme kuitenkin pysymään noin 50-100 kuvassa per arkki, jotta tiedoston koko pysyy hallittavana.
Mikä on 'pikselivuoto'?
Tämä tapahtuu, kun alipikselirenderöinti näyttää viipaleen viereisestä kuvasta arkissa. Lisää 1-2 pikseliä 'Täytettä' työkalussamme estääksesi tämän.
Tukeeko tämä työkalu SVG:tä?
Tämä työkalu on rasterispirteille (PNG/JPG). SVG:lle sinun tulisi käyttää 'SVG Sprite' -lähestymistapaa, joka toimii eri tavalla nykyaikaisissa selaimissa.
Kuinka päivitän sprite-arkin myöhemmin?
Lataa vain alkuperäiset kuvakkeet ja uusi lisäys uudelleen. Työkalumme antaa sinulle uuden arkin ja uudet CSS:t sekunneissa.
Onko työkalu ilmainen pelikehittäjille?
Kyllä! Olipa kyseessä verkkosivusto tai mobiilipeli, generaattorimme on 100% ilmainen ilman kaupallisia rajoituksia.
Voivatko selaimet välimuistittaa sprite-arkkeja?
Kyllä! Tämä on yksi suurimmista eduista. Selain tarvitsee välimuistittaa vain yhden tiedoston kaikkien sivustosi kuvakkeiden näyttämiseksi.
Ovatko kuvakeresurssini turvassa?
Ehdottomasti. Koska tiedostosi käsitellään paikallisesti selaimessasi, suunnitteluasi ei koskaan ladata tai tallenneta järjestelmäämme.