Maak een vliegtuiggevecht in Corona gameplay

Wat je gaat creëren

Invoering

In het eerste deel van deze serie slaagden we erin het startscherm te laten zien en konden we overstappen naar de gamelevel scherm. In deze tutorial gaan we verder waar we gebleven zijn en beginnen we met het implementeren van de gameplay.

1. Lokale variabelen

Open gamelevel.lua, het bestand dat we in de eerste zelfstudie hebben gemaakt en voeg het volgende toe onder de regel lokale scène = storyboard.newScene ().

lokale spelerSpeedY = 0 lokale spelerSpeedX = 0 lokale spelerMoveSpeed ​​= 7 lokale spelerWidth = 60 lokale spelerHeight = 48 lokale bulletWidth = 8 lokale bulletHeight = 19 lokale islandHeight = 81 lokale islandWidth = 100 local numberofEnemysToGenerate = 0 local numberOfEnemysGenerated = 0 local playerBullets =  - - Bevat alle kogels die de speler lokale vijand afvuurtBullets =  - Houd de kogels tegen "alle" vijandelijke vlakken lokale eilanden =  - Houdt alle eilanden vast local planeGrid =  - Houdt 0 of 1 (11 van hen voor het maken van een grid-systeem) local enemyPlanes =  - Bevat alle vijandelijke vliegtuigen local livesImages =  - Bevat alle "free life" -afbeeldingen local numberOfLives = 3 local freeLifes =  - Bevat alle ingame free lives local playerIsInvincible = false local gameOver = false local numberOfTicks = 0 - Een getal dat elk frame van het spel wordt opgehoogd local islandGroup - Een groep die alle eilanden op lokaal vlak beheertGroup - Een groep die alle vliegtuigen bevat, kogels, enz. lokale p layer local planeSoundChannel - SoundChannel voor het vliegtuiggeluid lokale firePlayerBulletTimer local generateIslandTimer local fireEnemyBulletsTimer local generateFreeLifeTimer local rectUp - De "up" -besturing op de lokale DPDD - De "down" -besturing op de DPAD local rectLeft - De "left" controle op de lokale rectRight van DPAD - de "juiste" bediening op de DPAD

De meeste hiervan spreken voor zich, maar ik heb opmerkingen toegevoegd ter verduidelijking. Vanaf nu moet alle code boven de regel worden ingevoegd terugkeer scène.

2. createScene

Begin met het toevoegen van de createScene functie naar main.lua. De createScene functie wordt aangeroepen als de scène nog niet bestaat. We voegen de weergaveobjecten van de game toe aan deze functie.

function scene: createScene (event) local group = self.view end scene: addEventListener ("createScene", scène)

3. stelachtergrondin

functie setupBackground () local background = display.newRect (0, 0, display.contentWidth, display.contentHeight) background: setFillColor (0,0,1) scene.view: insert (achtergrond) end

In stelachtergrondin, we maken een blauwe achtergrond met behulp van het object Weergeven newRect methode. De SetFillColor methode neemt RGB-waarden als percentages. Roep de stelachtergrondin functie in createScene zoals hieronder getoond.

functiescène: createScene (event) local group = self.view setupBackground () einde

4. setupGroups

De setupGroups functie maakt de eilandengroep en planeGroup groepen en voegt ze in de scènes uitzicht. Het GroupObject is een speciaal type weergaveobject waaraan u andere weergaveobjecten kunt toevoegen. Het is belangrijk om eerst de. Toe te voegen eilandengroep naar de uitzicht om ervoor te zorgen dat de eilanden zich onder de vliegtuigen bevinden.

function setupGroups () islandGroup = display.newGroup () planeGroup = display.newGroup () scene.view: insert (islandGroup) scene.view: insert (planeGroup) einde

Roep de setupGroups functie in createScene zoals hieronder getoond.

functiescène: createScene (event) local group = self.view setupBackground () setupGroups () end

5. setupDisplay

De setupDisplay functie tekent een zwarte rechthoek onderaan het scherm en voegt in DPAD en vlak afbeeldingen in de uitzicht.

function setupDisplay () local tempRect = display.newRect (0, display.contentHeight-70, display.contentWidth, 124); tempRect: SetFillColor (0,0,0); scene.view: insert (tempRect) local logo = display.newImage ("logo.png", display.contentWidth-139, display.contentHeight-70); scene.view: insert (logo) local dpad = display.newImage ("dpad.png", 10, display.contentHeight - 70) scene.view: insert (dpad) einde

