Construisez un jeu Endless Runner à partir de zéro Game Over & Scoring

Dans ce tutoriel, nous allons créer deux nouvelles fonctionnalités qui ajouteront vraiment de la brillance à notre jeu: le scoring et le game over. Cela peut sembler beaucoup de travail, mais notre jeu est conçu de manière à rendre cela rapide et facile à faire. Alors, ajoutons ces fonctionnalités et terminons notre jeu.!

La première fonctionnalité que nous aborderons est le système de notation. Afin de mettre en place un bon système de score, nous devons ajouter un texte agréable à l’image pour notre jeu. Vous pouvez commencer par télécharger une nouvelle police de votre choix ou par celle que j'ai incluse dans le fichier de téléchargement de ce didacticiel. Si vous choisissez le vôtre, assurez-vous de télécharger un fichier ".ttf". Il y a beaucoup d'excellents sites disponibles avec des polices gratuites; vous pouvez commencer par chercher simplement des "polices gratuites" et naviguer jusqu'à trouver quelque chose que vous aimez. Le fichier de téléchargement est configuré de la même manière que dans les projets précédents. Il existe un ancien et un nouveau dossier: l’ancien dossier contient tout ce que nous avons fait jusqu’à présent et le nouveau dossier contient le projet tel qu’il sera présenté à la fin de ce didacticiel..

Une fois que vous avez cela dans le dossier qui contient votre fichier main.lua, ouvrez le fichier main.lua et votre fichier build.settings et laissez-le fonctionner. La première chose que nous allons faire est de travailler avec notre fichier build.settings. C’est à partir de là que nous allons informer le programme d’inclure la police personnalisée.

Modifiez votre fichier build.settings pour qu'il ressemble à ceci:

 settings = orientation = default = "landscapeRight", content = "landscapeRight", pris en charge = "landscapeRight",, --ajoute la police BorisBlackBloxx.ttf à notre jeu - vous devrez toujours faire référence au nom le --code, mais si vous ne l'avez pas référencé ici, il ne fonctionnera pas iphone = plist = UIAppFonts = "BorisBlackBloxx.ttf",,

Notez que ce sera la même si vous avez un appareil Android. Je suis principalement un développeur iOS en matière de développement de jeux. Je ne l'ai donc pas testé sur un appareil Android. Cependant, ce script exact devrait fonctionner sur votre appareil Android ainsi que sur votre appareil iOS. (Si des utilisateurs d'Android examinant ce didacticiel rencontrent des problèmes, merci de me le faire savoir et je l'examinerai plus loin!) Maintenant que le code ci-dessus est en place, vous pouvez continuer et fermer ce fichier car nous n'aurons pas besoin de le toucher. pas plus. Nous allons vérifier que cela a fonctionné en ajoutant du texte au jeu..

Ouvrons notre fichier main.lua et donnons à nos joueurs un système de notation! Juste au-dessus de l'endroit où nous créons nos groupes d'affichage, insérez ce qui suit:

 --variable pour contenir le score de notre jeu score local = 0 --scoreText est une autre variable qui contient une chaîne contenant les informations sur le score. Lorsque nous mettons à jour le score, nous aurons toujours besoin de mettre à jour cette chaîne également - ***** Note pour les utilisateurs d'Android, vous devrez peut-être inclure l'extension de fichier de la police - que vous choisissez ici, de sorte qu'il s'agisse de BorisBlackBloxx.ttf. ****** local scoreText = display.newText ("score:"… score, 0, 0, "BorisBlackBloxx", 50) --Ceci est important, car si vous n'avez pas cette ligne, le texte restera constamment - centré sur lui-même plutôt que s'aligner proprement sur un point fixe scoreText: setReferencePoint (display.CenterLeftReferencePoint) scoreText .x = 0 scoreText.y = 30

Nous allons ensuite l'ajouter à notre écran displayGroup. Mettez ceci après que tous les autres groupes aient été ajoutés au groupe d'écran:

 screen: insert (scoreText)

Allez-y et lancez ça. Cela va progresser très rapidement, alors assurez-vous que tout fonctionne correctement avant de poursuivre. Vous devriez voir quelque chose comme ça:

Une fois que vous avez testé cela pour vous assurer qu'il fonctionne, nous mettrons à jour le score afin qu'il ait une valeur immédiate pour notre jeu. Dans la fonction updateBlocks (), juste en dessous de la ligne qui dit:

