Sprite Sheet Vágó – Képek Kiszeletelése
Várd fel a sprite sheet-et egyedi képekre megadott rácsméret alapján böngészőben. Játékfejlesztőknek, UI designereknek.
Miről szól ez az eszköz?
Darabolj fel sprite sheet képeket egyedi frame-ekre automatikusan, megadott cellaméret alapján. Az eszköz PNG, JPG vagy WebP sprite sheet-eket kezel, és az összes kivágott képkockát ZIP archívumban exportálja. Ideális játékfejlesztéshez, animációs frame-ek kinyeréséhez és ikonkészletek feldolgozásához.
Hogyan használd a(z) Sprite Sheet Vágó – Képek Kiszeletelése-t?
-
Sprite sheet feltöltése
Húzd be a sprite sheet képet a feltöltési területre, vagy kattints a tallózás gombra. PNG, JPG és WebP formátumok támogatottak. Az előnézetben azonnal megjelenik a kép teljes mérete.
-
Cellaméret megadása
Add meg egy sprite cella szélességét és magasságát pixelben. Az eszköz automatikusan kiszámolja, hány sor és oszlop fér a sprite sheet-be, és megjeleníti a rácsfelosztást az előnézetben.
-
Rácsfelosztás ellenőrzése
Az előnézetben rácsvonalas overlay-vel ellenőrizheted, hogy a felosztás pontosan illeszkedik-e a sprite-okhoz. Ha a vonalak nem a megfelelő helyen vannak, módosítsd a cellaméretet.
-
Exportálás és letöltés
Kattints az exportálás gombra – az OffscreenCanvas API kivágja az egyes cellákat, és az összes frame-et PNG fájlként, egyetlen ZIP archívumba csomagolva töltheted le.
Mikor van rá szükséged?
-
Játékfejlesztés
Animációs frame-ek, karakter sprite-ok, ellenségek és effektek szétválasztása sprite sheet-ekből. A kivágott frame-ek közvetlenül felhasználhatók Unity-ben, Godot-ban vagy bármilyen játékfejlesztő környezetben.
-
UI ikonkészletek feldolgozása
CSS sprite sheet-ek és ikonkészletek egyedi ikonokra bontása. Hasznos, ha egy nagy ikon sprite-ból egyedi PNG fájlokat szeretnél készíteni.
-
Animáció elemzés és szerkesztés
Animációs sprite sheet-ek frame-enkénti szétválasztása egyéni szerkesztéshez, módosításhoz vagy újrakombináláshoz.
-
Asset exportálás és konverzió
Játékfejlesztési és grafikai asset-ek sprite sheet-ből való kinyerése egyedi fájlokba, más formátumba konvertáláshoz vagy átszervezéshez.
A sprite sheet vágásról és a sprite-ok felhasználásáról
A sprite sheet (más néven texture atlas) egy hatékony grafikai technika, amelyben több kisebb képet (sprite-ot) egyetlen nagy képfájlba rendeznek egységes rácsban. A játékfejlesztésben animációs képkockák, karakterek és effektek tárolására használják, a webfejlesztésben pedig CSS sprite-ként ikonkészletek optimalizálására.
Az eszközünk a megadott cellaméret alapján kiszámolja a rácsban lévő sorok és oszlopok számát, majd az OffscreenCanvas API segítségével pixelpontos vágásokkal kinyeri az egyes cellákat. A kivágott frame-ek PNG formátumban kerülnek exportálásra (az átlátszóság megőrzéséért), és egyetlen ZIP archívumba csomagolva tölthetők le.
A sprite sheet vágás különösen hasznos, ha egy meglévő sprite sheet-ből egyedi frame-eket szeretnél kinyerni szerkesztéshez, konvertáláshoz vagy más játékmotorba való importáláshoz. Az sor-oszlop alapú fájlnevezés (sprite-00-00.png) megkönnyíti a programozási célú felhasználást és az animációs szekvenciák összeállítását.
Hasznos tippek
-
Ha nem tudod pontosan a cellaméretet, oszd el a sprite sheet teljes szélességét az oszlopok számával és a magasságot a sorok számával – az eredmény lesz a cellaméret.
-
Használd az előnézeti rácsvonal overlay-t a cellaméret ellenőrzéséhez: a vonalaknak pontosan a sprite-ok határain kell futniuk. Ha nem illeszkednek, módosítsd a méretet.
-
Ha a sprite sheet szélein üres cellák vannak (pl. az utolsó sor nem telt), az eszköz ezeket is exportálja – a feleslegeseket utólag törölheted a ZIP-ből.
-
Játékfejlesztéshez érdemes a kivágott frame-eket szekvenciálisan elnevezni (sprite-00-00, sprite-00-01, ...) – ez megkönnyíti az animációs importálást a legtöbb game engine-ben.
Gyakori kérdések
- Egy sprite sheet egyetlen nagy képfájl, amely több kisebb képet (például animációs kereteket, ikonokat, játékbeli karaktereket) tartalmaz egységes rácsban.
- Add meg az egy cella szélességét és magasságát pixelben. Az eszköz automatikusan kiszámítja, hány sor és oszlop van, és egyenként exportálja a cellákat.
- ZIP archívumban, ahol minden cella sprite-0-0.png, sprite-0-1.png stb. névvel kerül be.
- sprite-00-00.png, sprite-00-01.png, sprite-01-00.png stb. formátumban – az első szám a sor, a második az oszlop indexe (0-tól számozva). Ez megkönnyíti a programozási célú felhasználást.
- Igen, a cellaméret szélességben és magasságban külön-külön megadható, így téglalap alakú cellák is támogatottak. Ha a sprite sheet nem osztható pontosan a cellákkal, a maradék pixelek levágásra kerülnek.
- Igen, a teljes feldolgozás a böngésződben történik az OffscreenCanvas API segítségével. A sprite sheet képed nem kerül szerverre.
- PNG, JPG és WebP formátumú sprite sheet-eket egyaránt elfogad. A kimenet mindig PNG formátumú az átlátszóság megőrzése érdekében.
- Nyisd meg a sprite sheet-et egy képszerkesztőben és mérd meg egy cella szélességét és magasságát pixelben. Vagy oszd el a teljes kép méretét az oszlopok/sorok számával. Az előnézeti rács segít ellenőrizni, hogy a méret helyes-e.
- Az eszköz akár több száz cellát is feldolgozhat egyetlen sprite sheet-ből. A feldolgozási sebesség a géped teljesítményétől függ, de tipikusan néhány másodperc alatt elkészül.