Construire un jeu Endless Runner à partir de zéro le menu du jeu

Bienvenue dans le dernier volet de la série Endless Runner. Dans le didacticiel d’aujourd’hui, vous apprendrez à créer un menu de jeu à l’aide de la classe Directeur. Commençons!

Félicitations pour venir si loin dans la série! La course a été longue, mais nous avons maintenant un jeu entièrement fonctionnel et, espérons-le, une compréhension de base de la manière d’ajouter vos propres composants pour développer tout. L’étape que nous allons faire maintenant consiste à placer notre petit niveau dans un système de menus de manière à donner l’impression d’un jeu complet.. 

Pour ce faire, nous allons utiliser la classe de direction, qui est une petite bibliothèque incroyablement bien conçue de Ricardo Rauber qui effectuera tout le travail à votre place. Une fois que vous verrez à quel point il est si facile de le faire, vous pourrez le mettre en œuvre rapidement dans tout projet..

La première chose que vous devez faire est d'aller ici et télécharger la dernière version de la classe. Lorsque vous le téléchargez, il vous donnera beaucoup de fichiers. Il comprend bien plus que la classe de direction, avec des exemples, des modèles et des fonctions supplémentaires qui peuvent vous rendre la vie plus facile. N'hésitez donc pas à consulter toutes les informations qu'elle propose. Si vous ne voulez pas tous les petits extras amusants fournis, vous pouvez simplement télécharger les fichiers de ce tutoriel et les récupérer à partir de là..

Maintenant que nous avons le fichier director.lua, placez-le dans le même dossier que votre main.lua. En parlant de votre fichier main.lua, allez-y et renommez-le. Peu importe ce que vous changez pour parce que nous allons finir par le supprimer de toute façon. Cela fait, vous allez créer trois nouveaux fichiers dans ce dossier. Appelez-les main.lua, menu.lua et game.lua. La façon dont cela fonctionnera est que main.lua sera appelé pour commencer le jeu. Cela constituera la base de notre programme, tandis que menu.lua et game.lua agiront en tant que composants (displayGroups) qui sont affichés dans un displayGroup à l'intérieur de main.lua lui-même, de la même manière tous les différents Les groupes d’affichages de notre jeu sont tous conservés et affichés depuis l’écran displayGroup dans notre jeu actuel..

Commençons donc par configurer notre nouveau fichier main.lua. Ouvrez-le et ajoutez ce code ici:

 display.setStatusBar (display.HiddenStatusBar) - en disant à Corona de demander à "directeur", nous - le dit d'inclure tout dans ce fichier, - nous permettant d'accéder facilement à ses fonctions. C’est aussi comment vous incluez les fonctions ou les "classes" que vous avez créées dans des fichiers externes. local director = require ("director") local mainGroup = display.newGroup () local main = function () - crée une vue que nous utiliserons pour charger - les autres scènes, de manière à ce que notre jeu progresse - de manière technique. nous restons dans le fichier main.lua - et nous y ajoutons simplement de nouvelles vues ou scènes mainGroup: insert (director.directorView) - nous demandons au réalisateur de charger la première scène qui - sera le directeur du menu: changeScene ("menu") end - assurez-vous d'appeler réellement la fonction main main ()

Alors c'est ça! Enlevez les commentaires et vous verrez qu'il ne faut qu'environ 5 lignes pour que la classe de réalisateur soit opérationnelle. Comme il est dit dans les commentaires, main.lua commence en premier, mais au lieu de dicter le déroulement du jeu à l'intérieur du fichier main.lua, nous laissons la classe de réalisateurs prendre le relais. Nous créons un display.newGroup et le réservons comme vue principale. Ainsi, lorsque le jeu est chargé, tout ce que vous voyez est en train d'être visualisé à partir du fichier main.lua de ce groupe d'écrans. Plutôt chouette, hein! Donc, une fois que vous y insérez cette vue, nous devons simplement dire au réalisateur quelle scène charger et cela nous y mènera automatiquement. Assez facile, à droite?