Nogmaals, roep deze functie in createScene zoals hieronder getoond.

function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () einde

6. setupPlayer

De setupPlayer functie voegt gewoon de speler afbeelding toe aan het scherm. Het Display-object heeft twee alleen-lezen eigenschappen, contentWidth en contentHeight, de originele breedte en hoogte van de inhoud in pixels weergeven. Deze waarden worden standaard ingesteld op de schermbreedte en hoogte, maar kunnen andere waarden hebben als u inhoudschalen gebruikt config.lua. We gebruiken deze eigenschappen om de speler in de scène uit te lijnen.

function setupPlayer () player = display.newImage ("player.png", (display.contentWidth / 2) - (playerWidth / 2), (display.contentHeight - 70) -playerHeight) player.name = "Speler" scene.view : insert (speler) einde

Roep de setupPlayer functie in createScene.

function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () einde

7. setupLivesImages

De setupLivesImages functie stelt zes levensbeelden in en plaatst ze links bovenaan het scherm. Vervolgens voegen we deze afbeeldingen in de livesImages tabel, zodat we ze later kunnen raadplegen. Ten slotte zorgen we ervoor dat alleen de eerste drie afbeeldingen zichtbaar zijn.

function setupLivesImages () voor i = 1, 6 do local tempLifeImage = display.newImage ("life.png", 40 * i - 20, 10) table.insert (livesImages, tempLifeImage) scene.view: insert (tempLifeImage) if ( i> 3) then tempLifeImage.isVisible = false; einde einde

De setupLivesImages functie wordt ook aangeroepen in de createScene functie.

function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () einde

8. setupDPad

De setupDPad functie stelt de vier rechthoeken in rectUp, rectDown, rectLeft, en rectRight. We plaatsen ze voorzichtig bovenop de dpad-afbeelding, configureren ze om niet zichtbaar te zijn en zorgen ervoor dat de isHitTestable eigenschap is ingesteld op waar.

Als u ervoor zorgt dat weergaveobjecten niet zichtbaar zijn, kunt u ze in eerste instantie niet gebruiken. Echter, door het instellen van isHitTestable eigendom aan waar, dit gedrag is onderdrukt.

function setupDPad () rectUp = display.newRect (34, display.contentHeight-70, 23, 23) rectUp: setFillColor (1,0,0) rectUp.id = "up" rectUp.isVisible = false; rectUp.isHitTestable = true; scene.view: insert (rectUp) rectDown = display.newRect (34, display.contentHeight-23, 23,23) rectDown: setFillColor (1,0,0) rectDown.id = "down" rectDown.isVisible = false; rectDown.isHitTestable = true; scene.view: insert (rectDown) rectLeft = display.newRect (10, display.contentHeight-47,23, 23) rectLeft: setFillColor (1,0,0) rectLeft.id = "left" rectLeft.isVisible = false; rectLeft.isHitTestable = true; scene.view: insert (rectLeft) rectRight = display.newRect (58, display.contentHeight-47, 23,23) rectRight: setFillColor (1,0,0) rectRight.id = "right" rectRight.isVisible = false; rectRight.isHitTestable = true; scene.view: insert (rectRight) end

Je hebt het al geraden. Deze functie wordt ook gebruikt in createScene.

function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () einde

9. resetPlaneGrid

De resetPlaneGrid function reset de planeGrid tafel en voegt elf nullen in. De planeGrid tabel imiteert elf punten over de x-as, waarin een vijandelijk vlak kan worden gepositioneerd. Dit wordt logischer als we beginnen met het genereren van vijandelijke vliegtuigen.

functie resetPlaneGrid () planeGrid =  voor i = 1, 11 do table.insert (planeGrid, 0) end end

Roep deze functie aan binnen createScene.

function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () resetPlaneGrid () einde

10. enterScene

Nu alle weergaveobjecten op hun plaats zijn, is het tijd om gebeurtenislisteners, timers, enz. Toe te voegen. Als u zich herinnert uit het vorige deel van deze tutorial, enterScene functie is een goede plaats om deze in te stellen. Begin met het invoegen van het volgende codefragment.

function scene: enterScene (event) local group = self.view end scene: addEventListener ("enterScene", scène) 

11. Het vorige storyboard verwijderen

Wanneer we deze scène binnengaan, moeten we de vorige scène verwijderen. Voeg de volgende code toe aan de enterScene functie om dit te doen.

