Sprite Sheet Generator
Kombiner bilder til sprite sheet med dra-for-å-omordne, rutenettlayout, padding, skaleringsmoduser. Eksporter PNG/WebP/JPG med JSON-atlasdata for spillmotorer og CSS.
Hva er et sprite-sheet og hvorfor bruke ett?
Et sprite-sheet er en enkelt bildefil som inneholder flere mindre bilder (sprites) arrangert i et rutenett. Å bruke sprite-sheets reduserer HTTP-forespørsler, forbedrer sideinnlastingsytelse og gjør spillrendering mer effektiv.
Hvilke bildeformater støttes?
Du kan laste opp PNG-, JPG-, GIF-, SVG- og WebP-bilder. Verktøyet støtter batch-opplasting og lim inn fra utklippstavle (Ctrl+V) for rask arbeidsflyt.
Hvilke eksportformater er tilgjengelige?
Eksporter sprite-sheets som PNG (med gjennomsiktighet), WebP (moderne format med mindre filstørrelse) eller JPG (best for bilder uten gjennomsiktighet). Velg basert på plattformens krav.
Hvordan omorganiserer jeg bilder i sprite-sheetet?
Dra og slipp bildeminiatyrbilder for å omorganisere deres posisjon i sprite-sheetet. Du kan også lime inn bilder direkte fra utklippstavlen med Ctrl+V.
Hva er JSON-atlasdata og hvilke motorer støtter det?
JSON-atlasdata inneholder posisjon, størrelse og rammeinformasjon for hver sprite. Det er kompatibelt med populære spillmotorer som Phaser, PixiJS, Unity, Cocos2d og mange andre for automatisk sprite-ekstrahering.
Hva er de forskjellige skaleringsmodusene?
Tilpass beholder proporsjoner. Fyll dekker cellen og beskjærer. Strekk deformerer for å fylle.
Støtter verktøyet gjennomsiktighet?
Ja, PNG og WebP bevarer gjennomsiktighet. Du kan også angi en egendefinert bakgrunnsfarge, noe som er nyttig for JPG-eksporter som ikke støtter gjennomsiktighet.
Hvordan påvirker padding sprite-sheetet?
Padding legger til plass mellom individuelle sprites i arket, og forhindrer visuell blødning når teksturer samples. Dette er spesielt viktig for spillmotorer som bruker lineær filtrering.
Kan jeg bruke sprite-sheets for CSS?
Ja, sprite-sheets fungerer utmerket for CSS-sprites. JSON-atlasdata kan brukes til å generere CSS background-position-regler, noe som reduserer HTTP-forespørsler og forbedrer sideinnlastingsytelse.
Hva er beste praksis for sprite-sheet-dimensjoner?
Hold dimensjoner som potenser av 2 (256x256, 512x512, 1024x1024) for optimal GPU-teksturhåndtering. De fleste spillmotorer foretrekker disse dimensjonene for bedre ytelse og kompatibilitet.
Hvordan forbedrer sprite-sheets spillytelse?
Sprite-sheets reduserer tegningskall ved å batche flere sprites i en enkelt tekstur. Dette minimerer GPU-tilstandsendringer, reduserer minneoverbelastning og muliggjør mer effektiv rendering.
Hva er forskjellen mellom sprite-sheets og tekstur-atlas?
Sprite-sheets arrangerer typisk rammer i et ensartet rutenett, mens tekstur-atlas kan pakke uregelmessig formede sprites mer effektivt ved hjelp av algoritmer som bin packing.
Slik bruker du Sprite Sheet Generator
Kombiner flere bilder til ett sprite sheet rett i nettleseren. Dra for å endre rekkefølgen på bildene, finjuster rutenett og utfylling, og eksporter et PNG/WebP/JPG-atlas med JSON-data til spillmotorer og CSS-sprites. All behandling skjer lokalt.
- Legg til bildene dine og bruk knappene + og − for å sette Columns og Rows i rutenettet.
- Sett Padding (px) for å lage mellomrom mellom sprites og hindre texture bleeding.
- La Sprite Size stå på Auto for det største bildet, eller skriv inn faste mål for like celler.
- Velg en Scale Mode — Fit, Fill eller Stretch — for å styre hvordan hvert bilde plasseres i cellen sin.
- Velg Background (Transparent, White, Black eller Custom), sett Format til PNG, WebP eller JPG og navngi filen under Filename.
- Dra miniatyrene for å endre bilderekkefølgen — atlas-koordinatene oppdateres automatisk — og eksporter arket sammen med JSON-atlasen.
Bruk minst 2 px utfylling slik at nabosprites ikke flyter sammen når teksturer skaleres eller filtreres i motoren din.
Relaterte verktøy
- Chmod-kalkulator Gratis online chmod-kalkulator for å visualisere og beregne Linux-filrettigheter med avmerkingsbokser. Konverter umiddelbart mellom numerisk (755, 644) og symbolsk notasjon (rwxr-xr-x). Støtter spesielle rettigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-tegnkodingsreferanse med desimale, heksadesimale, oktale, binære koder, HTML-enheter og tegnbeskrivelser. Umiddelbar søk og filtrering.
- HTTP-forespørsel Tester Test REST API-er direkte i nettleseren. Send GET-, POST-, PUT-, DELETE-forespørsler med egendefinerte headere, kropp og parametere. Se svarstatus, headere og JSON-kropp umiddelbart.
- .htaccess-generator Generer Apache .htaccess-regler for omdirigeringer, omskrivinger, sikkerhetshoder, bufring og mer.
- Robots.txt Generator Gratis online robots.txt generator. Opprett og tilpass robots.txt-filer for å kontrollere søkemotorenes crawling, administrere crawler-tilgang og optimalisere nettstedets SEO.
- Sitemap Generator Gratis online XML sitemap generator. Legg til URL-er, angi prioriteringer og frekvenser, lag SEO-sitemaps umiddelbart.
- GIF Del Bilderammer Pakk ut og last ned enkelte bilderammer fra GIF-animasjoner som PNG eller sprite-ark. Gratis onlineverktøy med forhåndsvisning og ZIP-eksport.
- GIF Baklengs Snu avspillingsrekkefølgen for GIF-animasjoner gratis online. Last opp, forhåndsvis og last ned umiddelbart.