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!
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen en voor te bereiden.
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
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
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
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)
Deze code plaatst de mand op het podium.
-- Mandmand = display.newImage ('basket.png', 203, 240)
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)
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')
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
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
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
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
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
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)
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
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
Om het spel te starten, de Hoofd functie moet worden gebeld. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
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.
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.
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!
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!
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!