local previousScene = storyboard.getPrevious () storyboard.removeScene (vorigeScene)
Wanneer u een nieuwe scène invoert, kan naar de vorige scène worden verwezen door te bellen getPrevious op de storyboard voorwerp. We verwijderen het volledig van het storyboard door te bellen removeScene op de storyboard voorwerp.

12. Voeg Event Listeners toe aan Dpad Rectangles

Voeg de volgende code toe onder de code die u in de vorige stap hebt ingevoerd. Dit codefragment voegt touch listeners toe aan elk van de rechthoeken, aanroepend movePlane bij elke aanraking. Laten we dit eens bekijken movePlane functie in de volgende stap.

rectUp: addEventListener ("touch", movePlane) rectDown: addEventListener ("touch", movePlane) rectLeft: addEventListener ("touch", movePlane) rectRight: addEventListener ("touch", movePlane)

13. movePlane

De movePlane functie is verantwoordelijk voor het instellen van de vliegtuigsnelheid. We controleren of de fase van de aanraakgebeurtenis gelijk is aan begon, wat betekent dat de speler heeft aangeraakt maar zijn vinger niet heeft opgetild. Als dit waar is, stellen we de snelheid en richting in op basis van welke rechthoek werd aangeraakt. Als de fase van de aanraakgebeurtenis gelijk is aan beëindigde, dan weten we dat de speler zijn vinger heeft opgetild, wat betekent dat we de snelheid hebben ingesteld 0.

functie movePlane (event) als event.phase == "started" then if (event.target.id == "up") then playerSpeedY = -playerMoveSpeed ​​end if (event.target.id == "down") then playerSpeedY = playerMoveSpeed ​​end if (event.target.id == "left") then playerSpeedX = -playerMoveSpeed ​​end if (event.target.id == "right") then playerSpeedX = playerMoveSpeed ​​end elseif event.phase == "ended" then playerSpeedX = 0 playerSpeedY = 0 end end

14. PlaneSound

Laten we wat geluid aan onze game toevoegen. Voeg het volgende codefragment toe aan de enterScene functie. Het laadt en speelt planesound.mp3. Door de loops eigendom aan -1, het geluid loopt voor altijd door. Als je meer wilt weten over audio in Corona, lees dan de documentatie.

local planeSound = audio.loadStream ("planeesound.mp3") planeSoundChannel = audio.play (planeSound, loops = -1)

15. enterFrame Evenement

We voegen ook een runtime-evenementlistener toe, genaamd enterFrame dat zal degameLoop functie. De frequentie waarmee de enterFrame gebeurtenis hangt af van de frames per seconde (FPS) waarde die u instelt config.lua. In ons voorbeeld wordt dit 30 keer per seconde genoemd. Voeg deze gebeurtenislistener toe in de enterScene functie.

 Runtime: addEventListener ("enterFrame", gameLoop)

16. gameLoop

In de gameLoop functie we werken de spriteposities bij en voeren andere logica uit die elk frame moet plaatsvinden. Als je meer wilt lezen over het onderwerp spellussen, schreef Michael James Williams een geweldig artikel waarin wordt uitgelegd hoe een gemeenschappelijke gamelus werkt. Voeg het volgende codefragment toe.


functie gameLoop () movePlayer () einde

17. beweeg speler

De beweeg speler functie beheert het verplaatsen van het vliegtuig van de speler. We verplaatsen het vliegtuig volgens de playerSpeedX en playerSpeedY waarden, die ofwel zijn 7 of 0, afhankelijk van of de speler de DPad aanraakt of niet. Raadpleeg de movePlane functie als dit onduidelijk is. We doen ook controles op bepaalde grenzen en zorgen ervoor dat het vliegtuig niet van het scherm kan bewegen.

function movePlayer () player.x = player.x + playerSpeedX player.y = player.y + playerSpeedY if (player.x < 0) then player.x = 0 end if(player.x > display.contentWidth - playerWidth) en player.x = display.contentWidth - playerWidth end if (speler.y < 0) then player.y = 0 end if(player.y > display.contentHeight - 70- playerHeight) en player.y = display.contentHeight - 70 - playerHeight end end 

Als je het spel nu test, moet je via de DPad door het vliegtuig kunnen navigeren.

Conclusie

Hiermee komt de tweede zelfstudie van deze serie tot een einde. In de volgende aflevering van deze serie gaan we verder met het spelen van de game. Bedankt voor het lezen en zie je daar.