Share
I denne opplæringsserien vil jeg vise deg hvordan du lager et uendelig scroller-spill med Corona SDK ved å bygge et Ostrich Runner-spill. Du lærer om å rulle objekter, fysikkmanipulering, berøringsreguleringer og kollisjonsdeteksjon. Målet med spillet er å flytte tegnet og samle gjenstander for å heve poengsummen. Les videre!
Ved å bruke pre-laget grafikk vil vi kode et underholdende spill ved hjelp av Lua og Corona SDK API.
Spilleren vil kunne bruke berøringsskjermen på enheten for å flytte tegnet og samle gjenstander. Du kan endre parametrene i koden for å tilpasse spillet.
Det første vi må gjøre er å velge plattformen vi vil kjøre vår app på, slik at vi kan velge størrelsen på bildene vi skal bruke.
IOS-plattformen har disse egenskapene:
Fordi Android er en åpen plattform, er det mange forskjellige enheter og løsninger. Noen av de vanligste skjermegenskapene er:
I denne opplæringen vil vi fokusere på iOS-plattformen med grafisk design, spesielt utviklet for distribusjon til en iPhone / iPod touch, men koden som presenteres her, bør gjelde for Android-utvikling med Corona SDK også.
Et enkelt og vennlig grensesnitt vil bli brukt. Grensesnittet vil innebære flere former, knapper, bitmap og mer.
Grensesnittet grafiske ressurser som kreves for denne opplæringen finner du i vedlagte nedlastning.
Avhengig av hvilken enhet du har valgt, må du kanskje eksportere grafikken i den anbefalte PPI-en. Du kan gjøre dette ved å bruke favorittbildeditoren din.
Jeg brukte Juster størrelse ... Fungerer i Forhåndsvisning-appen på Mac OS X.
Husk å gi bildene et beskrivende navn og lagre dem i prosjektmappen din.
En ekstern fil vil bli brukt til å gjøre programmet gå fullskjerm på tvers av enheter, config.lua fil. Denne filen viser den opprinnelige skjermstørrelsen og metoden som brukes til å skalere innholdet hvis appen kjøres i en annen skjermoppløsning.
søknad = content = width = 320, height = 480, scale = "letterbox",
La oss nå skrive søknaden!
Åpne din foretrukne Lua-editor (noen tekstredigerer vil fungere, men du vil ikke ha syntaxutheving) og forberede deg på å skrive din fantastiske app. Husk å lagre filen som main.lua i prosjektmappen din.
Vi strukturerer vår kode som om den var en klasse. Hvis du kjenner ActionScript eller Java, bør du finne strukturen kjent.
Necesary Classes Variabler og Constants Declare Funksjoner contructor (Hovedfunksjon) klassemetoder (andre funksjoner) ring Hovedfunksjon
display.setStatusBar (display.HiddenStatusBar)
Denne koden skjuler statuslinjen. Statuslinjen er linjen øverst på skjermbildet som viser tid, signal og andre indikatorer.
Vi bruker Fysikk biblioteket til å håndtere kollisjoner. Bruk denne koden til å importere den:
-- Fysikk lokalfysikk = krever (fysikk) fysikk.start ()
En enkel grafikk brukes som bakgrunn for applikasjonsgrensesnittet, den neste koden lagrer den.
Accentsconagua
-- Grafikk - [Bakgrunn] lokal bg = display.newImage ('bg.png') 
Dette er tittelvisningen, det blir den første interaktive skjermen som vises i vårt spill. Disse variablene lagrer komponentene:
-- [Title View] lokal tittel lokal playBtn local creditsBtn local titleView
Denne visningen vil vise kreditter og opphavsrett til spillet. Denne variabelen brukes til å lagre den:
-- [CreditsView] lokale kreditterVis
Bakgrunnsnivået, det legger også til tekstfeltet.
-- Spill Bakgrunn Lokalt spillBg
En instruksjonsmelding vil vises i starten av spillet, den blir tweened ut etter 2 sekunder.
-- Instruksjoner lokale ins
Tegnet grafisk. Målet med spillet er å flytte det opp og ned på skjermen for å samle kirsebærene.
-- Ostrich lokale struds
Kirsebær grafikk. Det er også dårlige kirsebær som vil få deg til å miste spillet.
-- Cherrys lokale kirsebær
Puten grafikk. Trykk på dem for å flytte tegnet.
-- Pad lokal opp lokalt nede
Dette er varselet som vil bli vist når en dårlig kirsebær er samlet. Det vil fullføre nivået og avslutte spillet.
-- Varsle lokal varslingView
Vi bruker lydeffekter for å forbedre følelsen av spillet, du kan finne musikken som brukes i dette eksempelet på playonloop.com. Lyder ble opprettet i as3sfxr.
-- Høres lokal bgMusic = audio.loadStream ('POL-lilla-hills-short.mp3') lokale cherrySnd = audio.loadSound ('cherry.mp3') lokal badCherrySnd = audio.loadSound ('badCherry.mp3') Dette er variablene vi skal bruke. Les kommentarene i koden for å lære mer om dem.
-- Variabler lokal timerSrc - legg til kirsebærstimulator lokal yPos = 108, 188, 268 - mulige struts y posisjoner lokal hastighet = 5 - kirsebær hastighet lokal speedTimer - timer for å endre hastigheten på kirsebærene
Erklære alle funksjoner som lokal i begynnelsen.
-- Funksjoner lokal Main = lokal startButtonListeners = lokal showCredits = lokal hideCredits = lokal showGameView = lokal spillListeners = lokal startGame = lokal createCherry = lokal moveSpeed = local increaseSpeed = lokal oppdatering = lokal onCollision = lokal varsling =
Deretter skal vi opprette funksjonen som vil initialisere all spilllogikken:
funksjon Hoved () - kode ... ende
Nå plasserer vi tittelvisningen i scenen og kaller en funksjon som vil legge til springen lytter til knappene.
funksjon Main () titleBg = display.newImage ('title.png', 113, 43) playBtn = display.newImage ('playBtn.png', 219, 160) creditsBtn = display.newImage ('creditsBtn.png', 205, 223) titleView = display.newGroup (bg, titleBg, playBtn, creditsBtn) startButtonListeners ('add') slutten Denne funksjonen legger til de nødvendige lytterne til TitleView knapper.
funksjon startButtonListeners (action) hvis (action == 'add') så spillBtn: addEventListener ('tap', showGameView) kreditterBtn: addEventListener ('tap', showCredit) annet playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener "trykk", showCredits) slutten Kredittskjermbildet vises når brukeren tapper om knappen. EN springen lytteren legges til kredittvisningen for å fjerne den.
funksjonsvisningKreditter: trykk (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', -130, display.contentHeight-140) transition.to (creditsView, time = 300, x = 65, onComplete = function () creditsVis: addEventListener ('tap', hideCredits) end) ende Når kreditter skjermen er tappet, vil den bli tweened ut av scenen og fjernet.
funksjon hideCredits: trykk (e) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsVis: removeEventListener , hideCredits) display.remove (creditsView) creditsView = null end) slutt
Når Spille knappen er tappet, tittelvisningen er tweened og fjernet, avslørende spillvisningen. Det er mange deler involvert i denne visningen, så vi deler dem i de neste trinnene.
funksjon showGameView: trykk (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = funksjon () startButtonListeners ('rmv') display.remove (titleView) titleView = null end) Følgende linjer legger til spillinstruksjonene.
-- Instruksjoner Melding inn = display.newImage ('ins.png', 187, 199) Denne delen skaper Score TextField på scenen.
-- TextFields scoreTF = display.newText ('0', 258, 26.5, 'Marker Felt', 16) scoreTF: setTextColor (184, 165, 104) Legg strutskarakteren til nivået.
-- Strutsstruts = display.newImage ('ostrich.png', 11, 180) Dette er kontrollene på skjermen for spillet.
-- Pute opp = display.newImage ('up.png', 418, 20) ned = display.newImage ('down.png', 418, 258) up.name = 'opp' down.name = 'down' Deretter legger vi til fysikk til spillobjektene. Vi lager også en Bord for kirsebær og ring til gameListeners funksjon.
-- Legg til Strutsfysikkfysikk.addBody (struts) ostrich.isSensor = true cherrys = display.newGroup () gameListeners ('add') slutten Denne funksjonen legger til de nødvendige lytterne for å starte spilllogikken.
funksjonen spilllistere (handling) hvis (handling == 'legg til') deretter inn: addEventListener ('tap', startGame) Runtime: addEventListener ('enterFrame', oppdatering) opp: addEventListener ('tap', movePlayer) ned: addEventListener trykk ', movePlayer) speedTimer = timer.performWithDelay (5000, increaseSpeed, 5) ellers Runtime: removeEventListener (' enterFrame ', oppdater) opp: removeEventListener (' tap ', movePlayer) ned: removeEventListener (' tap ', movePlayer) avbryte (timerSrc) timerSrc = nil timer.cancel (speedTimer) speedTimer = null ende I denne delen fjerner vi instruksjonsmeldingen, begynner å spille bakgrunnsmusikken, og lag en tidtaker som vil legge til en kirsebær hver 400 millisekunder.
funksjon startGame () ins: removeEventListener ('tap', startGame) display.remove (ins) audio.play (bgMusic, loops = -1, channel = 1) timerSrc = timer.performWithDelay (400, createCherry, 0) end Den neste kodestykket oppretter en vanlig eller dårlig kirsebær basert på et tilfeldig tall og plasserer det på skjermen. Den resulterende gjenstanden blir lagt til fysikkmotoren for å sjekke for kollisjoner.
funksjon createCherry () lokal kirsebær lokal rnd = math.floor (math.random () * 4) + 1 hvis (rnd == 4) deretter kirsebær = display.newImage ('badCherry.png', display.contentWidth, yPos .floor (math.random () * 3) +1]) cherry.name = 'dårlig' annet kirsebær = display.newImage ('cherry.png', display.contentWidth, yPos [math.floor (math.random * 3) +1)) cherry.name = 'kirsebær' -end - Kirsebærfysikkfysikk.addBody (kirsebær) cherry.isSensor = ekte kirsebær: addEventListener (kollisjon), kollisjoner Vi endrer Y-posisjonen til strupen ved hjelp av kontrollputen vi opprettet tidligere.
funksjon movePlayer (e) if (e.target.name == 'up' og struts.y ~ = 122) deretter ostrich.y = struts.y - 80 elseif (e.target.name == 'down' og struds. y = = 282) deretter struts.y = struts.y + 80 ende
En timer vil øke hastigheten hvert 5. sekund. Et ikon vises for å varsle spilleren om hastighetsendringen.
funksjon økningSpeed () speed = hastighet + 2 - ikon lokalt ikon = display.newImage ('speed.png', 204, 124) overgang.fra (ikon, time = 200, alfa = 0,1, onComplete = funksjon .performWithDelay (500, funksjon () overgang.to (ikon, tid = 200, alfa = 0,1, onComplete = funksjon () display.remove (ikon) icon = null end) ende) ende) ende Denne funksjonen håndterer kirsebærbevegelsen. Den bruker hastighetsvariabelen til å bestemme hvor mange piksler som skal flyttes kirsebær hver ramme.
funksjonsoppdatering () hvis (kirsebær ~ = null) deretter for i = 1, cherrys.numChildren gjør kirsebærer [i] .x = kirsebærer [i] .x - hastighets endeendens ende
Nå sjekker vi om kirsebæret kolliderer med struts ved hjelp av følgende kode. Poenget øker når en vanlig kirsebær kolliderer og et varsel kalles når en dårlig kirsebær berøres. I begge tilfeller er kirsebæret fjernet og en lyd spilles.
Funksjon onCollision (e) e.target:removeEventListener('Collision ', onCollision) display.remove (e.target) hvis (e.target.name ==' kirsebær ') deretter --Score scoreTF.text = tostring (tonnummer scoreTF.text) + 50) audio.play (cherrySnd) - dårlig kirsebær elseif (e.target.name == 'dårlig') deretter audio.play (badCherrySnd) alert () endeend Varslingsfunksjonen oppretter en varselvisning, animerer den, og avsluttes deretter.
funksjonalarm () audio.stop (1) audio.dispose () bgMusic = nil gameListeners ('rmv') alertView = display.newImage ('alert.png', 160, 115) transition.from (alertView, time = 300 , xScale = 0.5, yScale = 0.5) lokal score = display.newText (scoreTF.text, (display.contentWidth * 0.5) - 12, (display.contentHeight * 0.5) + 5, 'Marker Felt', 18) setTextColor (184, 165, 104) - Vent 100 ms for å stoppe fysikk timer.performWithDelay (1000, funksjon () fysikk.stop () ende, 1) ende For å starte spillet, er Hoved funksjonen må kalles. Med ovennevnte kode på plass, gjør vi det her:
Hoved()
Default.png-filen er et bilde som skal vises rett når du starter programmet mens iOS laster de grunnleggende dataene for å vise hovedskjermbildet. Legg til dette bildet i prosjektkildemappen, det blir automatisk lagt til av Corona-kompilatoren.
Ved hjelp av grafikken du opprettet før, kan du nå lage et fint og godt utseende-ikon. Ikonstørrelsen for iPhone-ikonet med ikke-retina er 57x57px, men netthinnen versjonen er 114x114px og iTunes-butikken krever en 512x512px-versjon. Jeg foreslår at du oppretter 512x512 versjonen først og deretter skaler ned for de andre størrelsene.
Det trenger ikke å ha de avrundede hjørner eller gjennomsiktig blikk, iTunes og iPhone vil gjøre det for deg.
Det er på tide å gjøre den endelige testen. Åpne Corona Simulator, bla til prosjektmappen din, og klikk deretter Åpne. Hvis alt fungerer som forventet, er du klar for det siste trinnet!
I Corona Simulator, gå til Fil> Bygg og velg målrettingsenheten. Fyll de nødvendige dataene og klikk bygge. Vent noen få sekunder, og appen din vil være klar til testing av enheten og / eller innsending for distribusjon!
I denne serien har vi lært om fysikkadferd, trykk på lyttere og kollisjoner. Disse ferdighetene kan være veldig nyttige i et stort antall spill!
Eksperimenter med det endelige resultatet, og prøv å lage din egendefinerte versjon av spillet!
Jeg håper du likte denne opplæringen og finner det nyttig. Takk for at du leser!
