Sprite Sheet Generátor
Egyesítse a képeket sprite sheet-té húzással való átrendezéssel, rács elrendezéssel, kitöltéssel, méretezési módokkal. Exportálja PNG/WebP/JPG-ként JSON atlas adatokkal játékmotorokhoz és CSS-hez.
Mi az a sprite lap és miért érdemes használni?
A sprite lap egy olyan képfájl, amely több kisebb képet (sprite-ot) tartalmaz rácsban elrendezve. A sprite lapok használata csökkenti a HTTP kéréseket, javítja az oldal betöltési teljesítményét és hatékonyabbá teszi a játék renderelést.
Milyen képformátumok támogatottak?
PNG, JPG, GIF, SVG és WebP képeket tölthet fel. Az eszköz támogatja a kötegelt feltöltést és a vágólapról való beillesztést (Ctrl+V) a gyors munkafolyamat érdekében.
Milyen export formátumok érhetők el?
Exportálja a sprite lapokat PNG-ként (átlátszósággal), WebP-ként (modern formátum kisebb fájlmérettel) vagy JPG-ként (a legjobb fotókhoz átlátszóság nélkül). Válasszon a célplatform követelményei alapján.
Hogyan rendezem át a képeket a sprite lapon?
Húzza és ejtse a kép bélyegképeket a sprite lapban való pozíciójuk átrendezéséhez. Ctrl+V használatával közvetlenül is beilleszthet képeket a vágólapról.
Mik a JSON atlas adatok és mely motorok támogatják?
A JSON atlas adatok minden sprite pozícióját, méretét és adatait tartalmazzák. Kompatibilis a Phaser, PixiJS, Unity, Cocos2d és sok más automatikus sprite kinyeréshez.
Mik a különböző méretezési módok?
Illeszkedik megtartja az arányokat. Kitöltés fedi a cellát és vág. Nyújtás deformál a kitöltéshez.
Támogatja az eszköz az átlátszóságot?
Igen, a PNG és WebP megőrzi az átlátszóságot. Egyéni háttérszín is beállítható, ami hasznos a JPG exportokhoz, amelyek nem támogatják az átlátszóságot.
Hogyan befolyásolja a kitöltés a sprite lapot?
A kitöltés térközt ad az egyes sprite-ok között a lapon, megakadályozva a vizuális vérzést a textúrák mintavételezésekor. Ez különösen fontos a lineáris szűrést használó játékmotorok számára.
Használhatom a sprite lapokat CSS-hez?
Igen, a sprite lapok kiválóan működnek CSS sprite-okhoz. A JSON atlas adatok használhatók CSS background-position szabályok generálására, csökkentve a HTTP kéréseket és javítva az oldal betöltési teljesítményét.
Mik a legjobb gyakorlatok a sprite lap méreteihez?
Tartsa a méreteket 2 hatványaként (256x256, 512x512, 1024x1024) az optimális GPU textúra kezelés érdekében. A legtöbb játékmotor ezeket a méreteket preferálja a jobb teljesítmény és kompatibilitás érdekében.
Hogyan javítják a sprite lapok a játék teljesítményét?
A sprite lapok csökkentik a rajzolási hívásokat több sprite egyetlen textúrába történő kötegelésével. Ez minimalizálja a GPU állapotváltozásokat, csökkenti a memória terhelést és hatékonyabb renderelést tesz lehetővé.
Mi a különbség a sprite lapok és a textúra atlasok között?
A sprite lapok tipikusan egyenletes rácsban rendezik el a kereteket, míg a textúra atlasok hatékonyabban csomagolhatnak szabálytalan alakú sprite-okat olyan algoritmusokkal mint a bin packing.
A(z) Sprite Sheet Generátor használata
Vonjon össze több képet egyetlen sprite sheet-té közvetlenül a böngészőjében. Húzással rendezze át a képkockákat, finomhangolja a rácsot és a távolságokat, majd exportáljon PNG/WebP/JPG atlaszt JSON-adatokkal game engine-ekhez és CSS sprite-okhoz. Minden feldolgozás helyben történik.
- Adja hozzá a képeit, és a + és − gombokkal állítsa be a rács Columns és Rows értékét.
- Állítson be Padding (px) értéket, hogy hely maradjon a sprite-ok között és ne folyjon össze a textúra.
- Hagyja a Sprite Size-t Auto-n, hogy a legnagyobb képkockához illeszkedjen, vagy írjon be rögzített méretet az egységes cellákhoz.
- Válasszon Scale Mode-t — Fit, Fill vagy Stretch —, hogy meghatározza, hogyan ül minden kép a saját cellájában.
- Válasszon Background-ot (Transparent, White, Black vagy Custom), állítsa a Format-ot PNG, WebP vagy JPG formátumra, és nevezze el a fájlt a Filename mezőben.
- Húzza a bélyegképeket a képkockák átrendezéséhez — az atlasz-koordináták automatikusan frissülnek —, majd exportálja a sheetet a JSON atlaszsal együtt.
Hagyjon legalább 2 px távolságot, hogy a szomszédos sprite-ok ne folyjanak össze, amikor az engine átméretezi vagy szűri a textúrákat.
Kapcsolódó eszközök
- Chmod-számológép Ingyenes online chmod-számológép a Linux fájljogosultságok vizualizálásához és számításához jelölőnégyzetekkel. Azonnali átváltás numerikus (755, 644) és szimbolikus jelölés (rwxr-xr-x) között. Támogatja a különleges jogosultságokat mint setuid, setgid, sticky bit.
- ASCII Táblázat Teljes ASCII karakterkódolási referencia tizes, tizenhatos, nyolcas, kettes számrendszerbeli kódokkal, HTML entitásokkal és karakterleírásokkal. Azonnali keresés és szűrés.
- HTTP Kérés Tesztelő Tesztelje a REST API-kat közvetlenül a böngészőben. Küldjön GET, POST, PUT, DELETE kéréseket egyedi fejlécekkel, törzzsel és paraméterekkel. Azonnal láthatja a válasz állapotát, fejléceit és JSON törzsét.
- .htaccess generátor Apache .htaccess szabályok generálása átirányításokhoz, újraírásokhoz, biztonsági fejlécekhez, gyorsítótárazáshoz és egyebekhez.
- Robots.txt Generátor Ingyenes online robots.txt generátor. Hozzon létre és szabjon testre robots.txt fájlokat a keresőmotorok mászásának szabályozására, a mászók hozzáférésének kezelésére és weboldala SEO optimalizálására.
- Sitemap Generátor Ingyenes online XML sitemap generátor. Adjon hozzá URL-eket, állítson be prioritásokat és gyakoriságokat, készítsen SEO sitemapokat azonnal.
- GIF Képkocka Bontás Egyedi képkockák kinyerése és letöltése GIF animációkból PNG vagy sprite lapként. Ingyenes online eszköz előnézettel és ZIP exportálással.
- GIF Visszafelé GIF animáció lejátszási sorrendjének megfordítása ingyen online. Töltsön fel, előnézzen és töltsön le azonnal.