Comment construire Highway Dodge avec le SDK Corona

Ce que vous allez créer

introduction

Dans ce didacticiel, vous apprenez à créer, Highway Dodge, un jeu simple mais addictif. Highway Dodge est facile à prendre en main et à jouer, mais il offre la qualité addictive d’autres jeux populaires de l’App Store.

Highway Dodge commence par placer le joueur dans une voiture de course sur l’autoroute. Pendant le jeu, le joueur doit éviter le trafic venant en sens inverse sur l’autoroute en tapant sur l’une des trois voies disponibles. Pour chaque voiture esquivée, le joueur reçoit un point et la partie est terminée pour le joueur lorsqu’une voiture venant en sens inverse heurte la voiture de course. Au fil du temps, les voitures venant en sens inverse sortent de plus en plus vite pour offrir un véritable défi au joueur.

Exigences

Ce jeu est construit en utilisant Lua et le SDK Corona. Au minimum, vous devez avoir un compte avec Corona Labs et le SDK Corona installé. Vous pouvez récupérer gratuitement le SDK Corona sur le Site Web de Corona Labs. Pour ce tutoriel, j’ai utilisé build 2015.2731 du SDK Corona.

1. Configurer Highway Dodge

Allons-y et commençons Highway Dodge en créant un modèle vierge. Ouvrez le Simulateur Corona et choisissez Nouveau projet du Fichier menu. Une fois que vous avez le Créer un nouveau projet fenêtre ouverte, entrez Highway Dodge comme nom du projet, choisissez un modèle vierge et définissez la largeur sur 400 et la hauteur à 600. Laissez l’orientation par défaut définie sur Droit.

Créer un nouveau projet

Après avoir mis en place votre projet, télécharger les images pour Highway Dodge. Créez un nouveau dossier dans votre nouveau projet, nommez-le images et ajoutez les images à ce dossier. Votre projet devrait maintenant ressembler à ceci:

Un aperçu du projet

2. Paramètres du projet

Une fois le projet mis en place, examinons rapidement deux fichiers importants, build.settings et config.lua.

build.settings

Ce fichier gère les propriétés de temps de construction du jeu. Il stocke des informations sur l’orientation de votre application, les informations sur les icônes, les paramètres iOS et les paramètres Android. La configuration par défaut est adéquate pour notre jeu.

config.lua

Ce fichier de configuration contrôle les propriétés d’exécution du jeu. Ceci comprend width, height, scale, fps (images par seconde), et
imageSuffix. La propriété que nous devons examiner est imageSuffix. le imageSuffix La propriété est utilisée pour la sélection d’image dynamique. En un mot, il indique à l’application d’utiliser une image de résolution plus élevée sur un appareil de résolution plus élevée.

J’ai fourni des images haute résolution dans le dossier images, nous devons donc mettre à jour config.lua en conséquence. Tes projets config.lua Le fichier doit ressembler à celui ci-dessous. J’ai omis la section de notification push, qui est commentée.

3. Point de lancement

Une fois le projet et la sélection d’image dynamique configurés, passons à main.lua. Ce fichier est le point de lancement de chaque application créée avec le SDK Corona. Dans notre jeu, il contiendra trois lignes de code.

Étape 1

La première ligne masque la barre d’état sur les appareils iOS. Ouvert main.lua et ajoutez la ligne suivante après le commentaire -- Your code here.

Étape 2

Ensuite, nous commençons à utiliser composer en exigeant la bibliothèque dans notre jeu. Nous faisons cela en ajoutant la ligne suivante:

Étape 3

Ensuite, nous utilisons composer pour passer à la scène du menu. Nous déplaçons des scènes en appelant la fonction composer.gotoScene(), en passant la valeur
"scene_menu" comme paramètre. La valeur "scene_menu" est le nom de la scène et le nom du fichier que nous créons dans la section suivante.

Un mot sur Composer

Composer est la bibliothèque officielle de gestion de scène de Corona. Composer permet aux développeurs de créer facilement une scène et d’effectuer une transition entre les scènes. En deux lignes, j’ai pu passer de la scène principale à la scène du menu. Si vous souhaitez en savoir plus sur Composer, visitez Corona’s Guide de la bibliothèque du compositeur
disponible sur le Site Web de Corona Labs Docs.

4. Menu

La scène du menu de notre jeu ne comprendra que quelques éléments. La scène contiendra un graphique d’arrière-plan, un titre et un bouton de démarrage. Nous utiliserons la bibliothèque de widgets intégrée de Corona pour créer le bouton de démarrage. La bibliothèque de widgets nous permet de créer rapidement et facilement des éléments d’interface utilisateur communs. Dans notre jeu, nous l’utiliserons uniquement pour la création de boutons.

Étape 1