La prochaine chose que nous devons faire pour que cela fonctionne réellement est d’avoir une scène de menu. Le code est très simple et nous en avons déjà vu l'essentiel. Je vais donc commencer par poster le fichier entier, puis expliquer les quelques nouveautés. Ouvrons menu.lua et voyons à quel point il est facile de créer un système de menus simple. Copiez les éléments suivants dans votre menu.lua:

 --cette ligne est nécessaire pour que le réalisateur sache que - c’est une scène qui peut être chargée dans son module de vue (…, package.seeall) - nous devons pouvoir accéder à la classe de réalisateur de --course alors assurez-vous de inclure ceci ici local director = require ("directeur") local sprite = require ("sprite") - tout ce que vous souhaitez que cette scène fasse doit être inclus dans la nouvelle fonction. Chaque fois que le réalisateur charge une nouvelle scène, il cherche ici pour savoir quoi charger. new = function (params) --cette fonction sera retournée au réalisateur local menuDisplay = display.newGroup () - tout ce qui se trouve ici jusqu'à la ligne de retour est ce qui fait --up la scène si… aller fou fond local = display .newImage ("background.png") background.x = 240 background.y = 160 spriteSheet local = sprite.newSpriteSheet ("monsterSpriteSheet.png", 100, 100) monsterSet local = sprite.newSpriteSet (spriteSheet, 1, 7) sprite .add (monsterSet, "running", 1, 6, 600, 0) monstre local = sprite.newSprite (monsterSet) monstre: prépare ("running") monstre: play () monster.x = 60 monstre.y = 200 local monster2 = sprite.newSprite (monsterSet) monster2: prépare ("en cours d'exécution") monster2: play () monster2.x = 420 monster2.y = 200 monster2.xScale = monster2.xScale * -1 titre local = display.newImage ("title .png ") title.x = 240 title.y = 80 local playButton = display.newImage (" playButton.png ") playButton.x = 240 playButton.y = 220 menuAffichage: insérer (arrière-plan) menuAffichage: insérer (monstre) menuAfficher : inser t (monster2) menuDisplay: insert (titre) menuDisplay: insert (playButton) - c'est ce qui s'appelle quand playButton est touché - la seule chose qui fait est d'appeler la transition - de cette scène à la scène du jeu, " downFlip "est le nom de la transition utilisée par le directeur, fonction locale buttonListener (event) directeur: changeScene (" jeu "," downFlip ") renvoie la fin vraie - c’est une façon un peu différente de détecter le toucher, mais fonctionne - bien pour les boutons. Ajoutez simplement eventListener à l'objet d'affichage - c'est le bouton qui envoie l'événement "touch", qui appellera la fonction --buttonListener chaque fois que l'objet display est touché. playButton: addEventListener ("touch", buttonListener) --retourne le groupe d'affichage à la fin retour menuAffichage fin

Une nouveauté est le directeur: la ligne changeScene (). C'est assez simple car il fait exactement ce que l'on pourrait penser. Cependant, je voulais souligner le deuxième paramètre, le "downFlip". Il existe de nombreuses transitions intégrées qui peuvent donner à votre jeu une allure fantaisiste lorsque vous passez d’une scène à l’autre, cela dépend de ce que vous voulez que votre jeu ressemble. Voici une image de notre transition en cours.

Assurez-vous d’essayer certaines des différentes transitions pour trouver celle qui fonctionnera le mieux pour votre jeu. Vous pouvez en trouver la liste complète dans le fichier director.lua. Il suffit de regarder tous les effets différents et de leur donner un tourbillon. Quelques exemples supplémentaires que vous pouvez essayer rapidement si vous ne voulez pas creuser sont «fondu enchaîné», «overfromtop» et «flipFromBottom», pour n'en nommer que quelques-uns! Donc, mis à part cela, il y a très peu de choses que vous n'avez jamais vues auparavant. Tout cela ne fait que créer un petit écran de menu principal bon marché. Vous devez prendre note de certaines choses qui seront nécessaires dans toutes les scènes dont le réalisateur a besoin. Le premier étant:

 module (…, package.seeall)

Clair et simple. Vous avez besoin de cette ligne exacte en haut de chaque fichier * .lua que le réalisateur va utiliser comme scène. Après cela, vous avez la fonction new () qui est appelée lorsque vous entrez dans la scène et tout ce que vous voulez que la scène fasse doit être inclus ici. La première chose à faire est de créer un objet displayObject qui sera renvoyé au directeur, puis de le retourner à la fin de la nouvelle fonction. C'est tout. Cela semble facile? C'est parce que ça l'est! La classe de réalisateur rend vraiment cela facile. Tant que vos images sont au bon endroit pour la scène de menu, vous devriez pouvoir exécuter le fichier main.lua et le faire démarrer sans problèmes..

Jusqu'ici, nous avons pris en charge notre fichier principal et notre fichier de menu principal. La dernière chose à faire est d’apporter des modifications à notre fichier de jeu. Cela va aussi être facile. Ouvrez le fichier game.lua et ajoutez le code suivant:

 module (…, package.seeall) directeur local = nécessite ("directeur") nouveau = fonction (paramètres) gameDisplay = display.newGroup () - code de code ici retourne gameDisplay end

