Dit is de tweede aflevering in onze Corona SDK Retro Racing spel-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.
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 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 paar 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 achtergrondafbeelding van het spel in het werkgebied.
-- Game Achtergrond display.remove (bg) gameBg = display.newImage ('gameBg.png')
Vervolgens voegen we de afbeelding Auto toe en plaatsen deze in het midden van het werkgebied.
-- Auto auto = display.newImage ('car.png', 90, 412)
Dit deel maakt de Highway-lijnen, deze afbeelding wordt twee keer toegevoegd om een lus te maken. Eén is zichtbaar op het scherm terwijl de andere wacht in het bovenste gedeelte van het werkgebied.
-- Snelweg lines1 = display.newImage ('lines.png', 0, -18) lines2 = display.newImage ('lines.png', 0, -558) lines1: setReferencePoint (display.TopLeftReferencePoint) lines2: setReferencePoint (display.TopLeftReferencePoint ) obstakels = display.newGroup ()
Nu plaatsen we drie tekstvelden om de score, het niveau en de snelheid weer te geven.
-- TextFields score = display.newText ('0', 272, 38, native.systemFont, 17) score: setTextColor (0) level = display.newText ('1', 272, 108, native.systemFont, 17) niveau: setTextColor (0) speed = display.newText ('1', 272, 178, native.systemFont, 17) snelheid: setTextColor (0)
Twee knoppen zijn toegevoegd om te gebruiken als bedieningselementen voor de auto: links en rechts.
-- Direction Buttons leftBtn = display.newImage ('button.png', -2, 420) leftBtn.name = 'l' rightBtn = display.newImage ('button.png', 260, 420) rightBtn.name = 'r'
Nu voegen we de auto toe aan de physics engine, op deze manier kunnen we botsingen melden.
-- Fysica fysica.addBody (auto, 'dynamisch') gameListeners ('toevoegen')
Deze functie voegt de nodige luisteraars toe om de spellogica te starten.
Dit is een belangrijk onderdeel als u de game probeert aan te passen. De moveTimer regelt de snelheid van het spel. Standaard is dit 100 milliseconden voor niveau 1, dus niveau 2 kan 200 zijn enzovoort.
De duur van het spel is gebaseerd op het aantal obstakels dat op het niveau wordt gepresenteerd; dit wordt gedefinieerd door de oTimer. Wijzig de 15 waarde om kortere of grotere niveaus te creëren.
functie gameListeners (actie) if (action == 'add') then leftBtn: addEventListener ('tap', moveCar) rightBtn: addEventListener ('tap', moveCar) moveTimer = timer.performWithDelay (100, update, 0) - niveau snelheid oTimer = timer.performWithDelay (1400, addObstacle, 15) - level length auto: addEventListener ('collision', onCollision) else leftBtn: removeEventListener ('tap', moveCar) rightBtn: removeEventListener ('tap', moveCar) timer. cancel (moveTimer) moveTimer = nil timer.cancel (oTimer) oTimer = nil car: removeEventListener ('collision', onCollision) end end
Deze functie bestuurt de auto. Het test de ingedrukte knop en verplaatst de auto naar de gekozen positie, indien beschikbaar.
functie moveCar (e) if (e.target.name == 'l' en car.x ~ = 62) en vervolgens car.x = car.x - 54 elseif (e.target.name == 'r' en auto. x ~ = 170) en vervolgens car.x = car.x + 54 einde
Obstakels worden toegevoegd door een timer op basis van een willekeurig berekende positie die links, midden of rechts kan zijn. Deze functie vormt een obstakel, geeft het fysica en wordt vervolgens toegevoegd aan a Groep om het verplaatsen en verwijderen ervan gemakkelijker te maken.
functie addObstacle (e) local rx = positionsTable [math.floor (math.random () * 3) + 1] local o = display.newImage ('obstacle.png', rx, -52) physics.addBody (o, ' static ') o.isSensor = echte obstakels: invoegen (o) started = true end
De updatefunctie wordt uitgevoerd door een timer om het steen-voor-steen-effect te creëren. De volgende code doorloopt de autosnelwegen.
functie-update (e) - Verplaats Highway-lijnen1.y = lines1.y + 16 lines2.y = lines2.y + 16 - Reset snelwegpositie als (lines1.y> = 522) en lines1.y = -558 elseif ( lines2.y> = 522) gevolgd door lines2.y = -558
Deze lijnen verplaatsen de obstakels en verwijderen degene die niet meer zichtbaar zijn. De score neemt toe telkens wanneer de auto een obstakel raakt.
voor i = 1, obstakels.num Kinderen doen - Verplaats obstakels als (obstakels [i] ~ = nihil) dan obstakels [i] .y = obstakels [i] .y + 16 einde - Verwijder obstakels op de weg als (obstakels [i ] ~ = nul en obstakels [i] .y> = display.contentHeight + 26) then display.remove (obstakels [i]) score.text = tostring (tonumber (score.text) + 50) end end
Hier controleren we of alle gedefinieerde obstakels al uit het stadium zijn en bel a winnen waarschuwen als het waar is.
-- Controleer of het niveau voltooid is (begin en obstakels.numChildren == 0) en waarschuw vervolgens () einde
De botsing-functie controleert of de auto wordt geraakt door een obstakel en roept een verliezen waarschuwen als het waar is.
function onCollision (e) alert ('lose') end function alert (msg) gameListeners ('rmv') if (msg == 'lose') then alert = display.newImage ('alert.png', 52, 229.5) anders alert = display.newImage ('complete.png', 18, 229.5) end transition.from (alert, time = 300, xScale = 0.5, yScale = 0.5) physics.stop () einde
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 meteen wordt weergegeven wanneer u de toepassing start terwijl iOS de basisgegevens laadt om het hoofdscherm weer te geven. Voeg deze afbeelding toe aan uw projectbronmap.
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 retina-versie is 114x114px en de iTunes Store 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 vond het nuttig. Bedankt voor het lezen!