Dans le dossier projet de Highway Dodge, créez un nouveau fichier, scene_menu.luaet ouvrez-le dans l’éditeur de texte de votre choix. Au lieu de partir de zéro, nous allons utiliser le modèle de scène disponible sur le site Web de Corona Labs Docs. Avec leur modèle, nous pourrons avancer beaucoup plus rapidement. Dirigez-vous vers Docs de Corona Labs
et copiez / collez le modèle de scène dans scene_menu.lua.

Étape 2

Ajoutez la bibliothèque de widgets à notre jeu en ajoutant la ligne suivante, juste en dessous de la bibliothèque du compositeur.

Étape 3

Nous ajoutons notre arrière-plan en utilisant les graphiques que vous avez téléchargés précédemment. L’arrière-plan doit être positionné au centre de l’écran. dans le scene:create() fonction et après le screenGroup variable est déclarée, ajoutez le code suivant:

Étape 4

Ensuite, nous devons ajouter les trois voies qui représentent l’autoroute. Nous faisons cela en utilisant une table pour tenir les voies et en créant un for boucle qui s’exécute trois fois. Placez cet extrait après le graphique d’arrière-plan:

Pour m’assurer que les voies sont toujours centrées, j’ai placé les voies sur l’axe des x en utilisant un peu de maths. Cela garantit que les voies restent centrées, quel que soit l’appareil sur lequel le jeu fonctionne.

Étape 5

Nous ajoutons également notre logo pour Highway Dodge en plaçant un objet image près du haut de l’écran.

Étape 6

Avant de pouvoir ajouter notre widget bouton, nous devons créer une fonction qui répond lorsque le bouton est touché. Nous nommerons la fonction handleButtonEvent() et déplacez le joueur vers la scène du jeu en utilisant composer.gotoScene(). Nous ne répondrons que lorsque le joueur aura levé le doigt du bouton ou ended phase de l’événement.

Étape 7

Avec la fonction ajoutée, nous pouvons ajouter le bouton. Nous créons le bouton en utilisant widget.newButton
et en lui transmettant quelques valeurs. Nous spécifions la largeur et la hauteur du bouton, les fichiers image du bouton, le texte à afficher, le type de police, la taille de police et la couleur de la police.

Nous indiquons également à Corona quelle fonction appeler lorsque vous appuyez sur le bouton et le positionnons au milieu de l’écran. Les fichiers source de ce didacticiel incluent des commentaires qui expliquent chacune des valeurs utilisées pour configurer le bouton.

Étape 8

Pour terminer la scène du menu, nous devons supprimer la scène du jeu à sa sortie. Lorsque Corona se déplace entre les scènes, il ne supprime pas toujours la scène précédente. Sans ces lignes, le jeu sera toujours dans une scène de jeu après avoir été joué une fois.

Pour supprimer la scène précédente, nous obtenons le nom de la scène et appelons composer.removeScene() pour le supprimer s’il existe. Ajoutez le code suivant au scene:show() fonction.

5. Créer la scène de jeu

Nous pouvons maintenant commencer à travailler sur la scène du jeu. Nous utiliserons le même flux de travail que celui utilisé pour créer la scène de menu. Créez un nouveau fichier, scene_game.lua, et copiez / collez le modèle de scène disponible sur Docs de Corona Labs. Une fois le code en place, ouvrez scene_game.lua dans votre éditeur de texte préféré.

Étape 1

Pour nous faciliter le codage de la scène du jeu, nous allons utiliser la bibliothèque de widgets et la bibliothèque de physique. Ce dernier est utilisé pour la détection de collision. Ajoutez le code suivant à scene_game.lua:

Sur les première et deuxième lignes, nous avons respectivement besoin de la bibliothèque de widgets et de la bibliothèque de physique. Nous commençons alors la physique et désactivons la gravité. Nous n’avons pas besoin de la gravité pour notre jeu sur l’autoroute, nous utiliserons plutôt
transition.to() pour déplacer les voitures.

Étape 2

dans le scene:create() fonction, nous déclarons un certain nombre de variables que nous utiliserons dans le jeu. Ces variables seront responsables de la voiture du joueur, des voies, des voitures ennemies et du score du joueur. Pour faciliter la lecture, j’ai ajouté quelques commentaires.

Étape 3

Sous les déclarations de variables, nous configurons les fonctions du jeu. Nous implémenterons chaque fonction dans une étape ultérieure. Ajoutez le code suivant après les déclarations de variable dans le scene:create() fonction.

Étape 4

Après les fonctions, nous ajoutons le fond et les voies. Pour les voies, nous attachons un écouteur d’événement à chaque voie pour les faire réagir aux événements tactiles. Lorsqu’il est touché, l’auditeur appelle le moveCar() fonction.

Étape 5

