Sprite Sheet Generator
Kombinera bilder till sprite sheet med dra-för-att-ordna-om, rutnätslayout, padding, skalningslägen. Exportera PNG/WebP/JPG med JSON-atlasdata för spelmotorer och CSS.
Vad är ett sprite-sheet och varför använda ett?
Ett sprite-sheet är en enda bildfil som innehåller flera mindre bilder (sprites) arrangerade i ett rutnät. Att använda sprite-sheets minskar HTTP-förfrågningar, förbättrar sidladdningsprestanda och gör spelrendering mer effektiv.
Vilka bildformat stöds?
Du kan ladda upp PNG-, JPG-, GIF-, SVG- och WebP-bilder. Verktyget stöder batch-uppladdning och inklistring från urklipp (Ctrl+V) för snabbt arbetsflöde.
Vilka exportformat är tillgängliga?
Exportera sprite-sheets som PNG (med transparens), WebP (modernt format med mindre filstorlek) eller JPG (bäst för foton utan transparens). Välj baserat på dina plattforms krav.
Hur ordnar jag om bilder i sprite-sheeten?
Dra och släpp bildminiatyrer för att ordna om deras position i sprite-sheeten. Du kan också klistra in bilder direkt från urklipp med Ctrl+V.
Vad är JSON-atlasdata och vilka motorer stöder det?
JSON-atlasdata innehåller position, storlek och raminformation för varje sprite. Det är kompatibelt med populära spelmotorer som Phaser, PixiJS, Unity, Cocos2d och många andra för automatisk sprite-extrahering.
Vad är de olika skalningslägena?
Anpassa behåller proportioner. Fyll täcker cellen och beskär. Sträck deformerar för att fylla.
Stöder verktyget transparens?
Ja, PNG och WebP bevarar transparens. Du kan också ställa in en anpassad bakgrundsfärg, vilket är användbart för JPG-exporter som inte stöder transparens.
Hur påverkar padding sprite-sheeten?
Padding lägger till utrymme mellan individuella sprites i arket, vilket förhindrar visuell blödning när texturer samplas. Detta är särskilt viktigt för spelmotorer som använder linjär filtrering.
Kan jag använda sprite-sheets för CSS?
Ja, sprite-sheets fungerar utmärkt för CSS-sprites. JSON-atlasdata kan användas för att generera CSS background-position-regler, vilket minskar HTTP-förfrågningar och förbättrar sidladdningsprestanda.
Vad är bästa praxis för sprite-sheet-dimensioner?
Håll dimensioner som potenser av 2 (256x256, 512x512, 1024x1024) för optimal GPU-texturhantering. De flesta spelmotorer föredrar dessa dimensioner för bättre prestanda och kompatibilitet.
Hur förbättrar sprite-sheets spelprestanda?
Sprite-sheets minskar ritningsanrop genom att batcha flera sprites i en enda textur. Detta minimerar GPU-tillståndsändringar, minskar minnesöverbelastning och möjliggör mer effektiv rendering.
Vad är skillnaden mellan sprite-sheets och texturatlas?
Sprite-sheets arrangerar typiskt ramar i ett enhetligt rutnät, medan texturatlas kan packa oregelbundet formade sprites mer effektivt med algoritmer som bin packing.
Hur man använder Sprite Sheet Generator
Slå ihop flera bilder till ett enda sprite sheet direkt i webbläsaren. Dra för att ordna om bildrutorna, finjustera rutnät och utfyllnad och exportera en PNG/WebP/JPG-atlas med JSON-data för spelmotorer och CSS-sprites. All bearbetning sker lokalt.
- Lägg till dina bilder och använd knapparna + och − för att ställa in rutnätets Columns och Rows.
- Ställ in Padding (px) för att skapa utrymme mellan sprites och förhindra texture bleeding.
- Låt Sprite Size stå på Auto för den största rutan, eller skriv fasta mått för likformiga celler.
- Välj en Scale Mode — Fit, Fill eller Stretch — för att styra hur varje bild placeras i sin cell.
- Välj Background (Transparent, White, Black eller Custom), ställ in Format på PNG, WebP eller JPG och namnge filen under Filename.
- Dra miniatyrerna för att ordna om bildrutorna — atlasens koordinater uppdateras automatiskt — och exportera arket tillsammans med JSON-atlasen.
Använd minst 2 px utfyllnad så att närliggande sprites inte flyter ihop när texturer skalas eller filtreras i din motor.
Relaterade verktyg
- Chmod-kalkylator Gratis online chmod-kalkylator för att visualisera och beräkna Linux-filrättigheter med kryssrutor. Konvertera omedelbart mellan numerisk (755, 644) och symbolisk notation (rwxr-xr-x). Stöder speciella rättigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-teckenkodningsreferens med decimala, hexadecimala, oktala, binära koder, HTML-entiteter och teckenbeskrivningar. Omedelbar sökning och filtrering.
- HTTP-begäran Testare Testa REST API:er direkt i din webbläsare. Skicka GET-, POST-, PUT-, DELETE-förfrågningar med anpassade rubriker, kropp och parametrar. Se svarstatus, rubriker och JSON-kropp omedelbart.
- .htaccess-generator Generera Apache .htaccess-regler för omdirigeringar, omskrivningar, säkerhetsrubriker, cachelagring och mer.
- Robots.txt Generator Gratis online robots.txt generator. Skapa och anpassa robots.txt-filer för att styra sökmotorernas crawlning, hantera crawler-åtkomst och optimera din webbplats SEO.
- Sitemap Generator Gratis online XML sitemap generator. Lägg till URL:er, ange prioriteringar och frekvenser, skapa SEO-sitemaps direkt.
- GIF Dela Bildrutor Extrahera och ladda ner enskilda bildrutor från GIF-animationer som PNG eller sprite-sheet. Gratis onlineverktyg med förhandsgranskning och ZIP-export.
- GIF Baklänges Vänd uppspelningsordningen för GIF-animationer gratis online. Ladda upp, förhandsgranska och ladda ner direkt.