Generátor sprite sheetů

Kombinujte více obrázků do jednoho sprite sheetu a vygenerujte CSS kód.

Podíl:

Přetáhněte obrázky sem

nebo klikněte pro nahrání více souborů

Proč použít tento nástroj?

Vysoce efektivní nástroje pro optimalizaci frontendu

Snižte počet HTTP požadavků a zrychlte načítání.

Automatické generování souřadnic

Matematiku děláme za vás. Okamžitě získáte přesné souřadnice X a Y pro každý jednotlivý obrázek ve vašem sprite sheetu.

Chytrý balovací algoritmus mřížky

Náš engine inteligentně uspořádá obrázky různých velikostí do co nejefektivnější mřížky, minimalizuje prázdný prostor a zmenšuje konečnou velikost souboru.

CSS třídy připravené k použití

Generuje čistý blok CSS připravený ke kopírování s individuálními třídami pro každý prvek, včetně vlastností background-position a rozměrů.

Přizpůsobitelné režimy rozložení

Vyberte si mezi vertikálními pásy, horizontálními pásy nebo nejefektivnějším režimem 'Mřížka' podle potřeb vaší konkrétní architektury projektu.

Ovládání odsazení a mezer

Přidejte vlastní mezery mezi sprity, aby se zabránilo 'prosvítání pixelů' – kdy se v rozhraní nechtěně zobrazují části sousední ikony.

Lokální zpracování v paměti

Vaše prvky uživatelského rozhraní jsou vaším majetkem. Veškeré balení a generování kódu probíhá přímo ve vašem prohlížeči, takže žádná data nikdy neopustí vaše zařízení.

Průvodce rychlými prvky: Jak používat generátor

Vytvořte sprite listy v minimálním počtu kroků.

Shromážděte malé prvky

Sejměte všechny malé ikony, tlačítka nebo snímky animace, které chcete sloučit. Ujistěte se, že jsou ve vysoce kvalitním formátu jako PNG.

Dávkové nahrání do nástroje

Vyberte všechny soubory najednou a nahrajte je. Nástroj okamžitě vytvoří vizuální náhled toho, jak je lze zabalit dohromady.

Konfigurace optimalizace

Upravte 'Odsazení', pokud se obáváte, že se okraje na retina obrazovkách zobrazí, nebo zvolte 'Vertikální' rozložení, pokud vytváříte boční menu.

Kontrola náhledu spritu

Zkontrolujte vygenerovaný sheet. Ujistěte se, že je každá položka viditelná a mřížka je těsná a efektivní bez zbytečného místa.

Stažení obrázku atlasu

Klikněte na tlačítko 'Stáhnout sprite sheet' pro uložení konsolidovaného obrázkového souboru do složky prvků vašeho projektu.

Zvládnutí sprite sheetů: Tajemství tvorby herních prvků

Jsou sprite sheety stále relevantní s HTTP/2?

Ano! Zatímco HTTP/2 lépe zvládá více požadavků, sprite sheety jsou stále rychlejší, protože snižují celkové množství metadat a režii komprese.

Co se stane, když mám obrázky různých velikostí?

Náš chytrý algoritmus mřížky je pro to navržen! Uspořádá vaše obrázky všech tvarů a velikostí do co nejkompaktnějšího obdélníku.

Mám pro svůj sprite sheet použít JPG nebo PNG?

Důrazně doporučujeme PNG. Lépe zvládá 'ostré hrany' ikon a podporuje průhlednost, která je pro většinu webového rozhraní nezbytná.

Existuje limit na počet obrázků, které mohu zahrnout?

Technicky ne. Doporučujeme však držet se kolem 50–100 obrázků na sheet, aby rozměry souboru nebyly příliš velké.

Co je 'prosvítání pixelů'?

K tomu dochází, když subpixelové vykreslování zobrazí proužek dalšího obrázku v sheetu. Přidejte 1–2 pixely 'Odsazení' v našem nástroji, abyste tomu zabránili.

Podporuje tento nástroj SVG?

Tento nástroj je pro rastrové sprity (PNG/JPG). Pro SVG byste měli použít přístup 'SVG Sprite', který moderní prohlížeče zpracovávají odlišně.

Jak aktualizuji sprite sheet později?

Jednoduše znovu nahrajte původní ikony plus novou. Náš nástroj vám za pár sekund poskytne nový sheet a nový CSS.

Je tento nástroj zdarma pro herní vývojáře?

Ano! Ať už vytváříte web nebo mobilní hru, náš generátor je 100% zdarma bez komerčních omezení.

Může prohlížeč cachovat sprite sheety?

Ano! To je jedním z největších přínosů. Prohlížeč musí cachovat pouze jeden soubor, aby měl všechny ikony připravené pro všechny stránky vašeho webu.

Jsou moje proprietární data ikon v bezpečí?

Rozhodně. Protože vaše soubory jsou zpracovávány lokálně ve vašem prohlížeči, vaše návrhy nejsou nikdy nahrány, uloženy ani zobrazeny naším systémem.