Creëer een Retro Racing Game - Interactie toevoegen

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!


Ook verkrijgbaar in deze serie:

  1. Maak een Retro Racing Game - Interface Creation
  2. Creëer een Retro Racing 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 playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: 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) 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

Stap 3: Verberg tegoeden

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

Stap 4: de gameweergave weergeven

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)

Stap 5: Plaats de spelachtergrond

Deze code plaatst de achtergrondafbeelding van het spel in het werkgebied.

 -- Game Achtergrond display.remove (bg) gameBg = display.newImage ('gameBg.png')

Stap 6: voeg de auto toe

Vervolgens voegen we de afbeelding Auto toe en plaatsen deze in het midden van het werkgebied.

 -- Auto auto = display.newImage ('car.png', 90, 412)

Stap 7: Maak de snelweg

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 ()

Stap 8: Tekstvelden toevoegen

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)

Stap 9: Maak de spelbesturing

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'

Stap 10: Car Physics

Nu voegen we de auto toe aan de physics engine, op deze manier kunnen we botsingen melden.

 -- Fysica fysica.addBody (auto, 'dynamisch') gameListeners ('toevoegen')

Stap 11: Game Luisteraars

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

Stap 12: Autoverkeer

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

Stap 13: Obstakel toevoegen

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

Stap 14: Verplaats de snelweg

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

Stap 15: Verplaats obstakels

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

Stap 16: Voltooiing van het niveau

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

Stap 17: Een melding toevoegen

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

Stap 18: Roep de hoofdfunctie op

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

 Hoofd()

Stap 19: een laadscherm toevoegen

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.


Stap 20: voeg een pictogram toe

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.


Stap 21: Testen in de 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 22: Bouw

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 aangepaste versie van het spel te maken!

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