Opprette Sprite Sheets i fem minutter med Texture Packer

Så du har begynt å jobbe med prosjektet ditt, du har det grunnleggende nede, og nå er du på den delen der du faktisk ønsker å implementere noen grafikk ... men du er ikke helt sikker på hvordan du gjør det. La meg introdusere deg til Texture Packer.


Hva er Texture Packer?

Texture Packer er laget av gutta over på Code n 'Web, og er et flott lite stykke programvare som lar deg pakke teksturer, eiendeler og stort sett alt du vil ha i et greit lite ark som er kompatibelt med tonnevis av rammer!

En gratis versjon er tilgjengelig, men noen funksjoner er deaktivert.

Jeg elsker Texture Packer fordi det er enkelt å bruke, det er super fleksibelt og det fungerer med motorer du allerede bruker. Det gjør en fantastisk jobb med å optimalisere arkene dine med forskjellige alternativer som fargedybde, automatisk skalering, dithering og trimning av usynlige piksler. Det eksporterer også til mange formater kompatible med Cocos 2D, Unity, Corona, en hvilken som helst motor som støtter JSON, og mer.


Hovedgrensesnittet

Før vi begynner å lage vårt eget ark, la oss se på grensesnittet i et sekund.


Den viktigste Texture Packer-grensesnittet.

Alle innstillingene til venstre kan se litt truende ut, men ikke bekymre deg, de er egentlig veldig enkle å sette opp. Og enda bedre, du må bare sette dem en gang; Du kan da lagre dem og bruke dem senere for noe annet ark du vil lage!

Som du kan se er arkets innstillinger til venstre, listen med våre eiendeler er til høyre (som er tom akkurat nå), og arket forhåndsvisning er i midten.


La oss komme i gang!

Det første du må gjøre er å åpne mappen din med din magiske kunst, og dra og slipp den inn i Texture Packers aktivitetsliste.

Som du kan se, vises de øyeblikkelig i arket ditt. Du kan klikke på en bestemt ressurs i den listen, og den vil markere i arket. (Dette fungerer også den andre veien rundt.)

Tips: Rett under forhåndsvisningsarket er det noen zoomalternativer; Ta gjerne med dem til arket passer pent på skjermen for en bedre forhåndsvisning.

La oss ta en titt på rotet av alternativer til venstre. Det er bare tre kategorier du trenger å bekymre deg for:

  • Utgangsinnstillinger: Disse tar vare på hvor arket ditt skal eksporteres og komprimeringen som brukes på den.
  • Geometriinnstillinger: Disse tar vare på arkets størrelse og eiendomsskalering.
  • Oppsettinnstillinger: Dette handler om eiendeler plassering i arket ditt og total optimalisering.

Vi går gjennom hvert av disse igjen.


Output Settings

Dataformat

Dette er formatet for arkets datafil som inneholder all den informasjonen du trenger, for eksempel koordinater, dimensjoner og rotasjon.

Foreløpig er følgende alternativer tilgjengelige: Cocos2D, Corona, Sparrow / Starling, LibGDC, JSON, Unity3D, LibGDX, CSS, Gideros, CEGUI / OGRE, AndEngine, AppGameKit, Slick2D, Moai, BHive, Xml, BatteryTech SDK, EaseIJS, Kwik2 og ren tekst.

Data fil

Dette er banen der datafilen skal lagres, det er en god praksis å beholde den i samme mappe som selve arket.

Tips: Det er en god ide å sette utføringsmappen slik at arket og datafilen eksporteres direkte til maskinens katalog.

Texturformat

Her velger du formatet på arkets bilde. PNG anbefales, med mindre du trenger noe annet spesifikt for prosjektet ditt.

Png Opt. Nivå, DPI og Premultiply Alpha

Med mindre du vet hva du gjør, la disse innstillingene være uberørt: Png Opt Level på "none", DPI på 72 og Premultiply Alpha unchecked.

Bildeformat

Med andre ord, fargedybde. Det er angitt å forlate dette uberørt også; Standard RGBA8888 er det høyeste kvalitetsalternativet. I tilfelle du går for et bestemt utseende eller du verdsetter størrelsen på arkene dine, kan du velge et lavere alternativ, for eksempel RGBA4444.

