Share
Dit is de tweede aflevering in onze Corona SDK Air Hockey Game-zelfstudie. In de tutorial van vandaag zullen we onze interface toevoegen en de interactie met het spel coderen. 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 playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: 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) 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 + 50)) transition.to (creditsView, time = 300, y = (display.contentHeight * 0.5) + 35, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Wanneer het creditsscherm wordt aangebroken, wordt het uit het werkgebied geschud en verwijderd.
functie hideCredits: tik op (e) transition.to (creditsView, time = 300, y = display.contentHeight + 25, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); einde 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) Hier maken we 6 lijnen die zullen worden gebruikt als de tafelwanden.
-- Wanden links = display.newLine (-1, display.contentHeight * 0.5, -1, display.contentHeight * 2) right = display.newLine (display.contentWidth + 1, display.contentHeight * 0.5, display.contentWidth + 1, display .contentHeight * 2) topLeft = display.newLine (0, -1, display.contentWidth - 120, -1) topRight = display.newLine (display.contentWidth, -1, display.contentWidth * 1.6, -1) bottomLeft = display .newLine (0, display.contentHeight, display.contentWidth - 120, display.contentHeight) bottomRight = display.newLine (display.contentWidth, display.contentHeight, display.contentWidth * 1.6, display.contentHeight)
Deze code plaatst de achtergrond van het spel in het werkgebied.
-- Game Bg gameBg = display.newImage ('gameBg.png') Voeg de Player paddle toe aan de volgende code:
-- Speler player = display.newImage ('paddle1.png', display.contentCenterX-25, display.contentHeight-100) De vijandelijke peddel wordt gemaakt door deze lijn:
-- Vijand vijand = display.newImage ('paddle2.png', display.contentCenterX-25, 10) Vervolgens voegen we de scores TextFields toe om ze later te gebruiken.
-- Scores enemyScore = display.newText ('0', 289, 206, 'Courier-Bold', 20) enemyScore: setTextColor (227, 2, 2) playerScore = display.newText ('0', 289, 240, 'Courier- Bold ', 20) playerScore: setTextColor (227, 2, 2) Dit is de puck, deze verschijnt in het midden van het podium.
-- Puck puck = display.newImage ('puck.png', display.contentCenterX-20, display.contentCenterY-20) Ten slotte voegen we de fysica toe aan de grafische elementen. We hebben ook een eigenschap Puck op false ingesteld om rotatie te voorkomen.
-- Set Physics physics.addBody (links, 'static') physics.addBody (right, 'static') physics.addBody (topLeft, 'static') physics.addBody (bottomLeft, 'static') physics.addBody (topRight, 'static ') physics.addBody (bottomRight,' static ') physics.addBody (puck,' dynamic ', radius = 20, bounce = 0.4) puck.isFixedRotation = true physics.addBody (speler,' dynamisch ', radius = 25) physics.addBody (vijand, 'static', radius = 25) gameListeners ('add') einde De volgende functie zorgt voor het slepen van de speler.
Het gebruikt een andere methode dan eerdere zelfstudies, omdat we het object willen slepen zonder zijn fysica-interacties te verliezen. Je kunt er meer over lezen op de Corona-website.
functie dragBody (event) gameUI.dragBody (event, maxForce = 20000, frequency = 10, moistureingRatio = 0.2, center = true) end
Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
functie gameListeners (actie) if (action == 'add') then player: addEventListener ('touch', dragBody) Runtime: addEventListener ('enterFrame', update) timerSrc = timer.performWithDelay (100, moveEnemy, 0) else speler: removeEventListener ('touch', dragBody) Runtime: removeEventListener ('enterFrame', update) timer.cancel (timerSrc) timerSrc = nil end end Een timer wordt gebruikt om de vijand te verplaatsen, dit zal een vertraging creëren waardoor de vijand het slaan op de puck mist.
functie moveEnemy (e) - Verplaats Vijand als (puck.y < display.contentHeight * 0.5) then transition.to(enemy, time = 300, x = puck.x) end end
De update-functie voert elk frame uit.
Dit deel van de code controleert of de puck het podium heeft verlaten door de ruimte waar geen muren zijn toegevoegd. Als dit waar is, wordt het juiste scoretekstveld vergroot.
function update () - Score if (puck.y> display.contentHeight) then enemyScore.text = tostring (tonumber (enemyScore.text) + 1) elseif (puck.y < -5) then playerScore.text = tostring(tonumber(playerScore.text) + 1) end
Deze lijnen stellen de puckpositie opnieuw in wanneer deze het podium verlaat en een doelluid afspelen.
-- Reset de positie van de puck als (puck.y> display.contentHighight of puck.y < -5) then puck.x = display.contentCenterX puck.y = display.contentCenterY puck.isAwake = false audio.play(bell) end
Hier voorkomen we dat de speler van het podium naar de vijand gaat.
-- Houd paddle aan de kant van de speler als (speler.y < display.contentWidth - 60) then player.y = display.contentWidth - 60 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, deze wordt automatisch toegevoegd door de Corona-compiler.
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!
