Generator Sprite Sheet
Combinați imaginile în sprite sheet-uri cu tragere pentru reordonare, aspect grilă, padding, moduri de scalare. Exportați PNG/WebP/JPG cu date JSON atlas pentru motoare de jocuri și CSS.
Ce este un sprite sheet și de ce să folosim unul?
Un sprite sheet este un singur fișier imagine care conține mai multe imagini mai mici (sprite-uri) aranjate într-o grilă. Utilizarea sprite sheet-urilor reduce cererile HTTP, îmbunătățește performanța de încărcare a paginii și face randarea jocurilor mai eficientă.
Ce formate de imagine sunt suportate?
Puteți încărca imagini PNG, JPG, GIF, SVG și WebP. Instrumentul suportă încărcare în lot și lipire din clipboard (Ctrl+V) pentru un flux de lucru rapid.
Ce formate de export sunt disponibile?
Exportați sprite sheet-uri ca PNG (cu transparență), WebP (format modern cu dimensiune mai mică a fișierului) sau JPG (cel mai bun pentru fotografii fără transparență). Alegeți în funcție de cerințele platformei țintă.
Cum reordonez imaginile în sprite sheet?
Trageți și plasați miniaturile imaginilor pentru a le reordona poziția în sprite sheet. Puteți și lipi imagini direct din clipboard folosind Ctrl+V.
Ce sunt datele JSON atlas și ce motoare le suportă?
Datele JSON atlas conțin poziția, dimensiunea și informațiile de cadru pentru fiecare sprite. Sunt compatibile cu motoare de joc populare precum Phaser, PixiJS, Unity, Cocos2d și multe altele pentru extragerea automată a sprite-urilor.
Care sunt diferitele moduri de scalare?
Potrivire păstrează proporțiile. Umplere acoperă celula și decupează. Întindere deformează pentru umplere.
Instrumentul suportă transparență?
Da, PNG și WebP păstrează transparența. Puteți seta și o culoare de fundal personalizată, utilă pentru exporturile JPG care nu suportă transparență.
Cum afectează padding-ul sprite sheet-ul?
Padding-ul adaugă spațiu între sprite-urile individuale din foaie, prevenind scurgerea vizuală când texturile sunt eșantionate. Acest lucru este deosebit de important pentru motoarele de joc care folosesc filtrare liniară.
Pot folosi sprite sheet-uri pentru CSS?
Da, sprite sheet-urile funcționează excelent pentru sprite-uri CSS. Datele JSON atlas pot fi folosite pentru a genera reguli CSS background-position, reducând cererile HTTP și îmbunătățind performanța de încărcare a paginii.
Care sunt cele mai bune practici pentru dimensiunile sprite sheet-urilor?
Mențineți dimensiunile ca puteri ale lui 2 (256x256, 512x512, 1024x1024) pentru manipularea optimă a texturilor GPU. Majoritatea motoarelor de joc preferă aceste dimensiuni pentru performanță și compatibilitate mai bună.
Cum îmbunătățesc sprite sheet-urile performanța jocurilor?
Sprite sheet-urile reduc apelurile de desen prin gruparea mai multor sprite-uri într-o singură textură. Acest lucru minimizează schimbările de stare GPU, reduce supraîncărcarea memoriei și permite randarea mai eficientă.
Care este diferența dintre sprite sheet-uri și atlasuri de texturi?
Sprite sheet-urile aranjează de obicei cadrele într-o grilă uniformă, în timp ce atlasurile de texturi pot împacheta sprite-uri cu forme neregulate mai eficient folosind algoritmi precum bin packing.
Cum se folosește Generator Sprite Sheet
Combină mai multe imagini într-o singură sprite sheet direct în browser. Trage pentru a reordona cadrele, ajustează fin grila și spațierea, apoi exportă un atlas PNG/WebP/JPG cu date JSON pentru game engine-uri și sprite-uri CSS. Totul se procesează local.
- Adaugă imaginile și folosește butoanele + și − pentru a stabili Columns și Rows ale grilei.
- Setează Padding (px) pentru a lăsa spațiu între sprite-uri și a evita sângerarea texturilor.
- Lasă Sprite Size pe Auto pentru cadrul cel mai mare, sau tastează dimensiuni fixe pentru celule uniforme.
- Alege un Scale Mode — Fit, Fill sau Stretch — pentru a controla cum se încadrează fiecare imagine în celula ei.
- Alege un Background (Transparent, White, Black sau Custom), setează Format pe PNG, WebP sau JPG și denumește fișierul în Filename.
- Trage miniaturile pentru a reordona cadrele — coordonatele atlasului se actualizează automat — apoi exportă fișa împreună cu JSON-ul.
Folosește cel puțin 2 px spațiere ca sprite-urile vecine să nu se amestece atunci când texturile sunt scalate sau filtrate în engine.
Instrumente conexe
- Calculator Chmod Calculator chmod online gratuit pentru vizualizarea și calcularea permisiunilor fișierelor Linux cu casete de selectare. Conversie instantanee între notația numerică (755, 644) și simbolică (rwxr-xr-x). Suportă permisiuni speciale precum setuid, setgid, sticky bit.
- Tabel ASCII Referință completă de codificare a caracterelor ASCII cu coduri zecimale, hexazecimale, octale, binare, entități HTML și descrieri de caractere. Căutare și filtrare instantanee.
- Testator Cereri HTTP Testați API-urile REST direct în browser. Trimiteți cereri GET, POST, PUT, DELETE cu antete, corp și parametri personalizați. Vedeți instantaneu starea, antetele și corpul JSON al răspunsului.
- Generator .htaccess Generați reguli .htaccess Apache pentru redirecționări, rescrieri, antete de securitate, cache și altele.
- Generator Robots.txt Generator gratuit online de robots.txt. Creați și personalizați fișiere robots.txt pentru a controla crawlarea motoarelor de căutare, a gestiona accesul crawler-elor și a optimiza SEO-ul site-ului dvs.
- Generator Sitemap Generator gratuit de sitemap XML online. Adăugați URL-uri, setați priorități și frecvențe, creați sitemap-uri SEO instant.
- GIF Extragere Cadre Extrageți și descărcați cadre individuale din animații GIF ca PNG sau sprite sheet. Instrument online gratuit cu previzualizare și export ZIP.
- GIF Inversat Inversați ordinea de redare a animațiilor GIF online gratuit. Încărcați, previzualizați și descărcați instant.