Ce sont les éléments essentiels de ce dont vous avez besoin pour une scène. Incidemment, c’est tout ce dont vous avez besoin pour obtenir votre ancien fichier main.lua dans votre fichier game.lua. Une fois que vous avez cela dedans, la seule chose à faire est de copier votre ancien fichier main.lua et de le coller là où il est indiqué coller le code ici. Faites cela et vous avez terminé… ou presque. Nous allons également apporter quelques modifications à la manière dont nous affichons notre message Game Over. Plutôt que d'avoir un gros bouton, nous allons le diviser en plusieurs petits boutons qui nous permettent de choisir de redémarrer le jeu ou de revenir au menu. Commençons par apporter certaines de ces modifications (notez que gameOver.png a été modifié pour s'adapter à la nouvelle disposition des boutons. Les dimensions de l'image sont toujours les mêmes, vous ne devriez donc plus avoir à les modifier). Les premiers changements seront d'ajouter les nouveaux boutons dans le jeu..

Ajoutez ce code à l'endroit où nous ajoutons toutes les autres images en haut du fichier:

 yesButton local = display.newImage ("yesButton.png") yesButton.x = 100 yesButton.y = 600 local noButton = display.newImage ("noButton.png") noButton.x = 100 noButton.y = 600

Assurez-vous ensuite de les ajouter tous les deux à l'écran. Ajoutez-les après le reste des insertions d'écran pour qu'ils apparaissent au-dessus de tout le reste:

 screen: insert (yesButton) screen: insert (noButton)

La prochaine chose que vous voudrez faire est d’utiliser la fonction touched () et de supprimer la première instruction if / else afin qu’elle ressemble à ceci:

 fonction touchée (événement) si (monster.isAlive == true) puis si (événement.phase == "commencé") puis si (événement.x < 241) then if(onGround) then monster.accel = monster.accel + 20 end else for a=1, blasts.numChildren, 1 do if(blasts[a].isAlive == false) then blasts[a].isAlive = true blasts[a].x = monster.x + 50 blasts[a].y = monster.y break end end end end  end     end

En faisant cela, la fonction touchée devient une fonction qui gère uniquement les interactions dans le jeu. Nous allons déplacer la logique qui redémarre le jeu vers sa propre fonction. Ajoutez ces fonctions sous la fonction touched ():

 fonction noListener (event) directeur: changeScene ("menu", "downFlip") renvoie la fin vraie function yesListener (événement) restartGame () renvoie la fin vraie

Donc, assez simple, et la même chose que nous avons faite à plusieurs reprises maintenant. Ensuite, descendez au bas du code où nous ajoutons nos auditeurs d'événement et ajoutons deux autres auditeurs:

 yesButton: addEventListener ("touch", yesListener) noButton: addEventListener ("touch", noListener)

Donc, les dernières choses que nous devons faire est de tenir compte des changements de position des deux boutons lorsque notre monstre meurt et lorsque nous réinitialisons le jeu. Voici les ajouts que nous devons inclure pour nous assurer qu’ils fonctionnent correctement. Dans la fonction restartGame (), ajoutez ceci:

 noButton.x = 100 noButton.y = 600 yesButton.x = 100 yesButton.y = 600

Ensuite, allez à la fonction checkCollisions (), où vous devriez voir ces lignes plusieurs fois:

 gameOver.x = display.contentWidth * .65 gameOver.y = display.contentHeight / 2

Ajoutez ce bloc juste en dessous de chaque instance (ça devrait être 4 en tout, un pour chaque mort):

 yesButton.x = display.contentWidth * .65 - 80 yesButton.y = display.contentHeight / 2 + 40 noButton.x = display.contentWidth * .65 + 80 noButton.y = display.contentHeight / 2 + 40

Une fois que tous ces changements ont été mis en place, vous devriez être en mesure de démarrer le jeu depuis main.lua et de pouvoir passer du menu principal à votre jeu, de mourir, puis de choisir si vous souhaitez rejouer ou revenir en arrière. le menu. Donc, en supposant que tout va bien, c'est la fin, nous avons maintenant notre jeu déplacé dans un système de menus en utilisant la classe de direction! Nous avons parcouru très rapidement la majeure partie de ce problème, en raison du fait qu'il n'y avait pas vraiment beaucoup de nouveau contenu. Si vous rencontrez des problèmes avec l'une des étapes, faites-le moi savoir dans les commentaires et je me ferai un plaisir de vous aider à les franchir. Le nouveau dossier du fichier téléchargeable contient également le produit fini afin que vous puissiez toujours l'utiliser comme référence. Espérons que cette série de tutoriels vous a été utile pour vous lancer dans le développement de jeux avec le SDK Corona, car vous pouvez voir que le processus est globalement très simple. Le SDK Corona est puissant et très convivial une fois que vous maîtrisez les bases. Espérons que vous pouvez maintenant aller de l'avant et faire des jeux géniaux. 

Il y aura un autre tutoriel pour cette série, mais cela ne changera pas le jeu de toute façon, mais se concentrera sur la soumission de votre jeu à l'App Store car c'est toujours une aventure que de le faire pour la première fois. Si heureux codage et merci de suivre!