"A" i disse forkortelsene står for "Alpha" (gjennomsiktighet), og du vil merke at hvis du velger et alternativ som bare sier "RGB", vil det ha en svart bakgrunn, noe som betyr at det ikke finnes noen alfanumerisk informasjon der. Hvis du trenger det, kan du opprette et alfakart ved å velge "ALPHA" fra listen; Dette kan komme til nytte i noen tilfeller så hold det i bakhodet.


Forskjellen mellom RGBA8888 og RGBA4444 er tydelig i hovedkroppens farger, over.

utjamning

Hvis du ikke har rørt alternativet fra forrige trinn, vil dithering ikke være tilgjengelig, men vær ikke bekymret for det. Nå, hvis du valgte et lavere alternativ i forrige trinn, for eksempel RGB444, kan du legge merke til at du kan se hvor fargetoner stemmer ... det er stygg, så dithering er her for å hjelpe deg ved å blande farger med noen komplekse algoritmer.

Prøv alternativene "FloydSteinberg" eller "Atkinson" og se hvordan de ser ut.


Effekten av dither er lettest å se i skjortens stoff.

Texturfil

Akkurat som alternativet "Data File", velger du banen der arkbildet skal eksporteres.

Det er en innstilling i Output-kategorien kalt "Auto SD". Dette lar deg automatisk eksportere en mindre versjon av det samme arket du arbeider på samtidig. Dette er nyttig når du jobber på en iOS-app som krever to separate ark for å kunne fungere på både normal og netthinnen. - Texture Packer har dekket deg.


Geometri Innstillinger

Størrelse

Dette er stedet der du kan endre størrelsen på arket. Du kan velge maksimal størrelse eller en fast størrelse. Det er forhåndsdefinerte, anbefalte verdier i rullegardinmenyen (alle to magasiner), men du kan også manuelt skrive inn alle verdier du vil ha.

Med mindre du jobber med et prosjekt som krever en bestemt størrelse for arket, foreslår jeg at du aktiverer alternativet Tillat gratis størrelser. Dette sikrer at arkstørrelsen er stor nok til å imøtekomme alle eiendelene uten å gi bortkastede tomme piksler. (Hold også "Pack" -alternativet på "Best".)

Scale

Herfra kan du enkelt endre størrelsen på hele arket fra rullegardinmenyen (også slik at du kan legge til egne verdier). Like under skaleringsnummeret er det et annet alternativ for skaleringen metode. De "jevne" og "raske" alternativene er de vanligste; "rask" gjør skaleringen uten å blande noen pikselfarge (dette kan brukes til å skala opp din pixelerte grafikk for et retrospill), og "glatt" skalerer alt jevnt (åpenbart).

Jeg vil ikke anbefale skalering sprites opp med "glatt" metoden. Du kan gjøre det direkte i prosjektet ditt hvis du virkelig trenger det; det er ingen bruk i å ha store ark.

Tips: Hvis du ser på nederste høyre hjørne av programmet, vil du legge merke til noen tall som representerer bredden, høyden og størrelsen på arket ditt. Du bør holde øye med det.

Oppsettinnstillinger

Algoritme og Heuristikk

Kort sagt, disse er innstillingene som bestemmer hvordan eiendelene er ordnet i arket ditt. Det finnes flere alternativer som resulterer i flere utfall, men for beste resultat anbefaler jeg å holde dem på standard "MaxRects" og "Best". Dette sikrer den beste plasseringen av eiendelene i arket, så det er så få usynlige piksler som mulig. Husk, usynlige piksler = bortkastet plass.

padding

Padding bestemmer mellomrom mellom dine eiendeler; Det er en god praksis å la dem få plass til å puste.

Hvis eiendelene er rett ved siden av hverandre, vil du oppdage gale gjenstander rundt kantene deres på grunn av naboegenskaper og anti-aliasing når du roterer dem i motoren. Jeg anbefaler å sette Border and Shape-polstring til 2 mens du forlater Innerpolstringen på 0.

Extrude

Dette er ganske viktig når det gjelder fliser basert motorer. Det strekker pikslene rundt en eiendel med verdien du valgte - for eksempel, hvis du trekker ut en flisegenskap fra arket ditt og legger det i motoren din, vil du legge merke til små hull mellom hver flis.

Dette er mest sannsynlig på grunn av anti aliasing (hvis du har den i motoren din), så en super enkel måte å fikse dette på er å sette Extrude-alternativet til 1. Dette løser også et annet potensielt problem og endrer ikke eiendelene visuelt i det hele tatt.

Felles divisor

