Share
Dans cette série de didacticiels, je vais vous montrer comment créer un jeu de défilement infini avec le SDK Corona en créant un jeu Ostrich Runner. Vous en apprendrez plus sur le défilement d'objets, la manipulation de la physique, les commandes tactiles et la détection de collision. L'objectif du jeu est de déplacer le personnage et de collecter des objets pour augmenter le score. Continuer à lire!
En utilisant des graphiques prédéfinis, nous coderons un jeu divertissant à l'aide de Lua et des API Corona SDK.
Le joueur pourra utiliser l'écran tactile de l'appareil pour déplacer le personnage et collecter des objets. Vous pouvez modifier les paramètres dans le code pour personnaliser le jeu..
La première chose à faire est de sélectionner la plate-forme sur laquelle vous souhaitez exécuter notre application. Ainsi, nous pourrons choisir la taille des images que nous utiliserons..
La plateforme iOS présente les caractéristiques suivantes:
Android étant une plate-forme ouverte, il existe de nombreux appareils et résolutions. Voici quelques-unes des caractéristiques d'écran les plus courantes:
Dans ce didacticiel, nous nous concentrerons sur la plate-forme iOS avec la conception graphique, spécialement conçue pour la distribution sur un iPhone / iPod touch, mais le code présenté ici devrait également s'appliquer au développement Android avec le SDK Corona..
Une interface simple et conviviale sera utilisée. L'interface impliquera plusieurs formes, boutons, bitmaps, etc..
Les ressources graphiques d'interface nécessaires à ce tutoriel sont disponibles dans le téléchargement ci-joint..
Selon le périphérique sélectionné, vous devrez peut-être exporter les graphiques dans l'IPP recommandé. Vous pouvez le faire en utilisant votre éditeur d'image préféré.
J'ai utilisé le Ajuster la taille… fonction dans l'application Aperçu sur Mac OS X.
N'oubliez pas de donner un nom descriptif aux images et de les enregistrer dans votre dossier de projet..
Un fichier externe sera utilisé pour que l’application passe en plein écran sur tous les appareils, le config.lua fichier. Ce fichier indique la taille d'écran d'origine et la méthode utilisée pour redimensionner ce contenu si l'application est exécutée dans une résolution d'écran différente..
application = contenu = largeur = 320, hauteur = 480, échelle = "boîte aux lettres",
Maintenant écrivons l'application!
Ouvrez votre éditeur Lua préféré (tout éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique) et préparez-vous à écrire votre superbe application. N'oubliez pas de sauvegarder le fichier sous main.lua dans votre dossier de projet.
Nous structurerons notre code comme s'il s'agissait d'une classe. Si vous connaissez ActionScript ou Java, la structure vous est familière..
Necesary Classes Variables et constantes Déclarer des fonctions méthodes de la classe contructor (fonction principale) (autres fonctions) appelle la fonction principale
display.setStatusBar (display.HiddenStatusBar)
Ce code masque la barre d'état. La barre d'état est la barre en haut de l'écran de l'appareil qui affiche l'heure, le signal et d'autres indicateurs..
Nous utiliserons la bibliothèque Physics pour gérer les collisions. Utilisez ce code pour l'importer:
Accentsconagua
-- Physique physique locale = requiert ('physique') physics.start () 
Un graphique simple est utilisé comme arrière-plan pour l'interface de l'application, la ligne de code suivante le stocke.
-- Graphiques - [Arrière-plan] local bg = display.newImage ('bg.png') 
Ceci est la vue du titre, ce sera le premier écran interactif à apparaître dans notre jeu. Ces variables stockent les composants:
-- [Vue titre] local title local playBtn local creditsBtn local titleView
Cette vue montrera le générique et le copyright du jeu. Cette variable sera utilisée pour le stocker:
-- [CreditsView] crédits locauxVoir
Le niveau fond, il ajoute aussi le score textfield.
-- Contexte de jeu gameBg local
Un message d'instructions apparaîtra au début du jeu, il sera interpolé après 2 secondes..
-- Instructions locales ins
Le graphique du personnage. L’objectif du jeu est de le déplacer de haut en bas sur l’écran afin de récupérer les cerises.
-- Autruche locale autruche
Le graphique cerise. Il y a aussi des mauvaises cerises qui vous feront perdre la partie..
-- Cherrys cherrys local
Les graphiques de pad. Appuyez dessus pour déplacer le personnage.
-- Pad local up local down
C'est l'alerte qui sera affichée quand une mauvaise cerise est collectée. Il va terminer le niveau et terminer le jeu.
-- Alerte locale alertVoir
Nous utiliserons les effets sonores pour améliorer la sensation du jeu. Vous pouvez trouver la musique utilisée dans cet exemple sur playonloop.com. Les sons ont été créés dans as3sfxr.
-- Sons local bgMusic = audio.loadStream ('POL-violet-collines-short.mp3') local cherrySnd = audio.loadSound ('cherry.mp3') local badCherrySnd = audio.loadSound ('badCherry.mp3') Ce sont les variables que nous allons utiliser. Lisez les commentaires dans le code pour en savoir plus..
-- Variables local timerSrc - ajouter un minuteur cherry local yPos = 108, 188, 268 - une autruche possible se positionne à la vitesse locale = 5 - une vitesse cerise locale speedTimer - un minuteur permettant de modifier la vitesse du cherrys
Déclarer toutes les fonctions comme local au début.
-- Fonctions local Main = startButtonListeners local = showCredits local = hideCredits local = showGameView local = gameListeners local = local startGame = local createCherry = localPlayer = mise à jour locale = onCollision local = alerte locale =
Nous allons ensuite créer la fonction qui initialisera toute la logique du jeu:
fonction Main () - code… fin
Maintenant, nous plaçons TitleView dans la scène et appelons une fonction qui ajoutera le robinet les auditeurs aux boutons.
function Main () titleBg = display.newImage ('title.png', 113, 43) playBtn = display.newImage ('playBtn.png', 219, 160) creditsBtn = display.newImage ('creditsBtn.png', 205, 223) titleView = display.newGroup (bg, titleBg, playBtn, creditsBtn) startButtonListeners ('add') end Cette fonction ajoute les auditeurs nécessaires à la TitleView boutons.
function startButtonListeners (action) if (action == 'add'), puis playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) sinon playBtn: removeEventListener ('tap', showGameView) 'tap', showCredits) end end L'écran des crédits s'affiche lorsque l'utilisateur appuie sur le bouton À propos de. UNE robinet écouteur est ajouté à la vue des crédits pour le supprimer.
function showCredits: tap (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', -130, display.contentHeight-140) transition.to (creditsView, heure = 300, x = 65, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Lorsque l'écran des crédits est exploité, il sera interpolé hors de la scène et supprimé.
function hideCredits: tap (e) playBtn.isVisible = vrai creditsBtn.isVisible = vrai transition.to (creditsView, heure = 300, y = display.contentHeight + creditsView.height, onComplete = fonction () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil fin) fin Quand le Jouer appuyez sur le bouton, la vue du titre est interpolée et supprimée pour révéler la vue du jeu. Il y a beaucoup de parties impliquées dans cette vue, donc nous les diviserons dans les prochaines étapes.
function showGameView: tapez sur (e) transition.to (titleView, heure = 300, x = -titleView.height, onComplete = fonction () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Les lignes suivantes ajoutent les instructions de jeu.
-- Instructions Message ins = display.newImage ('ins.png', 187, 199) Cette partie crée la partition TextField sur la scène.
-- TextFields scoreTF = display.newText ('0', 258, 26.5, 'Feutre de marqueur', 16) scoreTF: setTextColor (184, 165, 104) Ajouter le personnage d'autruche au niveau.
-- Autruche autruche = display.newImage ('ostrich.png', 11, 180) Ce sont les contrôles à l'écran pour le jeu.
-- Pad up = display.newImage ('up.png', 418, 20) down = display.newImage ('down.png', 418, 258) up.name = 'up' down.name = 'down' Ensuite, nous ajoutons de la physique aux objets du jeu. Nous créons également un Table pour les cerises et appelez le gameListeners une fonction.
-- Physique.addBody (autruche) autruche.isSensor = true cherrys = display.newGroup () gameListeners ('add') end Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add') puis ins: addEventListener ('tap', startGame) Durée: addEventListener ('enterFrame', mise à jour): addEventListener ('tap', movePlayer) vers le bas: addEventListener (' appuyez sur ', movePlayer) speedTimer = timer.performWithDelay (5000, augmentez la vitesse, 5) sinon Durée: removeEventListener (' enterFrame ', mise à jour): removeEventListener (' tap ', movePlayer) down: removeEventListener (' tap ', movePlayer) annuler (timerSrc) timerSrc = nil timer.cancel (speedTimer) speedTimer = nil end end Dans cette partie, nous supprimons le message d'instructions, commençons à jouer la musique de fond du jeu et créons une minuterie qui ajoutera une cerise toutes les 400 millisecondes..
function startGame () ins: removeEventListener ('tap', startGame) display.remove (ins) audio.play (bgMusic, boucles = -1, canal = 1) timerSrc = timer.performWithDelay (400, createCherry, 0) fin L'extrait de code suivant crée une cerise normale ou mauvaise en fonction d'un nombre aléatoire et la place à l'écran. L'objet résultant est ajouté au moteur physique pour vérifier les collisions.
fonction createCherry () local cherry local rnd = math.floor (math.random () * 4) + 1 if (rnd == 4) alors cherry = display.newImage ('badCherry.png', display.contentWidth, yPos [math .floor (math.random () * 3) +1]) cherry.name = 'mauvais' sinon cherry = display.newImage ('cherry.png', display.contentWidth, yPos [math.floor (math.random () * 3) +1]) cherry.name = extrémité 'cherry' - Physique physique de cerise.addBody (cherry) cherry.isSensor = vraie cherry: addEventListener ('collision', onCollision) cherrys: insert (cherry) end Nous modifions la position Y de l’autruche à l’aide du clavier de commande créé précédemment.
function movePlayer (e) if (e.target.name == 'up' et autruche.y ~ = 122) alors autruche.y = autruche.y - 80 elseif (e.target.name == 'down' et autruche. y ~ = 282) puis autruche.y = autruche.y + 80 end end
Une minuterie augmentera la vitesse toutes les 5 secondes. Une icône est affichée pour alerter le joueur du changement de vitesse.
Fonction augmentationSpeed () vitesse = vitesse + 2 - Icône local icon = display.newImage ('speed.png', 204, 124) transition.from (icône, time = 200, alpha = 0.1, onComplete = function () timer .performWithDelay (500, function () transition.to (icône, heure = 200, alpha = 0.1, onComplete = fonction () display.remove (icône) icon = nil fin) fin) fin) fin Cette fonction gère le mouvement des cerises. Il utilise la variable de vitesse pour déterminer combien de pixels déplacer la cerise à chaque image.
function update () if (cherrys ~ = nil) alors pour i = 1, cherrys.numChildren ne cherrys [i] .x = cherrys [i] .x - vitesse fin fin fin
Maintenant, vérifions si la cerise entre en collision avec l'autruche en utilisant le code suivant. Le score augmente quand une cerise ordinaire entre en collision et une alerte est appelée quand une mauvaise cerise est touchée. Dans les deux cas, la cerise est supprimée et un son est joué.
fonction onCollision (e) e.target:removeEventListener('collision ', onCollision) display.remove (e.target) if (e.target.name ==' cherry ') puis --Score scoreTF.text = tostring (toner ( scoreTF.text) + 50) audio.play (cherrySnd) - Cherry elseif (e.target.name == 'bad') puis audio.play (badCherrySnd) alert () end end La fonction d'alerte crée une vue d'alerte, l'anime puis termine le jeu..
function alert () audio.stop (1) audio.dispose () bgMusic = nil gameListeners ('rmv') alertView = display.newImage ('alert.png', 160, 115) transition.from (alertView, heure = 300 , xScale = 0.5, yScale = 0.5) score local = display.newText (scoreTF.text, (display.contentWidth * 0.5) - 12, (display.contentHeight * 0.5) + 5, 'Feutre de marqueur', 18) score: setTextColor (184, 165, 104) - Patientez 100 ms avant d'arrêter la physique timer.performWithDelay (1000, function () physics.stop () end, 1) end Afin de démarrer le jeu, le Principale la fonction doit être appelée. Avec le code ci-dessus en place, nous le ferons ici:
Principale()
Le fichier Default.png est une image qui s’affiche dès le démarrage de l’application pendant que l’iOS charge les données de base pour afficher l’écran principal. Ajoutez cette image dans le dossier source de votre projet, elle sera automatiquement ajoutée par le compilateur Corona..
En utilisant les graphiques que vous avez créés précédemment, vous pouvez maintenant créer une belle et jolie icône. La taille de l'icône de l'iPhone non rétine est 57x57px, mais la version de la rétine est 114x114px et le magasin iTunes nécessite une version de 512x512px. Je suggère de créer d'abord la version 512x512, puis de la réduire pour les autres tailles.
Il n'est pas nécessaire que les angles soient arrondis ou que la lumière soit transparente, iTunes et l'iPhone le feront pour vous..
Il est temps de faire le test final. Ouvrez le simulateur Corona, accédez au dossier de votre projet, puis cliquez sur Ouvrir. Si tout fonctionne comme prévu, vous êtes prêt pour l'étape finale!
Dans le simulateur Corona, accédez à Fichier> Construire et sélectionnez votre appareil cible. Remplissez les données requises et cliquez sur construire. Attendez quelques secondes et votre application sera prête pour le test de l'appareil et / ou la soumission pour la distribution.!
Dans cette série, nous avons appris sur le comportement physique, les écouteurs d'écoute et les collisions. Ces compétences peuvent être vraiment utiles dans un grand nombre de jeux!
Expérimentez avec le résultat final et essayez de créer votre version personnalisée du jeu.!
J'espère que vous avez aimé ce tutoriel et que vous le trouvez utile. Merci pour la lecture!
