Bouw een Apple Catcher Game - Interactie toevoegen

Dit is de tweede aflevering in onze Corona SDK Apple Catcher-zelfstudie. In de tutorial van vandaag zullen we aan onze interface toevoegen door de game-interactie te creëren. Lees verder!


Ook verkrijgbaar in deze serie:

  1. Bouw een Apple Catcher Game - Interface Creation
  2. Bouw een Apple Catcher Game - Interactie toevoegen

Waar we zijn gebleven ...

Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.


Stap 1: Start-knop Luisteraars

Deze functie voegt de benodigde luisteraars toe aan de TitleView toetsen.

 function startButtonListeners (action) if (action == 'add') then titleBg: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else titleBg: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener ( 'tik', showCredits) einde

Stap 2: toon credits

Het creditsscherm wordt weergegeven wanneer de gebruiker op de knop Over tikt. EEN tik luisteraar is toegevoegd aan de weergave credits om deze te verwijderen.

 functie showCredits: tik op (e) creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', -130, display.contentHeight-140) transition.to (creditsView, time = 300, x = 65, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end

Stap 3: Verberg tegoeden

Wanneer het creditsscherm wordt aangebroken, wordt het uit het werkgebied geschud en verwijderd.

 function hideCredits: tik op (e) creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap', hideCredits) display. remove (creditsView) creditsView = nil end) end

Stap 4: Spelweergave tonen

Wanneer de Begin op de knop wordt getikt, de titelweergave wordt getweend en verwijderd, waardoor de gameweergave wordt onthuld. Er zijn veel onderdelen betrokken bij deze weergave, dus we zullen ze in de volgende stappen splitsen.

 functie showGameView: tik op (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end)

Stap 5: Voeg mand toe

Deze code plaatst de mand op het podium.

 -- Mandmand = display.newImage ('basket.png', 203, 240)

Stap 6: Infobalk

Vervolgens voegen we de Info Bar-afbeelding toe en maken we de corresponderende TextFields die de huidige score en resterende tijd weergeven.

 -- Infobalk infoBar = display.newImage ('infoBar.png', 280) score = display.newText ('0', 65, -2, native.systemFontBold, 14) score: setTextColor (0) timeLeft = display.newText (' 20 ', 175, -2, native.systemFontBold, 14) timeLeft: setTextColor (0)

Stap 7: voeg fysica toe

Nu voegen we natuurkunde toe aan de basket en noemen we de functie die de game-listeners zal toevoegen.

 -- Add Physics physics.addBody (basket, 'static') - Game Luisteraars gameListeners ('toevoegen')

Stap 8: Spelluisteraars

Deze functie voegt de nodige luisteraars toe om de spellogica te starten.

 functie gameListeners (actie) if (action == 'add') then timerSrc = timer.performWithDelay (500, update, 0) basket: addEventListener ('botsing', onCollision) basket: addEventListener ('touch', sleepBasket) else timer. cancel (timerSrc) timerSrc = nil basket: removeEventListener ('collision', onCollision) basket: removeEventListener ('touch', dragBasket) physics.stop () end end

Stap 9: sleep het mandje

De volgende code gebruikt de fase gebeurteniseigenschap om de mand op de x-as te slepen met behulp van de vinger van de speler.

 -- Sleep de mandfunctie dragBasket (e) als (e.phase == 'begon') en vervolgens lastX = e.x - basket.x elseif (e.phase == 'moved') en vervolgens mand.x = e.x - lastX end end

Stap 10: voeg Apple of Stick toe

De update-functie wordt elke halve seconde uitgevoerd. Elke keer dat een willekeurig getal wordt gegenereerd en vervolgens getest om te zien of een appel of een stok aan het werkgebied wordt toegevoegd. Het item wordt vervolgens toegevoegd aan de physics engine en automatisch door zwaartekracht naar beneden getrokken.

 functie-update (e) - Apple toevoegen of lokale stick vastleggen rx = math.floor (math.random () * display.contentWidth) local r = math.floor (math.random () * 4) - 0, 1, 2 , of 3 (3 is stick) als (r == 3) en lokale stick = display.newImage ('stick.png', rx, -20) stick.name = 'stick' physics.addBody (stick) else local apple = display.newImage ('apple.png', rx, -40) apple.name = 'apple' physics.addBody (apple) einde

