Inledning
Sprite sheets finns så att spelet kan rita massor av bildrutor från en textur. Då och då måste man gå åt andra hållet: man vill måla om en bildruta, dra ut gammal konst från ett levererat spel eller bygga om ett ark som ingen sparade källfilerna för.
Att klippa ut bildrutor för hand i en bildredigerare fungerar för tre sprites och är miserabelt för trehundra. Sprite Sheet Unpacker gör det i en webbläsarflik: peka den mot datafilen om du har en, eller låt den hitta sprites själv.
Så här väljer du rätt sätt att skära upp ditt ark, vad du ska göra när du inte har en datafil och hur du kontrollerar att ramarna spelas upp korrekt innan du laddar ner dem.
Fyra sätt att skära ett ark
Ark är uppbyggda på olika sätt, så det finns inget enda rätt sätt att skära dem. Ett jämnt fördelat ark från ett gammalt spel behöver ett rutnät. En tätt packad atlas med trimmade ramar behöver sin datafil, för utan den finns det inget sätt att veta var en ram slutar och nästa börjar.
Uppackningsprogrammet ger dig fyra lägen. Det väljer ett åt dig baserat på vad du lägger in, och du kan växla när som helst. Bilden och eventuella datafiler läses i din webbläsare; ingenting laddas upp.
- Auto: hittar varje sprite genom att leta efter öar av icke-transparenta pixlar. Bra för lösa ark med mellanrum mellan sprites.
- Config: läser arkets datafil (JSON, plist, XML, .atlas och andra) och klipper ut varje bildruta exakt där den står, med dess namn.
- Grid: klipper ut arket i lika stora celler. Du ställer in cellstorlek, förskjutning och avstånd.
- Manuell: rita rutor på arket själv, för det udda arket finns inget av ovanstående handtag.
Dela ett ark steg för steg
Börja med arkbilden: PNG, JPG, WebP, GIF eller BMP. Om du har datafilen som följde med, till exempel en JSON eller plist exporterad från TexturePacker, släpp den samtidigt. Uppackningsprogrammet känner igen formatet och växlar till konfigurationsläge. Beskurna ramar återskapas i sin ursprungliga storlek och roterade ramar vänds upprätt igen, så att de radas upp som de gjorde innan packning.
Ingen datafil? Försök med Auto först. Om spriterna nuddar varandra eller sitter på en solid bakgrund, växla till Rutnät och ange cellstorleken. Kontrollera konturerna som ritats över arket, klicka på en ram för att titta närmare på den och ladda sedan ner den.
- Släpp in arkbilden, plus datafilen om du har en.
- Kontrollera vilket läge som valts (Auto, Konfiguration, Rutnät eller Manuellt) och ändra det vid behov.
- Titta över konturerna på arket och åtgärda allt som är fel.
- Ladda ner bildrutorna som en ZIP, eller som separata filer om du bara behöver några få.
Spela upp bildrutorna innan du laddar ner
Att få ut bildrutorna är halva jobbet. Den andra halvan är att se till att de fortfarande animeras korrekt. Slå på förhandsgranskningen av animationen så spelar upppackaren upp bildrutorna i ordning, så att du kan se hela sekvensen röra sig.
Ändra bildfrekvensen tills den ser ut som den gör i spelet. En saknad bildruta visas som ett fel, och en bildruta som är avskuren några pixlar visas som ett flimmer. Båda är lättare att upptäcka här än efter att du har importerat allt till en motor.
- Spelar upp de extraherade bildrutorna som en loop.
- Bildfrekvens som du kan ändra (12 fps som standard).
- Flimmer och flimmer avslöjar saknade eller feljusterade bildrutor.
Vilken datafil har du?
En datafil är bara en lista med bildrutenamn och rektanglar, men varje motor skriver det lite annorlunda. Om du arbetar med ett ark som någon annan har skapat, gör det att veta vilken typ du har eventuella varningar lättare att förstå.
Uppackaren läser JSON i både hash- och arraylayouter (Phaser, PixiJS och TexturePacker generiska export), plistfiler från Cocos2d, XML från Starling och Sparrow, CSS sprite-ark, .atlas-textfiler från Spine och libGDX, och Unitys YAML sprite-metadata. Flersidiga atlaser fungerar också, så länge du släpper in varje sidbild.
Vad som vanligtvis kommer härnäst
När ramarna är ute brukar du göra något med dem. Om de är tyngre än de behöver vara, kör dem genom bildkompressorn. Om du vill ha dem på ett nytt, snyggare ark, ladda dem i texturpaketet och packa om. Och om du har segmenterat med Auto eller Grid och vill ha en datafil för resultatet, kan uppackaren bara exportera metadata istället för bilderna.
Alla dessa körs i webbläsaren, så du kan gå från ett gammalt ark till ett rent nytt utan att bilden lämnar din dator.
Skrivet av
Ankit Kumar
Senior mjukvaruingenjör och grundare på ToolBuddy
Utveckla webbläsarens första verktyg med noll uppladdningskrav med hjälp av WebAssembly, Web Audio och Canvas-tekniker.