Sprite Sheet Generaattori
Yhdistä kuvat sprite sheetiksi vedä-järjestä-toisin, ruudukkoasettelu, täyte, skaalaustilat. Vie PNG/WebP/JPG JSON-atlas-tietojen kanssa pelimoottoreille ja CSS:lle.
Mikä on sprite-sheet ja miksi käyttää sellaista?
Sprite-sheet on yksi kuvatiedosto, joka sisältää useita pienempiä kuvia (spritejä) järjestettynä ruudukkoon. Sprite-sheetien käyttö vähentää HTTP-pyyntöjä, parantaa sivun lataussuorituskykyä ja tekee pelin renderöinnistä tehokkaampaa.
Mitkä kuvamuodot tuetaan?
Voit ladata PNG-, JPG-, GIF-, SVG- ja WebP-kuvia. Työkalu tukee erälatausta ja leikepöydältä liittämistä (Ctrl+V) nopeaa työnkulkua varten.
Mitkä vientimuodot ovat käytettävissä?
Vie sprite-sheets PNG-muodossa (läpinäkyvyydellä), WebP (nykyaikainen muoto pienemmällä tiedostokoolla) tai JPG (paras valokuville ilman läpinäkyvyyttä). Valitse kohdealueen vaatimusten mukaan.
Miten järjestän kuvat uudelleen sprite-sheetissä?
Vedä ja pudota kuvien pikkukuvat järjestääksesi niiden paikan sprite-sheetissä uudelleen. Voit myös liittää kuvia suoraan leikepöydältä käyttämällä Ctrl+V.
Mitä ovat JSON-atlas-tiedot ja mitkä moottorit tukevat niitä?
JSON-atlas-tiedot sisältävät jokaisen spriten sijainnin, koon ja kehystiedot. Ne ovat yhteensopivia suosittujen pelimoottoreiden kuten Phaser, PixiJS, Unity, Cocos2d ja monien muiden kanssa automaattiseen spritejen poimintaan.
Mitä eri skaalaustilat ovat?
Sovita säilyttää suhteet. Täytä peittää solun ja leikkaa. Venytä vääristää täyttämiseksi.
Tukeeko työkalu läpinäkyvyyttä?
Kyllä, PNG ja WebP säilyttävät läpinäkyvyyden. Voit myös asettaa mukautetun taustavärin, mikä on hyödyllistä JPG-vienneille, jotka eivät tue läpinäkyvyyttä.
Miten täyte vaikuttaa sprite-sheettiin?
Täyte lisää tilaa yksittäisten spritejen välille sheetissä, estäen visuaalisen vuotamisen, kun tekstuureja näytteistään. Tämä on erityisen tärkeää pelimoottoreille, jotka käyttävät lineaarista suodatusta.
Voinko käyttää sprite-sheetejä CSS:ään?
Kyllä, sprite-sheetit toimivat erinomaisesti CSS-spriteille. JSON-atlas-tietoja voidaan käyttää CSS background-position -sääntöjen generointiin, mikä vähentää HTTP-pyyntöjä ja parantaa sivun lataussuorituskykyä.
Mitkä ovat parhaat käytännöt sprite-sheetien mitoille?
Pidä mitat kakkosen potensseina (256x256, 512x512, 1024x1024) optimaalista GPU-tekstuurinkäsittelyä varten. Useimmat pelimoottorit suosivat näitä mittoja paremman suorituskyvyn ja yhteensopivuuden vuoksi.
Miten sprite-sheetit parantavat pelin suorituskykyä?
Sprite-sheetit vähentävät piirtokutsuja erittelemällä useita spritejä yhteen tekstuuriin. Tämä minimoi GPU-tilan muutokset, vähentää muistikuormitusta ja mahdollistaa tehokkaamman renderöinnin.
Mikä on ero sprite-sheetien ja tekstuuriatlasten välillä?
Sprite-sheetit järjestävät kehykset tyypillisesti tasaiseen ruudukkoon, kun taas tekstuuriatlaset voivat pakata epäsäännöllisen muotoiset spritet tehokkaammin käyttämällä algoritmeja kuten bin packing.
Näin käytät työkalua Sprite Sheet Generaattori
Yhdistä useita kuvia yhdeksi sprite sheetiksi suoraan selaimessa. Raahaa kehykset uuteen järjestykseen, hienosäädä ruudukko ja täyttö sekä vie PNG/WebP/JPG-atlas JSON-tietoineen pelimoottoreille ja CSS-spriteille. Käsittely tapahtuu täysin paikallisesti.
- Lisää kuvasi ja käytä + ja − -painikkeita ruudukon Columns- ja Rows-arvojen asettamiseen.
- Aseta Padding (px), jotta spritejen väliin jää tyhjää eikä tekstuuri vuoda.
- Jätä Sprite Size arvoon Auto sopimaan suurimpaan kehykseen tai syötä kiinteät mitat tasakokoisille soluille.
- Valitse Scale Mode — Fit, Fill tai Stretch — säätääksesi, miten kukin kuva sijoittuu soluunsa.
- Valitse Background (Transparent, White, Black tai Custom), aseta Format arvoon PNG, WebP tai JPG ja anna tiedostonimi kentässä Filename.
- Raahaa pikkukuvia järjestääksesi kehykset uudelleen — atlas-koordinaatit päivittyvät automaattisesti — ja vie arkki JSON-atlaseen yhdessä.
Käytä vähintään 2 px täyttöä, ettei vierekkäiset spritet vuoda toisiinsa, kun moottorisi skaalaa tai suodattaa tekstuureja.
Aiheeseen liittyvät työkalut
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- HTTP-pyyntö Testaaja Testaa REST API:ja suoraan selaimessasi. Lähetä GET-, POST-, PUT-, DELETE-pyyntöjä mukautetuilla otsikoilla, rungolla ja parametreilla. Näe vastauksen tila, otsikot ja JSON-runko heti.
- .htaccess-generaattori Luo Apache .htaccess-sääntöjä uudelleenohjauksille, uudelleenkirjoituksille, turvallisuusotsikoille, välimuistille ja muulle.
- Robots.txt Generaattori Ilmainen online robots.txt generaattori. Luo ja mukauta robots.txt-tiedostoja hallitaksesi hakukoneiden indeksointia, hallitaksesi indeksoijien pääsyä ja optimoidaksesi sivustosi SEO.
- Sivustokartta Generaattori Ilmainen online XML sivustokartta generaattori. Lisää URL-osoitteita, aseta prioriteetit ja luo SEO-sivustokarttoja heti.
- GIF Jaa Kehykset Pura ja lataa yksittäisiä kehyksiä GIF-animaatioista PNG:nä tai sprite-sheetinä. Ilmainen online-työkalu esikatselulla ja ZIP-viennillä.
- GIF Käänteinen Käännä GIF-animaatioiden toistojärjestys ilmaiseksi verkossa. Lataa, esikatsele ja lataa heti.