Share
Dit is de tweede aflevering in onze Corona SDK Lunar Lander-zelfstudie. In de tutorial van vandaag voegen we toe aan onze interface en de interactie met het spel. 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:
Accentsconagua
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 aftitelingscherm wordt weergegeven wanneer de gebruiker op de knop Over tikt, a tik luisteraar is toegevoegd aan de creditsweergave om dit 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 is getikt, de titelweergave is 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 manen op het podium.
-- Manen m1 = display.newImage ('moon.png', 386, 156) m2 = display.newImage ('moon.png', 252, 99) m3 = display.newImage ('moon.png', 131, 174) m1 .name = 'moon' m2.name = 'moon' m3.name = 'moon' Een grotere maan wordt gebruikt als de landingsplek. Gebruik de volgende code om hem te plaatsen:
-- Big Moon bigM = display.newImage ('moonBig.png', 10, 53) bigM.name = 'moon' De landingsplek wordt weergegeven door een grafische pijl. Er wordt een eigenschap name gemaakt om deze elementen te helpen identificeren bij een botsing.
-- Pijltje arrow = display.newImage ('arrow.png', 44, 24) arrow.name = 'doel' Vervolgens voegen we de raket toe. Dit wordt ons door de gebruiker bestuurde element.
-- Rocket rocket = display.newImage ('rocket.png', 409.5, 114) De volgende code plaatst de sterren op het scherm:
-- Sterren s1 = display.newImage ('star.png', 341, 146) s2 = display.newImage ('star.png', 273, 48) s3 = display.newImage ('star.png', 190, 234) s4 = display.newImage ('star.png', 37, 135) s1.name = 'star' s2.name = 'star' s3.name = 'star' s4.name = 'star' Om de Rocket in het scherm te verplaatsen, hebben we een gamepad nodig, deze code zorgt ervoor. EEN tik luisteraar zal later aan elke knop worden toegevoegd om de beweging af te handelen.
-- Regelt omhoog = display.newImage ('dirBtn.png', 404, 246) left = display.newImage ('dirBtn.png', 10, 246) right = display.newImage ('dirBtn.png', 84, 246) omhoog .name = 'op' left.name = 'left' right.name = 'right' up.rotation = 90 right.rotation = 180 Hier voegen we de fysica toe aan de grafische elementen.
-- Fysica toevoegen physics.addBody (m1, 'static', radius = 35) physics.addBody (m2, 'static', radius = 35) physics.addBody (m3, 'static', radius = 35) physics.addBody (bigM, 'static', radius = 40) physics.addBody (arrow, 'static') physics.addBody (rocket, 'dynamic') rocket.isFixedRotation = true rocket.isAwake = false - initialiseert initiële explosie geluid physics.addBody (s1, 'static', radius = 12) physics.addBody (s2, 'static', radius = 12) physics.addBody (s3, 'static', radius = 12) physics.addBody (s4, 'static', radius = 12) arrow.isSensor = true s1.isSensor = true s2.isSensor = true s3.isSensor = true s4.isSensor = true
Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
function gameListers () omhoog: addEventListener ('touch', movePlayer) links: addEventListener ('touch', movePlayer) right: addEventListener ('touch', movePlayer) Runtime: addEventListener ('enterFrame', update) raket: addEventListener ('botsing' ', onCollision) einde De richtingsvariabele wordt veranderd door deze functie, hierdoor zal de raket in de ingedrukte richting gaan.
functie movePlayer (e) if (e.phase == 'started' en e.target.name == 'up') then dir = 'up' elseif (e.phase == 'ended' en e.target.name = = 'omhoog') dan dir = 'none' elseif (e.phase == 'started' en e.target.name == 'left') then dir = 'left' elseif (e.phase == 'started' en e.target.name == 'right') en dir = 'right' elseif (e.phase == 'ended' en e.target.name == 'left') then dir = 'none' elseif (e.phase == 'ended' en e.target.name == 'right') en dir = 'none' end end
Deze lijnen verplaatsen de raket volgens de richting die is vastgesteld door de beweeg speler functie gemaakt in stap 13.
functie-update (e) - Rocket Movement if (dir == 'up') en dan raket: setLinearVelocity (0, -80) elseif (dir == 'left') en dan raket: setLinearVelocity (-100, 0) elseif (richt == 'rechts') en vervolgens raket: setLinearVelocity (100, 0) einde
De volgende code luistert naar een variabele die is ingesteld op true wanneer een botsing plaatsvindt tussen de raket en een maan, de veranderlijke waarde wordt gewijzigd door de onCollision functie die later zal worden aangemaakt.
Wanneer dit waar is, zal de raket op zijn oorspronkelijke positie worden geplaatst en in een slaaptoestand worden gebracht om een botsing met de maan eronder te voorkomen.
-- Rocket-Moon Collision if (hitMoon) then rocket.x = 421.5 rocket.y = 134 hitMoon = false rocket.isAwake = false end
Een vergelijkbare methode wordt gebruikt in de raket-ster botsing detectie.
-- Rocket-Star Collision if (hitStar) then display.remove (starHit) stars = stars + 1 hitStar = false end
Het niveau is compleet als de speler de vier sterren heeft verzameld en op de grotere maan terechtkomt. De volgende code verwerkt dat.
-- Doel als (hit Goal en sterren == 4) dan rocket.x = 52 rocket.y = 35 physics.stop () display.remove (pijl) audio.play (doel) hitGoal = false complete = display.newImage ('compleet. png ') elseif (hitGoal and stars ~ = 4) then hitGoal = false end Deze functie werkt als de raket botst met een ander lichaam. De naam van het lichaam wordt vervolgens gecontroleerd om de juiste actie uit te voeren. In principe wordt een geluid gespeeld en een variabele is ingesteld op true (voor de bijwerken functie om te zien) volgens de andere naam van het lichaam.
function onCollision (e) if (e.other.name == 'moon') then hitMoon = true audio.play (explo) elseif (e.other.name == 'star') then audio.play (star) starHit = e.other hitStar = true elseif (e.other.name == 'goal') then hitGoal = true end 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 aangepaste versie van het spel te maken!
Ik hoop dat je deze tutorialserie leuk vond en het nuttig vond. Bedankt voor het lezen!
