Share
Dette er den andre avgiften i Corona SDK Hundreds spillopplæringen. I dagens veiledning legger vi til grensesnittet og spillets interaksjon. 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 lastX = titleBg.x transition.to (titleBg , time = 300, y = (display.contentHeight * 0.5) - (titleBg.height + 20), x = (display.contentWidth * 0.5) - (titleBg.width * 0.5) - 10) transition.to , time = 300, y = (display.contentHeight * 0.5) +35, onComplete = funksjon () kreditterVis: addEventListener ('tap', hideCredits) 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, x = lastX); 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) Denne koden plasserer spillet bakgrunnsbilde i scenen.
-- Spill Bakgrunn display.remove (bg) gameBg = display.newImage ('gameBg.png') 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 sirkler på skjermen i en tilfeldig posisjon, Jeg variabel brukes til å multiplisere en konstant som vil definere sirkelfargen som gjør den lettere hver gang. En tekstfelt er også opprettet, og begge holdes innenfor en gruppe for å flytte dem sammen.
-- Sirkler sirkler = display.newGroup () lokalfarge = 0 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 cg = display.newCircle (rx, ry, 21) lokal label = display.newText ('0', cg.x-4.2, cg.y-12.2 , native.systemFontBold, 13) cg.fillColor = color + (i * 40) cg: setFillColor (cg.fillColor) lokal c = display.newGroup (cg, etikett) c.pressed = false c.name = 'c' c .radius = 21 Her legger vi til fysikk i vår nye sirkel.
-- Circle Physics physics.addBody (c, 'dynamisk', radius = 21, sprette = 1) c: setLinearVelocity (100, 100) sirkler: 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 tekstfeltene.
-- Score TextField score = display.newText ('0', 257, 4, native.systemFont, 15) score: setTextColor (150, 150, 150) lokal totalt = display.newText ('/ 100', 267, 4, native. systemFont, 15) totalt: setTextColor (150, 150, 150) gameListeners ('add') slutten Denne funksjonen legger til de nødvendige lytterne for å starte spilllogikken.
funksjon spilllistere (handling) hvis (handling == 'legg til') så for i = 1, 5 gjør sirkler [i]: addEventListener ('touch', 'OnTouch') sirkler [i]: addEventListener ('kollisjon' for i = 1, 5 gjør sirkler [i]: removeEventListener ('touch', onTouch) sirkler [i]: removeEventListener ('kollisjon', onCollision) Denne koden kjøres når sirkelen berøres.
Først øker vi poengsummen.
funksjon onTouch (e) hvis (e.phase == 'startet') så e.target.pressed = true - Øk Counter score.text = tostring (tonnnummer (score.text) + 2)
Så størrelsen på sirkelen. Sirkelen vil vokse når fingeren ikke lenger er på den.
-- Øk størrelsen e.target.radius = e.target.radius + 2
Endrer fargen fra svart / grått til rødt.
-- Endre farge e.target [1]: setFillColor (224, 11, 0)
Vi gjenskaper sirkelen og dens egenskaper når berøringshendelsen er avsluttet.
hvis (e.phase == 'endte') så e.target.pressed = false - Oppdater fysikk lokalt nummer = tostring (tonnummer (e.target [2] .text) +2) local r = e.target.radius lokal cg = display.newCircle (e.target.x, e.target.y, r) lokal label = display.newText (tall, cg.x-4.2, cg.y-12.2, native.systemFontBold, 13) cg: setFillColor (e.target [1] .fillColor) cg.fillColor = e.target [1] .fillColor lokal c = display.newGroup (cg, etikett) c.pressed = false c.name = 'c' c.radius = r sirkler: fjern (e.target) physics.addBody (c, 'dynamisk', radius = r, sprett = 1) c: setLinearVelocity (100, 100) c: addEventListener ('touch', onTouch) c: addEventListener (crash), onCollision) sirkler: sett inn (c) - Flytt tekstfelt når nummeret er 2 siffer hvis (tonnnummer (tall)> 9) deretter label.x = label.x - 5 end Her ser vi om poengsummen har nådd 100 poeng og ring a vinne Varsle om sant.
-- Sjekk om poengsummen har nådd 100 hvis (tonnummer (score.text)> = 100) og deretter lokal bg = display.newImage ('gameBg.png') transition.from (bg, time = 500, alpha = 0, onComplete = varsel ('vinn')) slutten slutten Spillet går tapt når en presset sirkel kolliderer med en annen. Lytterne er fjernet og a tapt varsel er kalt.
Funksjon onCollision (e) hvis (e.target.pressed og e.other.name == 'c') deretter - Vent 0,1 sekunder for å stoppe fysikk timer.performWithDelay (100, funksjon () physics.stop () ende, 1 ) lokal r = e.target.radius lokal c = display.newCircle (e.target.x, e.target.y, r) c: setFillColor (224, 11, 0) gameListeners ('rmv') transition.to ( c, time = 700, xScale = 25, yScale = 25, onComplete = varsel ('tapt')) endeenden Varslingsfunksjonen viser en melding i henhold til typen av varsel som kalles.
funksjonalarm (handling) hvis (handling == 'vinn') så lokalt alarmView = display.newImage ('won.png', 10, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, forsinkelse = 500) annet lokalt alarmView = display.newImage ('lost.png', 10, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, forsinkelse = 500) slutten 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!
