Share
Dans ce tutoriel, vous apprendrez à créer, Autoroute Dodge, un jeu simple, mais addictif. Highway Dodge est facile à prendre en main, mais il offre la qualité addictive des 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 les véhicules venant en sens inverse sur l'autoroute en appuyant sur l'une des trois voies disponibles. Pour chaque voiture esquivée, le joueur reçoit un point et le jeu est terminé pour le joueur quand une voiture venant en sens inverse frappe la voiture de course. Au fil du temps, les voitures qui approchent sortent de plus en plus vite pour offrir un véritable défi au joueur..
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 télécharger gratuitement le SDK Corona sur le site Web de Corona Labs. Pour ce tutoriel, j'ai utilisé build 2015.2731 du SDK Corona.
Commençons immédiatement et démarrons Highway Dodge en créant un modèle vierge. Ouvrez le Corona Simulator et choisir Nouveau projet du Fichier menu. Une fois que vous avez le Créer un nouveau projet fenêtre ouverte, entrez Autoroute Dodge comme nom de 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.
Après avoir configuré votre projet, téléchargez 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:
Avec le projet mis en place, jetons un coup d'œil à deux fichiers importants, build.settings et config.lua.
Ce fichier gère les propriétés de construction du jeu. Il stocke des informations sur l'orientation de votre application, les informations d'icône, les paramètres iOS et les paramètres Android. La configuration par défaut convient à notre jeu..
Ce fichier de configuration contrôle les propriétés d'exécution du jeu. Ceci comprend largeur, la taille, échelle, fps (images par seconde), et imageSuffix. La propriété que nous devons examiner est imageSuffix. le imageSuffix Cette propriété est utilisée pour la sélection dynamique d'images. En un mot, il indique à l'application d'utiliser une image de résolution supérieure lorsque vous utilisez un appareil de résolution supérieure.
J'ai fourni des images haute résolution dans le dossier images. Nous devons donc les mettre à jour. config.lua en conséquence. Votre projet config.lua Le fichier doit ressembler à celui ci-dessous. J'ai omis la section de notification push, qui est commentée.
application = contenu = largeur = 400, hauteur = 600, échelle = "letterBox", fps = 30, imageSuffix = ["@ 2x"] = 2,,,
Une fois le projet et la sélection dynamique des images 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 va contenir trois lignes de code.
La première ligne masque la barre d'état sur les appareils iOS. Ouvrir main.lua et ajoutez la ligne suivante après le commentaire -- Votre code ici.
display.setStatusBar (display.HiddenStatusBar)
Ensuite, nous commençons à utiliser composer en exigeant la bibliothèque dans notre jeu. Nous faisons cela en ajoutant la ligne suivante:
Accentsconagua
compositeur local = require ("compositeur") Ensuite, nous utilisons compositeur pour passer à la scène du menu. Nous déplaçons des scènes en appelant la fonction composer.gotoScene (), passer 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.
composer.gotoScene ("scene_menu")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 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 Corona Labs Docs.
La scène de menu de notre jeu ne comportera que quelques éléments. La scène contiendra un fond graphique, un titre et un bouton de démarrage. Nous allons utiliser 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'utilisons uniquement pour la création de boutons..
Dans le dossier de projet de Highway Dodge, créez un nouveau fichier., scene_menu.lua, et 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 serons en mesure de progresser beaucoup plus rapidement. Rendez-vous sur Corona Labs Docs et copiez / collez le modèle de scène dans scene_menu.lua.
Ajoutez la bibliothèque de widgets à notre jeu en ajoutant la ligne suivante, juste en dessous de la bibliothèque de composition.
widget local = require ("widget") 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 placé au centre de l'écran. dans le scène: créer () fonction et après la screenGroup Si la variable est déclarée, ajoutez le code suivant:
local background = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY
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 pour boucle qui court trois fois. Placez cet extrait après le graphique d'arrière-plan:
voies locales = pour i = 1,3 voies [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) voies [i]. x = (display.contentCenterX - 79 * 2 ) + (i * 80) voies [i] .y = display.contentCenterY end
Pour être sûr que les voies sont toujours centrées, j'ai placé les voies sur l'axe des x en utilisant un peu de math. Cela garantit que les couloirs restent centrés, quel que soit le périphérique sur lequel le jeu fonctionne..
Nous ajoutons également notre logo pour Highway Dodge en plaçant un objet d'image près du haut de l'écran..
logo local = display.newImageRect (sceneGroup, "images / logo.png", 300, 150) logo.x = display.contentCenterX logo.y = 75
Avant de pouvoir ajouter notre widget de bouton, nous devons créer une fonction qui réponde lorsque le bouton est touché. Nous nommerons la fonction handleButtonEvent () et déplacez le joueur sur la scène du jeu en utilisant composer.gotoScene (). Nous ne répondrons que lorsque le joueur aura levé le doigt sur le bouton ou à la terminé phase de l'événement.
fonction locale handleButtonEvent (event) if ("terminée" == event.phase) puis composer.gotoScene ("scene_game", "slideLeft") end endAvec la fonction ajoutée, nous pouvons ajouter le bouton. Nous créons le bouton en utilisant widget.newButton et en lui passant des 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 et la couleur de la police..
Nous disons également à Corona quelle fonction appeler lorsque le bouton est enfoncé et le positionnons au milieu de l'écran. Les fichiers sources de ce didacticiel incluent des commentaires expliquant chacune des valeurs utilisées pour configurer le bouton..
local btn_startPlaying = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank-over.png", label = "Commencer à jouer", font = system.defaultFontBold, fontSize = 32, labelColor = default = 0, 0, 0, over = 0, 0, 0, 0.5, onEvent = handleButtonEvent btn_startPlaying.x = display.contentCenterX btn_startPlaying.y = display .contentCenterY sceneGroup: insert (btn_startPlaying)
Pour terminer la scène de menu, nous devons supprimer la scène de jeu quand elle se termine. Lorsque Corona se déplace entre les scènes, la scène précédente n’est pas toujours supprimée. Sans ces lignes, le jeu sera toujours dans une scène de jeu après qu'il a été joué une fois.
Pour supprimer la scène précédente, nous obtenons le nom de la scène et appelons composer.removeScene () l'enlever s'il existe. Ajoutez le code suivant au scène: show () une fonction.
local prevScene = composer.getSceneName ("précédent") si (prevScene) puis composeur.removeScene (prevScene) endNous pouvons maintenant commencer à travailler sur la scène du jeu. Nous allons utiliser le même flux de travail que nous avons utilisé pour créer la scène de menu. Créer un nouveau fichier, scene_game.lua, et copiez / collez le modèle de scène disponible dans la documentation de Corona Labs. Une fois le code en place, ouvrez scene_game.lua dans votre éditeur de texte préféré.
Pour nous faciliter la tâche, 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:
widget local = require ("widget") physique locale = require ("physique") physics.start () physics.setGravity (0,0) Sur les première et deuxième lignes, nous avons 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 de route, nous utiliserons plutôt Transition vers() déplacer les voitures.
dans le scène: créer () 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 couloirs, des voitures ennemies et du score du joueur. Pour faciliter la lecture, j'ai ajouté quelques commentaires..
-- Fonction "scene: create ()" scene: create (event) local lanes = - crée un tableau appelé lanes local playerCar - une variable pour la voiture du joueur local laneID = 1 - une variable pour l'identifiant de la terre ennemi localCars = - une table pour contenir les voitures ennemies locales ennemisCounter = 1 - commence le compteur d'ennemis à 1 pour garder une trace des voitures ennemies locales sendEnemyFrequency = 2500 - définit la fréquence d'envoi des voitures ennemies en millisecondes locales tmrToSendCars - une variable pour contenir une référence au minuteur d'envoi de voitures local playerScore = 0 - démarre le score du joueur à 0 local playerScoreText - un objet pour contenir le score text
Sous les déclarations de variables, nous configurons les fonctions du jeu. Nous allons implémenter chaque fonction dans une étape ultérieure. Ajoutez le code suivant après les déclarations de variable dans le scène: créer () une fonction.
fonction locale incrementScore () fin fonction locale moveCar (événement) fin fonction locale sendEnemyCar () fin fonction locale onPlayAgainTouch () fin fonction locale onGlobalCollision (événement) fin
Après les fonctions, nous ajoutons l’arrière-plan et les voies. Pour les pistes, nous attachons un écouteur d'événement à chaque piste pour les faire réagir aux événements tactiles. Lorsque touché, l'auditeur appelle le moveCar () une fonction.
arrière-plan local = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY pour i = 1,31 voies [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) voies [i] .x = (display.contentCenterX - 79 * 2) + (i * 80) voies [i] .y = display.contentCenterY voies [i ] .id = i voies [i]: addEventListener ("touch", moveCar) end Avec le fond et les couloirs configurés, il est temps de créer un objet texte pour conserver 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 placée sur la voie la plus à gauche. De plus, nous ferons de la voiture du joueur un objet de physique dynamique.
playerScoreText = display.newText (sceneGroup, "Score:"… playerScore, 0, 0, native.systemFont, 36) playerScoreText.x = display.contentCenterX playerScoreText.y = 25 playerCar = display.newImageRect (sceneGroup, "images / playerCar. png ", 50, 100) playerCar.anchorY = 1 playerCar.x = voies [1] .x playerCar.y = display.contentHeight physics.addBody (playerCar) playerCar.bodyType =" dynamique "
Ensuite, nous configurons une minuterie pour envoyer une voiture en fonction de la valeur du sendEnemyFrequency variable et créer un écouteur d'événements d'exécution pour les collisions globales.
tmrToSendCars = timer.performWithDelay (sendEnemyFrequency, sendEnemyCar, 0) Durée d'exécution: addEventListener ("collision", onGlobalCollision) 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 se termine par onGlobalCollision ().
incrementScore ()Cette fonction est appelée quand 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 à la incrementScore () une fonction.
-- Cette fonction incrémente le score du joueur de 1. Cette fonction est appelée lorsque la transition de la voiture ennemie est terminée et hors écran. fonction locale incrementScore () playerScore = playerScore + 1 playerScoreText.text = "Score:"… playerScore end
moveCar ()le moveCar () La fonction est appelée quand une voie est touchée. Sur le terminé phase de l’événement, nous saisissons l’identifiant de la voie et la voiture dans la bonne voie. Nous retournons vrai à la fin pour indiquer un événement tactile réussi. Ajoutez l'implémentation suivante à la moveCar () une fonction.
-- moveCar répondra à l'événement tactile sur la voie, fonction locale moveCar (événement) si (event.phase == "terminé"), puis laneID = event.target.id - récupère l'identifiant de la voie qui sera 1, 2 ou 3. transition.to (playerCar, x = voies [laneID] .x, heure = 50) - déplace la voiture du joueur sur la voie appropriée, retourne vrai - pour indiquer un événement tactile réussi, retourne la fin vraie
sendEnemyCar ()le sendEnemyCar () Cette fonction crée une voiture ennemie, l'assigne à une voie, attache un corps physique à la voiture et utilise Transition vers() envoyer la voiture vers le bas de l'écran. Pour commencer, créons l'objet voiture ennemi.
ennemiCars [ennemisCounter] = display.newImageRect (sceneGroup, "images / ennemisCar"… math.random (1,3)… ".png", 50, 100)
Ensuite, nous définissons les emplacements x et y de la voiture ennemie. Nous créons également un si donc déclaration d'affecter la voiture ennemie à la même voie que la voiture du joueur dans 50% du temps. Cela forcera le joueur à bouger plus souvent et rendra le jeu plus amusant..
ennemiCars [ennemisCounter] .x = voies [math.random (1, # voies)]. x - place la voiture sur une voie aléatoire si (math.random (1,2) == 1), puis ennemisCars [ennemisCounter]. x = voies [ID de voie] .x; end - 50% du temps, placez la voiture ennemie sur la voie réservée au joueur. ennemiCars [ennemisCounter] .y = -125 - place l'ennemi hors de l'écran en haut
Nous devons également faire pivoter la voiture ennemie afin qu'elle soit face au sol et ajouter un type de carrosserie en physique cinématique à la voiture ennemie..
ennemiCars [ennemiCounter]: scale (1, -1) - fait pivoter les autos pour les orienter vers le bas physics.addBody (ennemiCars [ennemiCounter]) - ajoute un corps physique aux autos ennemies ennemies [ennemiCounter] .bodyType = "kinematic" - rendre les corps cinématiques
Avec la voiture ennemie installée, nous utilisons le Transition vers() fonction pour 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 aussi la variable ennemiCounter par 1 garder une trace du nombre de voitures ennemies dans le jeu.
transition.to (ennemiCars [ennemiCounter], y = display.contentHeight + ennemiCars [ennemiCounter] .Hauteur + 20, temps = math.random (2250,3000), onComplete = fonction (auto) display.remove (auto); incrementScore (); fin) - une transition qui déplace la voiture ennemie vers le bas de l'écran. À la fin, l'objet de voiture ennemi est retiré de la partie. ennemiCounter = ennemiCounter + 1 - augmenter le compteur ennemi d'un pour le suivi
Enfin, nous souhaitons que le jeu devienne plus rapide avec le temps. Pour chaque autre voiture envoyée, le jeu recréera le chronomètre et le configurera pour qu'il soit 200 ms plus rapide..
si (ennemiCompte% 2 == 0) alors sendEnemyFrequency = sendEnemyFrequency - 200 if (sendEnemyFrequency < 800) then sendEnemyFrequency = 800; end timer.cancel(tmrToSendCars) tmrToSendCars = timer.performWithDelay(sendEnemyFrequency, sendEnemyCar, 0) end
onPlayAgainTouch ()La fonction la plus courte, onPlayAgainTouch (), ramène le lecteur au menu principal. C’est ce que la mise en œuvre de la onPlayAgainTouch () la fonction ressemble.
-- Autoriser le lecteur à revenir à la fonction locale du menu onPlayAgainTouch () composer.gotoScene ("scene_menu", "fade") - déplace le lecteur à la fin du menu. onGlobalCollision ()le onGlobalCollision () La fonction est utilisée pour détecter les collisions entre deux objets physiques à l’écran. Dans notre jeu, nous n'avons que deux types d'objets de physique:
Lorsque ces deux objets entrent en collision, le jeu arrête tous les timers, les transitions et les écouteurs d'événement. De plus, le jeu affiche une scène de jeu fini qui permet au joueur de jouer à nouveau..
Tout d'abord, nous créons un si donc déclaration qui écoute la a commencé phase.
if (event.phase == "commencé") puis se termine
dans le si donc déclaration, nous arrêtons le jeu. Nous mettons en pause toutes les transitions, annulons le chronomètre, mettons en pause la physique (même si ce n'est pas nécessaire, c'est un bon appel de nettoyage) et retirons l'écouteur d'événements des trois voies. Ajoutez le code suivant à l'intérieur du si donc déclaration:
transition.pause () timer.cancel (tmrToSendCars) physics.pause () pour i = 1,3 voies [i]: removeEventListener ("touch", moveCar) end Une fois les mécanismes du jeu arrêtés, nous ajoutons un rectangle opaque et un objet texte qui dit "Jeu terminé!". Cela donne une bonne indication visuelle que le jeu est terminé.
gameOverBackground = display.newRect (sceneGroup, 0, 0, display.actualContentWidth, display.actualContentHeight) gameOverBackground.x .newText (sceneGroup, "Game Over!", 100, 200, native.systemFontBold, 36) gameOverText.x = display.contentCenterX gameOverText.y = 150 gameOverText: setFillColor (1, 1, 1)
Pour boucler la fonction de collision globale, nous ajoutons le bouton de lecture qui renvoie le joueur au menu..
local playAgain = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank.png", label = "Menu", font = system.defaultFontBold , fontSize = 32, labelColor = default = 0, 0, 0, over = 0, 0, 0, 0.5, onEvent = onPlayAgainTouch playAgain.x = display.contentCenterX playAgain.y = gameOverText.y + 100 sceneGroup: insert (playAgain)
Exécutez l'application pour voir si tout fonctionne comme prévu. Vous devriez pouvoir jouer au jeu. Les voitures ennemies doivent apparaître en haut de l'écran et votre score doit augmenter pour chaque voiture ennemie que vous avez esquivée..
Merci de lire 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 dont vous pouvez améliorer le jeu. Si vous recherchez des suggestions, je vous recommanderais d'ajouter une autre voie, d'ajouter plus de types d'ennemis et même d'ajouter des bonus intéressants..