si ((blocs [a]). x < -40) then, put this code:

 score = score + 1 scoreText.text = "score:"… score scoreText: setReferencePoint (display.CenterLeftReferencePoint) scoreText.x = 0 scoreText.y = 30

Ceci mettra simplement à jour notre score d'un point chaque fois qu'un bloc passe du côté gauche de l'écran et est réinséré à droite. Cela peut être utilisé de différentes manières, bien sûr. Il est judicieux de mettre à jour le score ici, car il restera cohérent dans tous les matchs. Il fonde les scores sur le chemin parcouru par les joueurs. En fait, si vous vouliez enregistrer la distance parcourue, vous stockeriez simplement le score dans la variable appelée distance parcourue, mètres ou quelque chose de similaire..

La prochaine fonctionnalité que nous allons aborder porte sur ce qui se passe quand un joueur meurt. Nous allons garder les choses simples dans ce tutoriel, mais vous devriez être en mesure de voir comment vous pourriez en intégrer davantage dans ce travail une fois que nous aurons terminé. Gardez à l'esprit que l'ajout au score est très simple à faire. Disons que vous vouliez augmenter le score de cinq à chaque fois que vous éliminez un fantôme ou un obstacle. Vous voudriez simplement mettre le code ci-dessus dans la section de détection de collision là où vous détruisez lesdits objets.

Lorsque notre personnage meurt, nous allons faire plusieurs choses:

1) arrêter le mouvement du joueur.

2) Faites tourner le joueur en cercles pour obtenir un effet dramatique. Nous faisons cela ici parce que je veux juste vous montrer la fonction de rotation pour les objets d'affichage. Vous pouvez bien sûr changer sa mort en tout ce que vous voulez.

3) Afficher un écran sur le jeu qui permet au joueur de redémarrer le jeu s’il le souhaite.

Premièrement, nous devons nous assurer que la vitesse de jeu est définie sur 0. Ensuite, nous devons ajouter une variable à notre objet d'affichage monstre. Faites ceci en ajoutant la ligne de code suivante où nous instancions Monster:

 monster.isAlive = true

Une fois cela mis en place, nous vérifierons son statut à différents endroits du jeu. Le premier changement que nous allons faire est de mettre à jour Monster (), allez-y et faites en sorte que updateMonster () ressemble à ceci:

 function updateMonster () --si notre monstre est en train de sauter, puis passe à l'animation de saut - s'il ne continue pas à jouer à l'animation en cours if (monster.isAlive == true), alors if (onGround), puis if (wasOnGround), puis d'autre monster: prepare ("running") monstre: play () end else monster: prepare ("jumping") monstre: play () end if (monster.accel> 0) puis monster.accel = monster.accel - 1 fin monster.y = monstre .y - monster.accel monster.y = monster.y - monster.gravity sinon monstre: rotation (5) fin - met à jour la collisionRect pour rester devant le monstre collisionRect.y = monster.y fin

Notez qu'avant de mettre à jour la position du monstre, nous vérifions d'abord si le joueur est en vie ou non. Si le joueur est en vie, nous avançons simplement comme d'habitude. Si le joueur n'est pas en vie, nous envoyons notre monstre dans une rotation sans fin. Ensuite, nous devons réellement changer le statut monster.isAlive. Accédez à la fonction checkCollisions () et nous apporterons les modifications. Dans les collisions de contrôle, la position de notre monstre est comparée à trois objets différents: collisions, fantômes et pointes. Dans chacune de ces sections, nous définissons la vitesse du jeu à 0 lorsqu'une collision est détectée. Ce que vous devez faire maintenant, c’est d’ajouter ce code à chacune des trois sections juste après le réglage de la vitesse sur 0.

 monster.isAlive = false - cela met simplement en pause le monstre d'animation actuel: pause ()

Maintenant, il est réglé de sorte que l’animation en cours s’arrête lorsque vous mourez. De plus, le monstre va tourner à cause du code que nous avons déjà ajouté à updateMonster (). Relancez le jeu et vous devriez voir ceci:

