Share
Velkommen til tredje avdrag på vårt endeløse løpespill! Denne opplæringen skal dekke hvordan du oppretter sprites via sprite ark og animasjonen av spilltegnet. Så langt i spillet vårt bør vi ha en fin utsikt med tre lag med bilder som ruller i forskjellige hastigheter, noe som gjør for noen fantastiske parrallax scrolling-ness! Det neste logiske skrittet for oss skal være å legge vår helt til spillet. Vi skal gjøre dette i to trinn. Denne opplæringen vil dekke det første trinnet. Den neste opplæringen vil dekke faktisk legge til helt i vårt eksisterende spill og legge til kontroller for å få ham til å følge vår hver kommando.
Nå, før vi begynner på spillet, la oss snakke raskt om sprites, sprite sheets og animasjon generelt. Hvis du har erfaring med grafikk, animasjon eller spillutvikling, er dette trolig et kjent emne for deg. Men for vår diskusjon skal vi anta at du ikke har noen erfaring med noen av de nevnte emnene. Så, la oss starte med animasjon. Animasjon i spill er gjort akkurat på samme måte som det er gjort i tegneserier og filmer. Tenk på hva som skjer når du går på kino og de starter filmen. Når du ser på filmen, ser du ikke faktisk folk flytte og snakke, men du ser en serie blinkende bilder med lyd som spilles langs hjulet samtidig, og gir illusjonen om at du ser på noe som er i live og puster. Dette er det samme som skjer med våre spill. Vi skaper en illusjon av "livet" ved raskt blinkende bilder på skjermen. Når dette er gjort raskt nok, blir det en jevn animasjon. Så spørsmålet er hvordan får vi disse glatte animasjonene inn i vårt spill. Svaret er å bruke sprites. Corona SDK gir funksjonaliteten til sprites for oss, så det eneste vi trenger å bekymre oss om, er å skape våre sprites og tildele våre animasjoner til dem. Ta en titt på det animerte gifet nedenfor:
Når du ser den animasjonen, ser det ut som et lite monster kjører og flailing hans armer. Det du ser på, er en serie bilder, tatt fra et enkelt sprite-ark, som blinker igjen og igjen. Merk at det siste bildet i sekvensen ikke er inkludert i animasjonen. Dette er et enkelt sprite-ark, og det er hvordan du skal sette opp bildene for spillet ditt også.
Så spørsmålet om nettopp hvorfor vi bruker sprite ark har sannsynligvis dukket opp i tankene dine. Svaret er to ganger og ganske enkelt: minne og enkelhet. Jeg vil at du skal se på de fire bildene jeg laget nedenfor. Alle veldig enkle, skjermede brettdesign (selv om sprites er svært små slik at de ikke ser ut til å være det, men åpner dem i et hvilket som helst program og zoomer inn og du vil se skjermkortet: D), med størrelser fra 8x8 helt opp til 256x256.
Den første grunnen, minnet, blir veldig tydelig hvis du laster ned bildene og ser på størrelsene deres. Legg merke til størrelsesforskjellen fra å gå fra 8x8 helt opp til 256x256. Hvis du ikke vil laste dem ned, vil jeg spare deg i 30 sekunder det ville ha tatt.
La oss anta at alle bildene våre skal være 16x16 piksler i dimensjon (selvfølgelig er dette ikke realistisk, men vårt eksempel gjelder også for mye større bilder). Bildene er 16x16 og tar opp en hel 2.74KB hver. La oss si at vi har 256 sprites som utgjør vår karakter. Disse bildene kan inkludere ham som går i forskjellige retninger, hopper, skyter et våpen, eller gjør noe annet du kanskje vil at karakterene dine skal gjøre. Hvis vi skulle sette dem i individuelle 16x16 PNG-filer (PNG er et vanlig format for mobile spill, da de har et veldig lite minnefotavtrykk), vil det ta opptil 701.44KB for å holde alle bildene. Det virker ikke så stort fordi de fleste enheter har mye minne, ikke sant? Ja, men husk at vi sannsynligvis kommer til å ha hundrevis av slike bilder i vårt spill. Likevel er 701K for et lite bilde på en mobil enhet altfor stor. På iPhone prøver de fleste små spill å ligge under 20 MB fordi den er den største filen du kan laste ned via 3G. Større filer må gjøres over WiFi eller nedlastet via iTunes. Hvis du tror en 20 MB grense er dårlig, pleide det å være 10 MB! Nå, la oss se på hvorfor det er fordelaktig å gruppere våre sprites i sprite ark.
La oss si at du legger disse 256 16x16 sprites på bare ett sprite-ark. Hvor stor tror du at den resulterende filen ville være? Hvis du lastet ned filene og så på størrelsene, vet du at 256x256 bildet bare er 3,42KB! Det er en besparelse på 698.02KB! Men hvordan er det mulig!?! Svaret har å gjøre med hvordan bildene skaleres og er komprimert og mange andre tekniske ting som vi ikke kommer til å gå inn på. Det viktigste å ta bort er at dobling av et bilde i størrelse ikke nødvendigvis dobler det i minnet. Faktisk, hvis du ser på de andre størrelsene på bildene, vil du legge merke til at størrelsen på bildene fra 16x16 til 128x128 sprite bare beveger seg opptil 2,98KB, og 256x256 beveger seg bare opptil 3,43KB! Jeg vet, helt riktig!?!
Den andre grunnen til at vi gjør dette er for enkelhets skyld. Sprite-arkene gir en fin måte å organisere alle bildene på. Hvis du noen gang har spilt et spill på Atari, NES, Sega Saturn, SNES, Gameboy, eller stort sett alt som er 2D, så har du sett spritark på jobben. Noen av disse spillene har tusenvis og tusenvis av sprites i dem. Ta et spill som Final Fantasy 3 på Super Nintendo (som vi alle vet er virkelig Final Fantasy 6, ikke sant?). De har dusinvis av tegn, hundrevis av fiender, staver, ting, terrengtyper, og sannsynligvis flere dusin andre ting som jeg drar ut. Så hvordan holder de på med alle de enkelte sprites? Igjen, svaret er sprite ark. Tenk deg at i stedet for å ha dusinvis av sprites eller sprite ark for hver karakter, hadde de alle bildene for hver karakter på 1 ark. På den måten visste de alltid nøyaktig hva de skulle referere til. Livet blir eksponentielt lettere når man arbeider med store prosjekter. Som en rask referanse, google bilde søk etter "Finaly Fantasy 6 Sprite Sheets" og sjekk ut noen av sprite arkene fra Final Fantasy for å få en ide om hvordan de brukes i store spill.
Den overordnede prosessen med å skape sprites med animasjoner er en ganske enkel prosess. Åpne en tom fil og navnet den main.lua. Det første vi må gjøre er å sette opp vår sprite-handler. Gå videre og legg inn følgende kode:
Accentsconagua
--Dette skal se kjent, skjuler statuslinjen fra visning display.setStatusBar (display.HiddenStatusBar) - 'sprite' er det vi skal bruke til å lage våre sprite sheets - 'require' lar Corona vite at vi ringer til allerede - etablerte funksjoner i en annen fil. "sprite" er allerede bygd inn i - Corona, slik at vi ikke trenger å gjøre noe mer på den slutten - Vi vil bruke sprite som en "sprite handler" for å lage spritesheets local sprite = require ("sprite") Fordi Corona allerede har gjort det meste av arbeidet for oss, er vi igjen med en ganske enkel prosess. Her er hva du trenger å huske. Fra vår spritbehandler lager vi et spritark. Fra vårt spritark oppretter vi "sett". Fra våre sett lager vi animasjoner og spriteobjekter. For denne metoden for sprite sheet creation å jobbe, bør hver sprite være den samme dimensjonen. Så hver ramme av vårt lille monster er 100x100. I dette eksemplet er det ett langt ark med sprites. For at dette skal fungere best og mest effektivt, bør sprite ark alltid gjøres i krefter på 2. 2x2, 4x4, 16x16, 32x32, 64x64 osv. Selvfølgelig vil du aldri bruke noe som er lite for det meste, men Dette gjelder helt opp til 1024x1024. Du kan teoretisk gå enda større enn det, men hver enhet har en maksimal teksturstørrelse, og hvis du går over den teksturstørrelsen, vil appen ikke kunne laste spritearkene. Så før du legger til sprite ark som er 4096x4096, må du sørge for å gjøre undersøkelsen din for å sikre at målenheten din klarer det! En annen ting å merke seg er at når du har bildene dine i en firkant, vil den lese dem på samme måte som du ville lese en bok. Topp til bunn, fra venstre til høyre, slik som:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
Så når du forteller sprite å se på rammer 6 til 12, vil det automatisk vite hvor du skal dra.
Legg til denne koden til prosjektet ditt under kravlinjen:
--å lage et nytt spritesheet vil ødelegge bildet du legger inn i like blokker som er 100 - med 100, endre disse parametrene til hvilken størrelse bildene dine er. Vær oppmerksom på at denne metoden - av sprite-skapelsen, bare virker for sprites som er like store. Det finnes andre metoder for å håndtere sprites av forskjellige størrelser, men det ligger utenfor omfanget av denne opplæringen. lokal spriteSheet = sprite.newSpriteSheet ("images / monsterSpriteSheet.png", 100, 100) - fra vårt spritesheet oppretter vi en spriteSet, slik kan vi hvordan vi kan gruppere forskjellige sprites - for organisasjonsformål. Si for eksempel at vi hadde 2 forskjellige monstre, vi kunne sette dem i samme spritesheet og lage 2 forskjellige sprite sett hver holder informasjonen til - de respektive rammene. Dette sprite-settet inneholder alle syv rammer i bildet vårt, definert av 1 og 7. lokale monsterSet = sprite.newSpriteSet (spriteSheet, 1, 7) - neste vi lager animasjoner fra våre sprite-sett. For å gjøre dette bare fortelle - funksjonen som sprite satt til oss, neste navn animasjonen, gi startrammen og antall rammer i animasjonen, antall millisekunder - vi vil ha 1 animasjon å ta, og til slutt antall ganger vi vil - animasjonen skal løpe for. 0 vil få det til å løpe til vi forteller animtion å stoppe sprite.add (monsterSet, "running", 1, 6, 600, 0) sprite.add (monsterSet, "jump", 7, 7, 1, 1) Det siste trinnet er å lage en sprite ut av vår sprite sett som inneholder alle animtions lokale helten = sprite.newSprite (monsterSet) Nå som vi har laget vår spritark og har gjort en spriteobjekt ut av det, la oss initialisere noen av det grunnleggende vi trenger for ham.
Legg til dette under den siste koden du skrev inn:
--finner midt på skjermen x = display.contentWidth / 2 y = display.contentHeight / 2 - en boolsk variabel som viser hvilken retning vi beveger seg rett = true hero.x = x hero.y = y
Den koden vil plassere vår sprite i midten av skjermen. Neste legg til denne koden:
--bruk forberede seg til å la sprite vite hvilken animasjon den skal bruke helten: forberede ("kjører") - kalles spill vil starte den lastede animasjonshelten: spill () Kjør denne koden, og vi skal ha vårt lille monster løpende på plass i midten av skjermen. Det er egentlig alt som er å skape animerte sprites fra sprite ark. Vi vil bruke dem litt mer grundig i følgende opplæringsprogrammer. For en fullstendig referanse på sprite ark, kan du sjekke Corona SDK referansen. Dette er alt vi skal dekke på emnet for nå, så forhåpentligvis er det nok å komme i gang! For en endelig effekt før du går å gjøre vårt monster løp over skjermen, legg til følgende kode til bunnen av koden din:
funksjonsoppdatering () - hvis vi kjører rett, fortsett du rett hvis (høyre) da hero.x = hero.x + 3 - hvis vi ikke beveger oss, fortsett å flytte til venstre hero.x = hero.x - 3 slutten - hvis vårt monster har løpt av skjermen, må han vende - og løpe i motsatt retning. hero.xScale = -1 - vil vippe vår sprite horisontalt hvis (hero.x> 380) og høyre = falsk hero.xScale = -1 ende hvis (hero.x < -60) then right = true hero.xScale = 1 end end --call the update function timer.performWithDelay(1, update, -1)
Enkle ting. Strip ut alle kommentarene jeg laget i koden forklarer ting, og du vil se hvor lett Corona gjør det til å sette opp hyggelige animerte sprites. Hvis du har og spørsmål eller kommentarer, gi meg beskjed!
