Share
Ceci est le deuxième volet de notre didacticiel Corona SDK Lunar Lander. Dans le tutoriel d'aujourd'hui, nous allons ajouter à notre interface et à l'interaction du jeu. Continuer à lire!
Assurez-vous de vérifier la première partie de la série pour bien comprendre et préparer ce tutoriel..
Cette fonction ajoute les auditeurs nécessaires à la TitleView boutons:
Accentsconagua
function startButtonListeners (action) if (action == 'add') puis titleBg: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) sinon titleBg: removeEventListener ('tap', showGameView), autre que titleBg: removeEventListener ('tap', showGameView) 'tap', showCredits) end end L’écran des crédits s’affiche lorsque l’utilisateur appuie sur le bouton À propos de, un bouton robinet écouteur est ajouté à la vue des crédits pour supprimer cette.
function showCredits: tap (e) 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) fin) fin Lorsque l'écran des crédits est exploité, il sera interpolé hors de la scène et supprimé.
function hideCredits: tap (e) creditsBtn.isVisible = true transition.to (creditsView, heure = 300, y = display.contentHeight + creditsView.height, onComplete = fonction () creditsView: removeEventListener ('tap', hideCredits). remove (creditsView) creditsView = nil fin) fin Quand le Début 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) Ce code place les lunes dans la scène.
-- Lunes m1 = display.newImage ('moon.png', 386, 156) m2 = display.newImage ('moon.png', 252, 99) m3 = display.newImage ('moon.png', 131, 174) m1 .name = 'moon' m2.name = 'moon' m3.name = 'moon' Une plus grande lune est utilisée comme point d'atterrissage. Utilisez le code suivant pour le placer:
-- Big Moon bigM = display.newImage ('moonBig.png', 10, 53) bigM.name = 'moon' Le point d'atterrissage est représenté par une flèche. Une propriété de nom est créée pour aider à identifier ces éléments en cas de collision..
-- Flèche flèche = display.newImage ('arrow.png', 44, 24) arrow.name = 'objectif' Ensuite, nous ajoutons la fusée. Ce sera notre élément contrôlé par l'utilisateur.
-- Rocket rocket = display.newImage ('rocket.png', 409.5, 114) Le code suivant placera les étoiles sur l'écran:
-- Etoiles s1 = display.newImage ('star.png', 341, 146) s2 = display.newImage ('star.png', 273, 48) s3 = display.newImage ('star.png', 190, 234) s4 = display.newImage ('star.png', 37, 135) s1.name = 'étoile' s2.name = 'étoile' s3.name = 'étoile' s4.name = 'étoile' Afin de déplacer la fusée à l'écran, nous aurons besoin d'une manette de jeu, ce code prendra soin de cela. UNE robinet Un auditeur sera ajouté plus tard à chaque bouton pour gérer le mouvement..
-- Contrôles up = display.newImage ('dirBtn.png', 404, 246) left = display.newImage ('dirBtn.png', 10, 246) right = display.newImage ('dirBtn.png', 84, 246) .name = 'up' left.name = 'left' right.name = 'right' up.rotation = 90 right.rotation = 180 Ici, nous ajoutons la physique aux éléments graphiques.
-- Ajouter Physique physique.addBody (m1, 'statique', rayon = 35) physics.addBody (m2, 'statique', rayon = 35) physics.addBody (m3, 'statique', rayon = 35) physics.addBody (bigM, 'statique', radius = 40) physics.addBody (flèche, 'statique') physics.addBody (fusée, 'dynamique') rocket.isFixedRotation = true rocket.isAwake = false --précipse son d'explosion physics.addBody (s1, 'statique', radius = 12) physics.addBody (s2, 'statique', radius = 12) physics.addBody (s3, 'statique', radius = 12) physics.addBody (s4, 'static', radius = 12) arrow.isSensor = true s1.isSensor = true s2.isSensor = true s3.isSensor = true s4.isSensor = true
Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners () up: addEventListener ('touch', movePlayer) left: addEventListener ('touch', movePlayer) right: addEventListener ('touch', movePlayer) Durée d'exécution: addEventListener ('enterFrame', update) ', onCollision) end La variable de direction est modifiée par cette fonction, la fusée ira dans la direction indiquée.
function movePlayer (e) if (e.phase == 'commencé' et e.target.name == 'up') alors dir = 'up' elseif (e.phase == 'terminé' et e.target.name = = 'up') puis dir = 'none' elseif (e.phase == 'commencé' et e.target.name == 'gauche') puis dir = 'left' elseif (e.phase == 'commencé' et e.target.name == 'right') puis dir = 'right' elseif (e.phase == 'terminé' et e.target.name == 'left') puis dir = 'none' elseif (e.phase == 'terminé' et e.target.name == 'right') alors dir = 'none' end end
Ces lignes déplacent la fusée selon la direction établie par le Déplacer le joueur fonction créée à l'étape 13.
mise à jour de la fonction (e) - Mouvement de fusée si (dir == 'up'), puis fusée: setLinearVelocity (0, -80) elseif (dir == 'left') puis fusée: setLinearVelocity (-100, 0) elseif (dir == 'right') puis rocket: setLinearVelocity (100, 0) end
Le code suivant écoute une variable définie sur true lorsqu'une collision se produit entre la fusée et la lune, la valeur de la variable est modifiée par le onCollision fonction qui sera créée plus tard.
Lorsque cela est vrai, la fusée sera placée à sa position d'origine et mise en état de veille pour éviter une collision avec la lune en dessous.
-- Collision roquette-lune si (hitMoon) alors rocket.x = 421.5 rocket.y = 134 hitMoon = false rocket.isAwake = false fin
Une méthode similaire est utilisée dans la détection de collision fusée-étoile.
-- Collision Rocket-Star si (hitStar) puis display.remove (starHit) étoiles = étoiles + 1 hitStar = fausse fin
Le niveau sera terminé lorsque le joueur aura rassemblé les quatre étoiles et atterri sur la plus grande lune. Le code suivant gère ce.
-- Objectif si (hitGoal et étoiles == 4), puis rocket.x = 52 rocket.y = 35 physics.stop () display.remove (flèche) audio.play (objectif) hitGoal = false complete = display.newImage ('complete. png ') elseif (hitGoal et les étoiles ~ = 4) puis hitGoal = false end Cette fonction est activée lorsque la fusée entre en collision avec un autre corps. Le nom du corps est ensuite vérifié pour effectuer la bonne action. Fondamentalement, un son est joué et une variable est définie sur true (pour le mettre à jour fonction à voir) selon le nom de l'autre corps.
fonction onCollision (e) if (e.other.name == 'moon') puis hitMoon = true audio.play (explo) elseif (e.other.name == 'star') puis audio.play (star) starHit = e.other hitStar = true elseif (e.other.name == 'goal') puis hitGoal = true end 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 complémenteur Corona..
En utilisant les graphiques que vous avez créés auparavant, 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.!
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é cette série de tutoriels et que vous l'avez trouvé utile. Merci pour la lecture!
