Share
Ce que vous allez créerDans la première partie de cette série, nous avons réussi à afficher l’écran de démarrage et à effectuer la transition vers le gamelevel écran. Dans ce tutoriel, nous continuons là où nous sommes restés et commençons à implémenter le gameplay.
Ouvrir gamelevel.lua, le fichier que nous avons créé dans le premier tutoriel, et ajoutez ce qui suit sous la ligne scène locale = storyboard.newScene ().
local playerSpeedY = 0 local playerSpeedX = 0 local playerMoveSpeed = 7 local playerWidth = 60 localHighight = 48 local bulletWidth = 8 localHautight = 19 localHauteur = 81 localWidth = 100 localofEnemysToGenerate = 0 localHautHighight = 81 localHauteur = 81 localHauteur = 81 localHauteur = 81 localHauteur = 81 - Détient toutes les balles tirées par le joueur. Ennemi localBullets = - Contient les balles de "tous" les avions ennemis. Îles locales = - Contient toutes les îles planeGrid = - Détient 0 ou 1 (11 d'entre elles LocalNetwork = - Contient tous les avions ennemis. vies localesImages = - Contient toutes les images de "vie libre". numberOfLives local = 3 freeLifes local = - Contient tous les ingame. free lives local playerIsInvincible = false local gameOver = false local numberOfTicks = 0 - Nombre incrémenté de chaque image du jeu local islandGroup - Un groupe contenant toutes les îles locales planeGroup - Un groupe contenant tous les avions, balles, etc local p layer local planeSoundChannel - SoundChannel pour le son de plan local firePlayerBulletTimer local generateIslandTimer local fireEnemyBulletsTimer local generateFreeLifeTimer local rectUp - Le contrôle "up" sur le DPAD local rectDown - Le contrôle "down" sur le DPAD local RectLeft - Le "gauche" rectLown contrôle sur le DPAD local rectRight - Le "droit" contrôle sur le DPAD
La plupart d'entre elles s'expliquent d'elles-mêmes, mais j'ai inclus des commentaires pour clarification. A partir de là, tout le code devrait être inséré au-dessus de la ligne scène de retour.
Accentsconagua
createScene Commencez par ajouter le createScene fonction à main.lua. le createScene La fonction est appelée lorsque la vue de la scène n'existe pas encore. Nous allons ajouter les objets d'affichage du jeu dans cette fonction.
scène de fonction: createScene (événement) groupe local = self.view scène de fin: addEventListener ("createScene", scène)configurationArrière-planfonction setupBackground () local background = display.newRect (0, 0, display.contentWidth, display.contentHeight) background: setFillColor (0,0,1) scene.view: insert (background) end
Dans configurationArrière-plan, nous créons un fond bleu en utilisant l'objet Display nouveauRect méthode. le setFillColor méthode prend les valeurs RVB, en pourcentage. Invoquer le configurationArrière-plan fonctionner dans createScene comme indiqué ci-dessous.
scène de fonction: createScene (événement) groupe local = self.view setupBackground () end
setupGroups le setupGroups la fonction instancie la islandGroup et planeGroup groupes, et les insère dans la scène vue. GroupObject est un type d'objet d'affichage spécial dans lequel vous pouvez ajouter d'autres objets d'affichage. Il est important d'ajouter d'abord le islandGroup au vue pour s'assurer que les îles sont en dessous des avions.
function setupGroups () islandGroup = display.newGroup () planeGroup = display.newGroup () scene.view: insert (islandGroup) scene.view: insert (planeGroup) fin
Invoquer le setupGroups fonctionner dans createScene comme indiqué ci-dessous.
scène de fonction: createScene (événement) groupe local = auto.view setupBackground () setupGroups () end
setupDisplay le setupDisplay fonction dessine un rectangle noir au bas de l'écran et insère dpad et avion images dans le vue.
function setupDisplay () local tempRect = display.newRect (0, display.contentHeight-70, display.contentWidth, 124); tempRect: setFillColor (0,0,0); scene.view: insert (tempRect) logo local = display.newImage ("logo.png", display.contentWidth-139, display.contentHeight-70); scene.view: insérer (logo) dpad local = display.newImage ("dpad.png", 10, display.contentHeight - 70) scene.view: insérer (dpad) endEncore une fois, appelez cette fonction dans createScene comme indiqué ci-dessous.
scène de fonction: createScene (événement) groupe local = auto.view setupBackground () setupGroups () setupDisplay () end
setupPlayer le setupPlayer Cette fonction ajoute simplement l'image du joueur à l'écran. L'objet Display est livré avec deux propriétés en lecture seule, contentWidth et contentHeight, représentant la largeur et la hauteur d'origine du contenu en pixels. Ces valeurs correspondent par défaut à la largeur et à la hauteur de l'écran, mais peuvent avoir d'autres valeurs si vous utilisez la mise à l'échelle du contenu dans config.lua. Nous utilisons ces propriétés pour aligner le lecteur dans la scène.
function setupPlayer () player = display.newImage ("player.png", (display.contentWidth / 2) - (playerWidth / 2), (display.contentHeight - 70) -playerHeight) player.name = "Player" scene.view : insérer fin (joueur) Invoquer le setupPlayer fonctionner dans createScene.
scène de fonction: createScene (événement) groupe local = auto.view setupBackground () setupGroups () setupDisplay () setupPlayer () end
setupLivesImages le setupLivesImages Cette fonction configure six images de la vie et les place en haut à gauche de l’écran. Nous insérons ensuite ces images dans le livesImages table, afin que nous puissions les référencer plus tard. Enfin, nous nous assurons que seules les trois premières images sont visibles..
function setupLivesImages () pour i = 1, 6 faire local tempLifeImage = display.newImage ("life.png", 40 * i - 20, 10) table.insert (livesImages, tempLifeImage) scene.view: insérer (tempLifeImage) si ( i> 3) puis tempLifeImage.isVisible = false; fin fin finle setupLivesImages fonction est également appelée dans le createScene une fonction.
scène de fonction: createScene (événement) groupe local = auto.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () end
setupDPad le setupDPad fonction met en place les quatre rectangles rectUp, rectDown, rectLeft, et rectRight. Nous les positionnons soigneusement sur l’image de dpad, les configurons pour qu’elles ne soient pas visibles et nous nous assurons que le isHitTestable la propriété est définie sur vrai.
Si vous définissez les objets d'affichage pour qu'ils ne soient pas visibles, vous ne pourrez initialement pas interagir avec eux. Cependant, en fixant la isHitTestable propriété à vrai, ce comportement est annulé.
fonction 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
Vous l'avez deviné. Cette fonction est également appelée dans createScene.
scène de fonction: createScene (événement) groupe local = auto.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () end
réinitialiserPlaneGrid le réinitialiserPlaneGrid la fonction réinitialise le planeGrid table et insère onze zéros. le planeGrid Le tableau imite onze points sur l’axe des x dans lesquels un avion ennemi peut être positionné. Cela aura plus de sens une fois que nous commencerons à générer des avions ennemis.
function resetPlaneGrid () planeGrid = pour i = 1, 11 fait table.insert (planeGrid, 0) end end
Invoquer cette fonction dans createScene.
scène de fonction: createScene (événement) groupe local = auto.view setupBackground () setupGroups () setupDisplay () setupPlayer () setupLivesImages () setupDPad () resetPlaneGrid () end
enterScene Maintenant que tous les objets d’affichage sont en place, il est temps d’ajouter des écouteurs d’événements, des minuteries, etc. Si vous vous souvenez de la partie précédente de ce tutoriel, enterScene la fonction est un bon endroit pour les configurer. Commencez par insérer l'extrait de code suivant..
scène de fonction: enterScene (événement) groupe local = auto.view scène de fin: addEventListener ("enterScene", scène) Lorsque nous entrons dans cette scène, nous devons supprimer la scène précédente. Ajoutez le code suivant au enterScene fonction pour le faire.
local précédentScene = storyboard.getPrevious () storyboard.removeScene (previousScene)Lorsque vous entrez dans une nouvelle scène, la scène précédente sur laquelle vous étiez peut être référencée en appelant
obtenirPrevious sur le story-board objet. Nous le retirons complètement du storyboard en appelant enleverScène sur le story-board objet.Ajoutez le code suivant sous le code que vous avez entré à l'étape précédente. Cet extrait de code ajoute des écouteurs tactiles à chacun des rectangles, invoquant movePlane à chaque contact. Jetons un coup d'oeil à ceci movePlane fonctionner à l'étape suivante.
rectUp: addEventListener ("touch", movePlane) rectDown: addEventListener ("touch", movePlane) rectLeft: addEventListener ("touch", movePlane) rectRight: addEventListener ("touch", movePlane)movePlane le movePlane La fonction est responsable du réglage de la vitesse des avions. Nous vérifions si la phase de l'événement tactile est égale à a commencé, ce qui signifie que le joueur a touché le sol, mais pas levé son doigt. Si cela est vrai, nous définissons la vitesse et la direction en fonction du rectangle touché. Si la phase de l'événement tactile est égale à terminé, alors nous savons que le joueur a levé son doigt, ce qui signifie que nous réglons la vitesse à 0.
function movePlane (event) si event.phase == "commencé" puis si (event.target.id == "up"), alors playerSpeedY = -playerMoveSpeed se termine si (event.target.id == "down"), alors playerSpeedY = playerMoveSpeed end if (event.target.id == "left"), puis playerSpeedX = -playerMoveSpeed end if (event.target.id == "right"), puis playerSpeedX = playerMoveSpeed end elseif event.phase == "terminé", alors playerSpeedX = 0 playerSpeedY = 0 end end
Ajoutons du son à notre jeu. Ajoutez l'extrait de code suivant au enterScene une fonction. Il charge et joue planesound.mp3. En mettant le boucles propriété à -1, le son restera en boucle pour toujours. Si vous souhaitez en savoir plus sur l’audio dans Corona, n’oubliez pas de consulter la documentation..
local planeSound = audio.loadStream ("planesound.mp3") planeSoundChannel = audio.play (planeSound, boucles = -1)enterFrame un événementNous ajoutons également un écouteur d'événement d'exécution nommé enterFrame qui appellera legameLoop une fonction. La fréquence à laquelle le enterFrame l’événement dépend de la valeur en images par seconde (FPS) définie dans config.lua. Dans notre exemple, il sera appelé 30 fois par seconde. Ajouter cet écouteur d'événement dans le enterScene une fonction.
Durée: addEventListener ("enterFrame", gameLoop)gameLoop dans le gameLoop Nous mettons à jour les positions des images-objets et effectuons toute autre logique nécessaire à chaque image. Si vous souhaitez en savoir plus sur le thème des boucles de jeu, Michael James Williams a écrit un excellent article qui explique le fonctionnement d’une boucle de jeu courante. Ajouter l'extrait de code suivant.
fonction gameLoop () movePlayer () end
Déplacer le joueur le Déplacer le joueur fonction gère le déplacement de l'avion du joueur. Nous déplaçons l'avion en fonction de la playerSpeedX et playerSpeedY valeurs, qui seront soit 7 ou 0, selon que le lecteur touche le DPad ou non. Renvoyer à la movePlane fonction si ce n'est pas clair. Nous vérifions également certaines limites, en nous assurant que l'avion ne peut pas sortir de l'écran..
fonction 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) puis player.x = display.contentWidth - playerWidth end if (player.y) < 0) then player.y = 0 end if(player.y > display.contentHeight - 70- playerHeight), puis player.y = display.contentHeight - 70 - playerHeight end end
Si vous testez le jeu maintenant, vous devriez pouvoir naviguer dans l’avion à l’aide du DPad..
Ceci met fin au deuxième tutoriel de cette série. Dans le prochain épisode de cette série, nous poursuivrons le gameplay. Merci de m'avoir lu et à bientôt.