Stap 11: Timer verlagen

Hier verhogen we de timer om de halve seconde een variabele, dus wanneer deze gelijk is aan 2, wordt een seconde verlaagd van de tijd over tekstveld.

 -- Timer tijden verlagen = keer + 1 if (keer == 2) dan timeLext.text = tostring (tonumber (timeLext.text) - 1) keer = 0 einde

Stap 12: Controleer of de timer is voltooid

Dit onderdeel controleert of de beschikbare tijd voorbij is en belt een waarschuwing als dat het geval is.

 -- Controleer of de timer over is als (timeLext.text == '0') dan alert () einde

Stap 13: Apple Collision

Wanneer een appel de mand raakt, wordt deze uit het werkgebied verwijderd, wordt de score bijgewerkt en wordt een animatie getoond met de hoeveelheid ophaalwaarde.

 function onCollision (e) if (e.other.name == 'apple') then - Remove Apple display.remove (e.other) - Toon animatie lokale scoreAnim = display.newText ('+ 10', basket.x , basket.y-10, native.systemFontBold, 16) transition.to (scoreAnim, time = 600, y = scoreAnim.y - 30, alpha = 0, onComplete = function () display.remove (scoreAnim) scoreAnim = nil end) - Update Score score.text = tostring (tonumber (score.text) + 10)

Stap 14: blijf botsing

Dit gebruikt dezelfde methode als de laatste stap, waarbij deze keer de score wordt verlaagd.

 elseif (e.other.name == 'stick') then - Remove Stick display.remove (e.other) - Toon animatie lokale scoreAnim = display.newText ('- 10', basket.x, basket.y- 10, native.systemFontBold, 16) transition.to (scoreAnim, time = 600, y = scoreAnim.y - 30, alpha = 0, onComplete = function () display.remove (scoreAnim) scoreAnim = nil end) - Update Score score.text = tostring (tonumber (score.text) - 10) end end

Stap 15: Alert

Deze functie stopt het spel en geeft de uiteindelijke score weer met behulp van de achtergrond van de waarschuwing en het tweenen ervan.

 function alert () gameListeners ('remove') local alertView = display.newImage ('alert.png', 110, 74) transition.from (alertView, time = 300, xScale = 0.5, yScale = 0.5) local totalScore = display.newText (score.text, display.contentCenterX-11, display.contentCenterY + 24, native.systemFontBold, 21) totalScore: setTextColor (72, 34, 0) end

Stap 16: Hoofdfunctie oproepen

Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:

 Hoofd()

Stap 17: Scherm laden

Het bestand Default.png is een afbeelding die juist wordt weergegeven wanneer u de toepassing start terwijl de iOS de basisgegevens laadt om het hoofdscherm weer te geven. Voeg deze afbeelding toe aan uw projectbronmap en deze wordt automatisch toegevoegd door de Corona-compileermachine.


Stap 18: Icoon

Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een mooi en goed uitziend pictogram maken. De pictogramgrootte voor het niet-retina-iPhone-pictogram is 57x57px, maar de netvliesversie is 114x114px en de iTunes-winkel heeft een 512x512px-versie nodig. Ik stel voor eerst de 512x512-versie te maken en vervolgens de overige formaten te verkleinen.

Het hoeft niet de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone zullen dat voor je doen.


Stap 19: Testen in Simulator

Het is tijd om de laatste test te doen. Open de Corona Simulator, blader naar uw projectmap en klik vervolgens op Openen. Als alles werkt zoals verwacht, bent u klaar voor de laatste stap!


Stap 20: Build

Ga in de Corona-simulator naar Bestand> Build en selecteer uw doelapparaat. Vul de vereiste gegevens in en klik op bouwen. Wacht een paar seconden en uw app is gereed voor apparaattesten en / of verzending voor distributie!


Conclusie

Experimenteer met het eindresultaat en probeer je eigen aangepaste versie van het spel te maken!

Ik hoop dat je deze tutorialserie leuk vond en vond het nuttig. Bedankt voor het lezen!