Avec l’arrière-plan et les voies configurés, il est temps de créer un objet texte pour contenir le score du joueur et créer la voiture du joueur. Le score sera en haut de l’écran et la voiture du joueur sera positionnée sur la voie la plus à gauche. De plus, nous ferons de la voiture du joueur un objet physique dynamique.

Étape 6

Ensuite, nous définissons une minuterie pour envoyer une voiture en fonction de la valeur du sendEnemyFrequency variable et créez un écouteur d’événement d’exécution pour les collisions globales.

6. Ajout de fonctionnalités de jeu

Nous pouvons enfin ajouter des fonctionnalités à notre jeu. Cette section ajoutera du code supplémentaire à chaque fonction que nous avons déclarée dans la section précédente. Nous allons commencer avec incrementScore() et terminer par onGlobalCollision().

incrementScore()

Cette fonction est appelée lorsqu’une voiture ennemie passe devant le joueur et que la transition est terminée. Lorsqu’il est appelé, le score du joueur est augmenté de 1. Ajoutez l’implémentation suivante au incrementScore() fonction.

moveCar()

le moveCar() La fonction est appelée lorsqu’une voie est touchée. Sur le ended phase de l’événement, nous saisissons l’identifiant de voie et déplaçons la voiture sur la bonne voie. Nous retournons true à la fin pour indiquer un événement tactile réussi. Ajoutez l’implémentation suivante au moveCar() fonction.

sendEnemyCar()

le sendEnemyCar() crée une voiture ennemie, assigne la voiture à une voie, attache un corps physique à la voiture et utilise transition.to() pour envoyer la voiture vers le bas de l’écran. Pour commencer, créons l’objet voiture ennemie.

Ensuite, nous définissons l’emplacement x et y de la voiture ennemie. Nous créons également un if-then déclaration pour assigner la voiture ennemie à la même voie que la voiture du joueur dans 50% du temps. Cela obligera le joueur à se déplacer plus souvent et rendra le jeu plus amusant.

Nous devons également faire pivoter la voiture ennemie pour qu’elle soit tournée vers le bas et ajouter un type de corps physique cinématique à la voiture ennemie.

Avec la voiture ennemie installée, nous utilisons le transition.to() fonction d’envoyer la voiture ennemie dans l’une des voies. Lorsque la transition est terminée, le jeu appelle une fonction pour supprimer l’objet. J’incrémente également la variable enemyCounter par 1 pour garder une trace du nombre de voitures ennemies dans le jeu.

Enfin, nous voulons que le jeu devienne plus rapide avec le temps. Pour chaque autre voiture envoyée, le jeu recréera le chronomètre et le réglera pour qu’il soit 200 ms plus rapide.

onPlayAgainTouch()

La fonction la plus courte, onPlayAgainTouch(), ramène le lecteur au menu principal. C’est ce que la mise en œuvre du onPlayAgainTouch() la fonction ressemble à.

onGlobalCollision()

le onGlobalCollision() La fonction est utilisée pour détecter les collisions entre deux objets physiques sur l’écran. Dans notre jeu, nous n’avons que deux types d’objets physiques:

  • la voiture du joueur
  • la voiture ennemie

Lorsque ces deux objets entrent en collision, le jeu arrête tous les minuteurs, transitions et écouteurs d’événements. De plus, le jeu affiche une scène de jeu qui permet au joueur de rejouer.

Étape 1

Tout d’abord, nous créons un if-then déclaration qui écoute le began phase.

Étape 2

dans le if-then déclaration, nous arrêtons le jeu. Nous suspendons toutes les transitions, annulons la minuterie, suspendons la physique (même si ce n’est pas nécessaire, c’est un bon appel de nettoyage) et supprimons l’auditeur d’événements des trois voies. Ajoutez le code suivant à l’intérieur du if-then déclaration:

Étape 3

Une fois la mécanique du jeu arrêtée, nous ajoutons un rectangle opaque et un objet texte qui dit “Jeu terminé!”. Cela donne une bonne indication visuelle que le jeu est terminé.

Étape 4

Pour terminer la fonction de collision globale, nous ajoutons le bouton de lecture qui renvoie le joueur au menu.

Essai routier

Exécutez l’application pour voir si tout fonctionne comme prévu. Vous devriez pouvoir jouer au jeu, les voitures ennemies devraient apparaître du haut de l’écran et votre score devrait augmenter pour chaque voiture ennemie que vous avez esquivée avec succès.

Conclusion

Merci d’avoir lu mon tutoriel sur la création de Highway Dodge avec le SDK Corona. Vous pouvez télécharger les fichiers source de ce jeu à partir de GitHub. Prenez un moment pour réfléchir à la manière d’améliorer encore le jeu. Si vous recherchez des suggestions, je vous recommande d’ajouter une autre voie, d’ajouter plus de types d’ennemis et même d’ajouter des power-ups sympas.

En relation :  Supprimer les publicités et installer Google Play sur Kindle Fire sans racine
Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.