Share
Cosa starai creandoNella prima parte di questa serie, siamo riusciti a visualizzare la schermata iniziale e siamo stati in grado di passare a gamelevel schermo. In questo tutorial, continuiamo da dove siamo partiti e iniziamo ad implementare il gameplay.
Aperto gamelevel.lua, il file che abbiamo creato nel primo tutorial e aggiungiamo quanto segue sotto la riga local scene = storyboard.newScene ().
local playerSpeedY = 0 local playerSpeedX = 0 local playerMoveSpeed = 7 local playerWidth = 60 local playerHeight = 48 local bulletWidth = 8 local bulletHeight = 19 localHeight = 81 local islandWidth = 100 local numberofEnemysToGenerate = 0 local numberOfEnemysGenerated = 0 local playerBullets = - - Contiene tutti i proiettili che il giocatore spara ai nemici nemici locali = - Tieni i proiettili da "tutti" gli aerei nemici isole locali = - Contiene tutte le isole sul piano localeGriglia = - Contiene 0 o 1 (11 di loro per realizzare un sistema a griglia) enemyPlanes locali = - Contiene tutti gli aerei nemici local livesImages = - Contiene tutte le immagini di "vita libera" local numberOfLives = 3 local freeLifes = - Contiene tutto l'ingame live lives local playerIsInvincible = false local gameOver = false local numberOfTicks = 0 - Un numero che viene incrementato ogni frame del gioco local IslandGroup - Un gruppo per contenere tutte le isole planeGroup - Un gruppo che contiene tutti gli aerei, proiettili, ecc. locale p layer local planeSoundChannel - SoundChannel per il piano sound local firePlayerBulletTimer local generateIslandTimer local fireEnemyBulletsTimer local generateFreeLifeTimer local rectUp - Il controllo "up" sul rectDown locale DPAD - Il controllo "down" sul locale DPAD rectLeft - The "left" controllo sul locale DPAD rectRight - Il controllo "giusto" sul DPAD
Molti di questi sono auto-esplicativi, ma ho incluso commenti per chiarimenti. Da qui in poi, tutto il codice dovrebbe essere inserito sopra la linea scena di ritorno.
Accentsconagua
createScene Inizia aggiungendo il createScene funzione a main.lua. Il createScene la funzione viene chiamata quando la vista della scena non esiste ancora. Aggiungeremo gli oggetti di visualizzazione del gioco in questa funzione.
function scene: createScene (event) local group = self.view end scene: addEventListener ("createScene", scena)setupBackgroundfunction setupBackground () background locale = display.newRect (0, 0, display.contentWidth, display.contentHeight) background: setFillColor (0,0,1) scene.view: insert (background) end
Nel setupBackground, creiamo uno sfondo blu usando l'oggetto Display newRect metodo. Il SetFillColor metodo prende valori RGB, come percentuali. Invoca il setupBackground funzione in createScene come mostrato di seguito.
scena della funzione: createScene (evento) local group = self.view setupBackground () end
setupGroups Il setupGroups la funzione istanzia il islandGroup e planeGroup gruppi e li inserisce nella scena vista. GroupObject è un tipo speciale di oggetto di visualizzazione in cui è possibile aggiungere altri oggetti di visualizzazione. È importante aggiungere prima il islandGroup al vista per assicurarsi che le isole siano al di sotto degli aerei.
function setupGroups () islandGroup = display.newGroup () planeGroup = display.newGroup () scene.view: insert (islandGroup) scene.view: insert (planeGroup) end
Invoca il setupGroups funzione in createScene come mostrato di seguito.
scena delle funzioni: createScene (evento) local group = self.view setupBackground () setupGroups () end
setupDisplay Il setupDisplay funzione disegna un rettangolo nero nella parte inferiore dello schermo e inserisce DPAD e aereo immagini nel vista.
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) endAncora, richiamare questa funzione in createScene come mostrato di seguito.
function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () end
setupPlayer Il setupPlayer la funzione aggiunge semplicemente l'immagine del giocatore allo schermo. L'oggetto Display ha due proprietà di sola lettura, contentWidth e contentHeight, che rappresenta la larghezza e l'altezza originali del contenuto in pixel. Questi valori si impostano automaticamente sulla larghezza e l'altezza dello schermo, ma potrebbero avere altri valori se stai utilizzando il ridimensionamento del contenuto config.lua. Usiamo queste proprietà per allineare il giocatore nella scena.
function setupPlayer () player = display.newImage ("player.png", (display.contentWidth / 2) - (playerWidth / 2), (display.contentHeight - 70) -playerHeight) player.name = "Player" scene.view : inserire (giocatore) fine Invoca il setupPlayer funzione in createScene.
function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () end
setupLivesImages Il setupLivesImages la funzione imposta sei immagini di vita e le posiziona nella parte in alto a sinistra dello schermo. Inseriamo quindi queste immagini nel livesImages tabella, in modo da poterli consultare in seguito. Infine, ci assicuriamo che solo le prime tre immagini siano visibili.
function setupLivesImages () per i = 1, 6 do tempLifeImage = display.newImage ("life.png", 40 * i - 20, 10) table.insert (livesImages, tempLifeImage) scene.view: insert (tempLifeImage) if ( i> 3) then tempLifeImage.isVisible = false; fine fineIl setupLivesImages la funzione è anche invocata in createScene funzione.
function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () fine
setupDPad Il setupDPad la funzione imposta i quattro rettangoli rectUp, rectDown, rectLeft, e rectRight. Li posizioniamo attentamente sopra l'immagine del dpad, li configuriamo in modo da non essere visibili e ci assicuriamo che isHitTestable la proprietà è impostata su vero.
Se imposti gli oggetti di visualizzazione affinché non siano visibili, inizialmente non sarai in grado di interagire con loro. Tuttavia, impostando il isHitTestable proprietà a vero, questo comportamento è sovrascritto.
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
Hai indovinato. Questa funzione è anche invocata in createScene.
function scene: createScene (event) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () end
resetPlaneGrid Il resetPlaneGrid la funzione ripristina il planeGrid tabella e inserisce undici zeri. Il planeGrid la tabella imita undici punti lungo l'asse x, in cui è possibile posizionare un aereo nemico. Questo avrà più senso una volta che avremo iniziato a generare aerei nemici.
function resetPlaneGrid () planeGrid = per i = 1, 11 fa table.insert (planeGrid, 0) end end
Invoca questa funzione in createScene.
function scene: createScene (evento) local group = self.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () resetPlaneGrid () end
enterScene Ora che tutti gli oggetti di visualizzazione sono a posto, è ora di aggiungere listener di eventi, timer, ecc. Se si richiama dalla parte precedente di questo tutorial, il enterScene la funzione è un buon posto per sistemarli. Inizia inserendo il seguente frammento di codice.
scena delle funzioni: enterScene (evento) local group = self.view end scene: addEventListener ("enterScene", scena) Quando entriamo in questa scena, dobbiamo rimuovere la scena precedente. Aggiungi il seguente codice al enterScene funzione per fare questo.
local previousScene = storyboard.getPrevious () storyboard.removeScene (previousScene)Quando si inserisce una nuova scena, è possibile fare riferimento alla scena precedente in cui ci si trovava chiamando
getPrevious sul storyboard oggetto. Lo rimuoviamo completamente dallo storyboard chiamando removeScene sul storyboard oggetto.Aggiungi il seguente codice sotto il codice che hai inserito nel passaggio precedente. Questo snippet di codice aggiunge i listener di tocco a ciascuno dei rettangoli, invocando movePlane ad ogni tocco Diamo un'occhiata a questo movePlane funzione nel passaggio successivo.
rectUp: addEventListener ("touch", movePlane) rectDown: addEventListener ("touch", movePlane) rectLeft: addEventListener ("touch", movePlane) rectRight: addEventListener ("touch", movePlane)movePlane Il movePlane la funzione è responsabile per l'impostazione della velocità dei piani. Controlliamo se la fase dell'evento di tocco è uguale a iniziato, il che significa che il giocatore ha toccato il basso ma non ha sollevato il dito indietro. Se questo è vero, impostiamo la velocità e la direzione in base a quale rettangolo è stato toccato. Se la fase dell'evento tattile è uguale a conclusa, allora sappiamo che il giocatore ha alzato il dito, il che significa che impostiamo la velocità 0.
function movePlane (event) if 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
Aggiungiamo un po 'di suono al nostro gioco. Aggiungi il seguente snippet di codice al file enterScene funzione. Carica e suona planesound.mp3. Impostando il loop proprietà a -1, il suono si interromperà per sempre. Se vuoi saperne di più sull'audio in Corona, assicurati di controllare la documentazione.
local planeSound = audio.loadStream ("planesound.mp3") planeSoundChannel = audio.play (planeSound, loops = -1)enterFrame EventoAggiungiamo anche un listener di eventi runtime chiamato enterFrame che chiamerà ilgameLoop funzione. La frequenza con cui il enterFrame l'evento si verifica a seconda del valore di frame per secondo (FPS) impostato dall'utente config.lua. Nel nostro esempio, verrà chiamato 30 volte al secondo. Aggiungi questo listener di eventi nel file enterScene funzione.
Runtime: addEventListener ("enterFrame", gameLoop)gameLoop Nel gameLoop funzione aggiorniamo le posizioni degli sprite ed eseguiamo ogni altra logica che deve aver luogo ogni fotogramma. Se sei interessato a leggere di più sull'argomento dei loop di gioco, Michael James Williams ha scritto un grande articolo che spiega come funziona un loop di gioco comune. Aggiungi il seguente snippet di codice.
function gameLoop () movePlayer () fine
moveplayer Il moveplayer la funzione gestisce lo spostamento del piano del giocatore. Spostiamo l'aereo secondo il playerSpeedX e playerSpeedY valori, che sarà o 7 o 0, a seconda che il giocatore stia toccando il DPad o meno. Rivolgiti al movePlane funzione se questo non è chiaro. Effettuiamo anche alcuni controlli, assicurandoci che l'aereo non possa spostarsi fuori dallo schermo.
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) quindi player.x = display.contentWidth - playerWidth end if (player.y < 0) then player.y = 0 end if(player.y > display.contentHeight - 70- playerHeight quindi player.y = display.contentHeight - 70 - playerHeight end end
Se stai testando il gioco ora, dovresti essere in grado di navigare l'aereo sullo schermo usando il DPad.
Questo chiude il secondo tutorial di questa serie. Nella prossima puntata di questa serie, continueremo con il gameplay. Grazie per aver letto e ci vediamo lì.
