Share
Dette er den andre avgiften i Corona SDK Pinball Game-opplæringen. I dagens veiledning legger vi til grensesnittet vårt og kodes spillinteraksjonen. Les videre!
Vær så snill å se del 1 i serien for å forstå og forberede deg på denne opplæringen.
Når Start knappen er tappet, tittelvisningen er tweened og fjernet, avslørende spillvisningen. Det er mange deler involvert i denne visningen, så vi deler dem opp i de neste trinnene.
Accentsconagua
funksjon showGameView: trykk (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = funksjon () startButtonListeners ('rmv') display.remove (titleView) titleView = null end) Her legger vi venstre veggen, husk at den ble delt inn i deler for å påføre fysikken senere.
-- Venstre veggdeler l1 = display.newImage ('l1.png') l2 = display.newImage ('l2.png', 0, 214) l3 = display.newImage ('l3.png', 0, 273) l4 = skjerm .newImage ('l4.png', 0, 387) Denne koden plasserer den høyre veggen med samme metode.
-- Høyre veggdeler r1 = display.newImage ('r1.png', 238, 0) r2 = display.newImage ('r2.png', 274, 214) r3 = display.newImage ('r3.png', 291, 273 ) r4 = display.newImage ('r4.png', 195, 387) Legg ballen og HitLines med neste kode:
ball = display.newImage ('ball.png', display.contentWidth * 0,5, 0) hitLine1 = display.newImage ('hitLine.png', 70, 28) hitLine2 = display.newImage ('hitLine.png', 110, 28) Målene legges til ved hjelp av de neste linjene:
-- Hitballer hitBall1 = display.newImage ('hitBall.png', 160, 186) hitBall2 = display.newImage ('hitBall.png', 130, 236) hitBall3 = display.newImage ('hitBall.png', 187, 236) hitBall1.name = 'hBall' hitBall2.name = 'hBall' hitBall3.name = 'hBall' Neste legger vi padlene og gir dem et navn for å bruke det senere.
pLeft = display.newImage ('paddleL.png', 74, 425) pRight = display.newImage ('paddleR.png', 183, 425) pLeft.name = 'leftPaddle' pRight.name = 'rightPaddle' Disse knappene styrer padlene, legger til dem ved hjelp av denne koden:
lBtn = display.newImage ('lBtn.png', 20, 425) rBtn = display.newImage ('rBtn.png', 260, 425) lBtn.name = 'left' rBtn.name = 'right' Til slutt legger vi til tekstfeltet.
-- Score TextField score = display.newText ('0', 2, 0, 'Marker Felt', 14) score: setTextColor (255, 206, 0) 
Du lurer sikkert på hvorfor vi lagt til veggene i deler. Siden vi utfører pixel perfekte kollisjoner på dem, kan vi ikke bare bruke addBody metode (da dette vil legge til en boks som dekker alfakanalen også), i stedet bruker vi form parameter for å definere et polygon for bildet.
Hvorfor ikke en enkelt polygon?
Formparameteren godtar kun konveks former og maksimalt 8 sider, vår vegg er heller ikke, så vi splitter det enkelt i stykker.
-- Venstre veggdeler physics.addBody (l1, 'statisk', form = -40, -107, -11, -107, 40, 70, 3, 106, -41, 106) physics.addBody (l2, 'statisk', form = -23, -30, 22, -30, 22, 8, 6, 29, -23, 29) fysikk.addBody (l3, 'statisk', form = -14 , -56, 14, -56, 14, 56, -14, 56) fysikk.addBody (l4, 'statisk', form = -62, -46, -33, -46, 61, 45, -62, 45) - Høyre veggdeler physics.addBody (r1, 'statisk', form = 10, -107, 39, -107, 40, 106, -5, 106, -41, 70 ) fysikk.addBody (r2, 'statisk', form = -22, -30, 22, -30, 22, 29, -6, 29, -23, 9) fysikk.addBody (r3, ' statisk ', form = -14, -56, 14, -56, 14, 56, -14, 56) fysikk.addBody (r4,' statisk ', form = 32, -46, 61, -46, 61, 45, -62, 45)
Lignende metoder brukes sammen med de andre figurene, unntatt sirkler som bruker radius parameter.
physics.addBody (ball, 'dynamic', radius = 8, sprett = 0.4) physics.addBody (hitLine1, 'static', shape = -20, -42, -15, -49, -6, - 46, 18, 39, 15, 44, 5, 44,) fysikk.addBody (hitLine2, "statisk", form = -20, -42, -15, -49, -6, -46, 18 , 39, 15, 44, 5, 44,) fysikk.addBody (hitBall1, 'statisk', radius = 15) physics.addBody (hitBall2, 'static', radius = 15) physics.addBody hitBall3, 'static', radius = 15) physics.addBody (pRight, 'statisk', shape = -33, 11, 27, -12, 32, 1) physics.addBody ', form = -33, 1, -28, -12, 32, 11)
En enkel linje legges til toppen av skjermen som en vegg for å sprette ballen.
-- Top Wall Local topWall = display.newLine (display.contentWidth * 0.5, -1, display.contentWidth * 2, -1) physics.addBody (topWall, 'static')
Denne funksjonen legger til de nødvendige lytterne for å starte spilllogikken.
Funksjon spillListere (handling) hvis (handling == 'legg til') deretter lBtn: addEventListener ('touch', movePaddle) rBtn: addEventListener ('touch', movePaddle) ball: addEventListener ('kollisjon', onCollision) Runtime: addEventListener enterExtListener ('touchFile', movePaddle) ball: removeEventListener ('kollisjon', onCollision) Runtime: removeEventListener ('enterFrame', oppdatering) ende ende Knappene på skjermen vil utløse rotasjonen av padlene. Denne koden håndterer det.
funksjon movePaddle (e) hvis (e.phase == 'startet' og e.target.name == 'left') så pLeft.rotation = -40 elseif (e.phase == 'startet' og e.target.name == 'høyre') så pRight.rotation = 40 slutt
Rotasjonen vil gå tilbake til sin opprinnelige tilstand når knappen ikke lenger trykkes.
hvis (e.phase == 'endte') så pLeft.rotation = 0 pRight.rotation = 0 endeend
Bollen vil bli skutt når en kollisjon med padlen oppstår, men bare hvis padlerotasjonen er aktiv. Dette unngår å skyte ballen når knappene ikke trykkes.
Funksjon onCollision (e) - Skyt hvis (e.phase == 'startet' og e.other.name == 'leftPaddle' og e.other.rotation == -40) deretter ball: applyLinearImpulse (0.05, 0.05 ball .y, ball.y) elseif (e.phase == 'startet' og e.other.name == 'rightPaddle' og e.other.rotation == 40) så ball: applyLinearImpulse (0.05, 0.05, ball.y , ball.y) slutten
Poenget vil øke etter at en kollisjon har oppstått med noen hitball.
hvis (e.phase == 'endte' og e.other.name == 'hBall') så score.text = tostring (tonnummer (score.text) + 100) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 2 audio.play (bell) endeend
Denne koden kontrollerer om ballen faller gjennom mellomrommet mellom padlene og tilbakestiller ballen hvis det er sant.
funksjonsoppdatering () - Kontroller om ballen treffes nederst hvis (ball.y> display.contentHeight) da ball.y = 0 audio.play (buzz) endeend
For først å starte spillet, vil 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 compliler.
Ved hjelp av grafikken du opprettet før, kan du nå lage et fint og godt utseende-ikon. Ikonstørrelsen for iPhone-ikonet til 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. Ikonet trenger ikke å ha de avrundede hjørner eller gjennomsiktig blikk, iTunes og iPhone vil gjøre det for deg.
Det er på tide å kjø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!
Eksperimenter med det endelige resultatet, og prøv å lage din egendefinerte versjon av spillet!
Jeg håper du likte denne opplæringsserien og fant den nyttig. Takk for at du leser!