À ce stade, nous avons effectué deux des trois actions nécessaires pour améliorer le processus de mort dans notre jeu. La dernière chose à faire est de créer un petit écran de mort permettant au joueur de reprendre le jeu s’il le souhaite. Retournez au début du fichier où nous ajoutons tous les objets displayObjects et ajoutons ceci:

 gameOver local = display.newImage ("gameOver.png") gameOver.name = "gameOver" gameOver.x = 0 gameOver.y = 500

Parce que c’est un menu simple, j’ai décidé d’en faire une grande image. J'ai utilisé la même méthode que nous avons utilisée pour le reste des images et l'ai stockée hors écran pour une utilisation ultérieure. Nous devons maintenant déplacer ceci à l’écran chaque fois que notre joueur meurt. Retournez à la section de code sur laquelle nous venons de travailler, où nous avons défini monster.isAlive = false. Juste en dessous, ajoutez les éléments suivants à chacune de ces sections:

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

Assurez-vous d'ajouter

 écran: insert (gameOver)

à votre code pour que gameOver apparaisse correctement. Mettez-le comme la dernière chose à ajouter juste après le textScore. De cette façon, il est sûr d'être visible lorsque nous le déplaçons.

Cela mettra l'écran «Game Over» juste à droite du monstre en rotation afin que nous puissions toujours voir notre score final dans le coin supérieur gauche de l'écran. Enfin, pour que tout cela fonctionne, nous devons faire en sorte qu’il fasse quelque chose lorsque nous le touchons. Nous allons maintenant modifier la fonction touched (). Changez la fonction que vous avez touchée pour ressembler à ceci:

 fonction touchée (événement) si (événement.x < gameOver.x + 150 and event.x > gameOver.x - 150 et event.y < gameOver.y + 95 and event.y > gameOver.y - 95) puis restartGame () sinon si (monster.isAlive == true) puis si (event.phase == "commencé") puis si (event.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 end

Notez que nous n’avons apporté qu’un seul changement: au lieu de vérifier d’abord de quel côté de l’écran le contact est activé (comment nous déterminons le saut ou le feu), nous vérifions si l’objet gameOverdisplay a été touché. S'il n'a pas été touché et que le monstre est en vie, continuez à sauter et à tirer comme d'habitude. Mais si gameOver a été touché, cela signifie que le jeu est terminé car il est maintenant visible et nous appelons simplement la fonction restartGame (). Quelque part au-dessus qui ajoute la fonction restartGame () et qui fera tout pour nous.

 function restartGame () --move menu gameOver.x = 0 gameOver.y = 500 --reset le score score = 0 --reset la vitesse de jeu = 5 --reset le monstre monster.isAlive = vrai monstre.x = 110 monster.y = 200 monstre: prepare ("en cours d'exécution") monster: play () monster.rotation = 0 --resélectionnez le paramètre groundLevel groundLevel = groundMin pour a = 1, blocks.numChildren, 1 ne bloque pas [a] .x = ( a * 79) - 79 blocs [a] .y = groundLevel end --sélectionnez les fantômes pour a = 1, ghosts.numChildren, 1 ne fantômes [a]. x = 800 fantômes [a]. z = 600 end - réinitialiser les pointes pour a = 1, spikes.numChildren, 1 faire des pointes [a] .x = 900 pointes [a] .y = 500 fin - régler les explosions pour a = 1, coups.numChildren, 1 faire des coups [a ] .x = 800 explosions [a] .y = 500 end --resélectionne les arrière-plans backgroundfar.x = 480 backgroundfar.y = 160 backgroundnear1.x = 240 backgroundnear1.y = 160 backgroundnear2.x = 760 backgroundnear2.y = 160 end

Exécutez-le et si tout va bien, vous devriez maintenant avoir un petit écran de mort que vous pouvez toucher pour redémarrer le jeu..

Avec ces petits changements en place, nous devrions maintenant avoir un jeu entièrement fonctionnel! Le joueur gagne un score et nous gérons la mort un peu plus gracieusement. Tout ce que nous avons fait ici était très simple, mais j'espère que vous avez maintenant une idée de la façon dont vous pourriez créer des menus plus grands ou comment créer une scène de mort plus complexe lorsque vous mourrez. Une solution simple consisterait simplement à ajouter quelques nouvelles animations correspondant aux différents décès, mais je vous laisserai choisir ce qui convient le mieux à votre jeu. Si vous avez des questions sur les modifications apportées, merci de me le faire savoir dans les commentaires. Merci d'avoir suivi!