Share
Dette er den andre avgiften i vår Corona SDK Bubble Popping-spillopplæring. I dagens veiledning legger vi til grensesnittet vårt ved å kodes spillinteraksjonen. Les videre!
Vær så snill å se del 1 i serien for å forstå og forberede deg på denne opplæringen.
Denne funksjonen legger de nødvendige lytterne til TitleView knapper.
Accentsconagua
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, a springen lytteren legges til kredittvisningen for å fjerne den.
funksjonsvisningKreditter: trykk (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 30)) transition.to (creditsVis, time = 300, y = (display.contentHeight * 0.5) +35, onComplete = funksjon addEventListener ('tap', hideCredits) end) slutten Når kreditter skjermen er tappet, vil den bli tweened ut av scenen og fjernet.
funksjon hideCredits: trykk (e) transition.to (creditsView, time = 300, y = display.contentHeight + 25, onComplete = funksjon () kreditterBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ) display.remove (creditsView) creditsView = null end) transition.to (titleBg, time = 300, y = lastY); slutt
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 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) Deretter legger vi veggene til scenen. De er opprettet ved hjelp av tegning API.
-- Veggene igjen = display.newLine (0, 240, 0, 720) right = display.newLine (320, 240, 320, 720) toppen = display.newLine (160, 0, 480, 0) bunn = display.newLine , 480, 480, 480)
Denne delen skaper fem bobler på skjermen i tilfeldig posisjon.
bobler = display.newGroup () for i = 1, 5 gjør lokale rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) lokal ry = 21 + math.floor (math.random ) * (display.contentHeight - 42)) lokal b = display.newImage ('bubble.png', rx, ry) b.name = 'boble' Her legger vi til fysikk til vår nye boble.
-- Bubble Physics physics.addBody (b, dynamisk, radius = 21, sprette = 1) b: setLinearVelocity (100, 100) bobler: sett inn
Og gjør det samme med våre vegger.
-- Walls Physics physics.addBody (venstre, 'statisk') physics.addBody (høyre, 'statisk') physics.addBody (topp, 'statisk') physics.addBody (bunn, 'statisk')
Nå legger vi til nivået, poppede og nødvendige bobler tekstfeltene.
-- Nivå TextField nivå = display.newImage ('level.png', 2, 0) levelN = display.newText ('1', 54, 5, native.systemFont, 15) levelN: setTextColor (255, 255, 255) Popped TextField popped = display.newImage ('popped.png', 126, 0) poppedN = display.newText ('0', 187, 5, native.systemFont, 15) poppedN: setTextColor (255, 255, 255) Required TextField required = display.newImage ('required.png', 231, 0) requiredN = display.newText ('4', 306, 5, native.systemFont, 15) requiredN: setTextColor (255, 255, 255) display.newGroup () slutten Denne funksjonen legger til de nødvendige lytterne for å starte spilllogikken.
funksjonen spilllistere (handling) hvis (handling == 'legg til') så bg: addEventListener ('tap', createBullets) ellers bg: removeEventListener ('tap', createBullets) Runtime: removeEventListener ('enterFrame' Denne koden kjøres når bakgrunnen er tappet.
Først oppretter vi kulegrafikkene.
funksjon createBullets (e) for i = 1, 4 gjør lokale bullet = display.newImage ('bullet.png', e.x, e.y) Da gir vi det en retning ved å sette den lineære hastigheten.
-- Angi retning hvis (i == 1) så bullet.x = bullet.x - 8 physics.addBody (kule, kinematisk, radius = 7) kule: setLinearVelocity (-150, 0) ende - i == 2) da bullet.x = bullet.x + 8 physics.addBody (bullet, kinematisk, radius = 7) bullet: setLinearVelocity (150, 0) ende - rett hvis (i == 3) da bullet.y = bullet.y - 8 physics.addBody (bullet, kinematisk, radius = 7) bullet: setLinearVelocity (0, -150) ende opp hvis (i == 4) deretter bullet.y = bullet.y + 8 physics.addBody (bullet, kinematisk, radius = 7) bullet: setLinearVelocity (0, 150) end -down bullet: addEventListener (kollisjon, onCollision) bg: removeEventListener ('tap', createBullets) avslutte Runtime: addEventListener ('enterFrame', update) end Kollisjonene håndteres av neste funksjon. En lyd spilles, poenget øker og fjerner boblen på skjermen.
Funksjon onCollision (e) hvis (e.other.name == 'bubble') deretter audio.play (pop) display.remove (e.other) poppedN.text = tostring (tonnummer (poppedN.text) + 1) endeend
Denne koden vil fjerne eventuelle kuler som ikke er synlige.
funksjonsoppdatering (e) - Kontroller for offstage-kuler for i = 1, kuler.numHolder gjør hvis (kuler [i] ~ = null) så hvis (kuler [i] .x < 0 or bullets[i].x > 320 eller kuler [i] .y < 0 or bullets[i].y > 480) og deretter display.remove (kuler [i]) slutten slutten
Her ser vi om de poppede boblene har nådd ønsket mengde og ring a vinne Varsle om sant.
-- Sjekk om nødvendige bobler ble poppet hvis (bullets.numChildren == 0 og tallsnummer (poppedN.text)> = tonnnummer (requiredN.text)) og deretter varsling ('seier') elseif (bullets.numChildren == 0 og tallsnummer (poppedN. tekst) < tonumber(requiredN.text)) then alert('lose') end end Varslingsfunksjonen viser en melding i henhold til typen av varsling som kalles (nivå fullført eller feil).
funksjonalarm (handling) gameListeners ('rmv') hvis (handling == 'vinn') så lokalt alarmView = display.newImage ('won.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) andre lokale alarmView = display.newImage ('lost.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, forsinkelse = 500) endeenden 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 compliler.
Ved hjelp av grafikken du opprettet før du kan 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!
Eksperimenter med det endelige resultatet, og prøv å lage din egendefinerte versjon av spillet!
Jeg håper du likte denne opplæringsserien og finner den nyttig. Takk for at du leser!