Hvis arkstørrelsen din må deles med et bestemt tall, kan du angi det. Dette vil endre størrelsen på arket og fylle det med usynlige piksler for å matche en bestemt verdi. Det hjelper i tilfelle hvor motoren krever at arkene har en styrke på to, for eksempel, og det bidrar også til å holde identisk utforming over flere skaleringsfaktorer.

Standardverdien er 1, noe som betyr at størrelsen på arket er størrelsen du har angitt i delen Geometri.

Reduser grenseartefakter, roter, trim og beskjære

Alternativet "redusere grenseartefakter" forsøker å redusere skygger og ufullkommenheter rundt eiendomsgrensene. Det er i utgangspunktet, og jeg foreslår at du forlater det på den måten.

Alternativet "rotere" gjør det mulig å rotere eiendommene for den beste plassbehandlingen. I mange tilfeller vil dette pakke eiendelene bedre, noe som sparer plass siden arket ender mindre, men det kan være en ekstra ting å bekymre seg for i motoren din. Mesteparten av tiden, det er en smerte å redegjøre for roterte eiendeler og returnere dem til sin opprinnelige tilstand i motoren, og dette kan til og med skape noen problemer.

"Trim" er en fantastisk funksjon som kutter bort de usynlige pikslene i dine eiendeler, og holder kun det som er synlig. Dette sparer ganske mye plass og pakker alt pent, og gjør at alt gjøres raskere siden motoren ikke trenger å bekymre seg for at mange usynlige piksler. Det er generelt godt å beholde dette alternativet, men hvis du trenger en ressurs størrelse til å være en bestemt verdi basert på gjennomsiktigheten, vil dette forstyrre det ... så hold det i bakhodet.

"Crop" gjør i utgangspunktet det samme som "trim", men noen ganger påvirker det dimensjonen av aktiva, så jeg vil anbefale å bruke "trim" i stedet og holde "avling" deaktivert.

Også under disse alternativene er det en "terskel" -innstilling, som bestemmer hvor mange gjennomsiktige piksler som "trim" og "beskjære" -alternativene fjerner. Hvis du øker dette nummeret, vil "trimme" og "beskjære" begynne å skjule knapt synlige piksler - det er i utgangspunktet koblet direkte til alfabetet av pikselet, som bestemmer om det er fjernet eller ikke.

Shape Outlines, Auto Alias ​​og Heuristic Mask

Funksjonen "form outline" legger til en rød avgrensningsboks rundt hver eiendel som vist på bildet nedenfor. Dette er en flott ting å ha når du vil feilsøke og se nøyaktig hvor ting går i din motor.

"Auto alias" er et godt alternativ: Når du har flere eiendeler som er identiske, men har forskjellige navn, kan du aktivere dette alternativet og aktivet vil bli lagt til bare en gang i arket mens du eksporteres flere ganger i datafilen, hver med riktig navn. Dette brukes mest når du trenger den samme aktiva to ganger i motoren med forskjellige navn eller verdier.

Og til slutt er alternativet "heuristisk maske" for eiendeler som krever gjennomsiktighet, men har en solid fargebakgrunn. I utgangspunktet fjerner denne funksjonen bakgrunnsfargen og gjør den til gjennomsiktige piksler. Du bør ikke bruke dette alternativet fordi det vanligvis resulterer i skarpe stygge kanter (med mindre eiendelene dine blir pixelert til å begynne med). Det er best å håndtere gjennomsiktigheten selv før du pakker inn eiendeler i arket.


Og der går vi!

Nå er du ferdig med alle innstillingene, du kan trykke på "Publiser" -knappen øverst for å eksportere arket ditt (eller alternativt Ctrl-P). For å forhindre hele oppsettdelen neste gang du trenger et ark, klikker du bare på "Lagre standard" -knappen der oppe; Dette vil lagre gjeldende innstillinger som standard og de vil være der hver gang du åpner programmet, noe som sparer deg en mye av tiden.

Texture Packer støtter også integrering med motoren din via kommandolinjer. Dette betyr at du ikke engang må åpne programmet for å eksportere arkene dine, noe som gjør tingene langt mer raskere. Mer om det her.

Og det handler om det, nå vet du hvordan du setter opp ditt eget ark og eksporterer det. Gå nå rundt med innstillingene og verdiene for å se hva som passer best for prosjektet ditt. Ha det gøy og begynn å eksportere!