Il s’agit du deuxième volet de notre didacticiel Corona SDK Sound Memory. 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 Titre Title 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
le crédits l'écran s'affiche lorsque l'utilisateur appuie sur le Sur bouton, un écouteur de prise 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', 0, display.contentHeight) lastY = titre.y transition.to (titre, heure = 300 , y = display.contentHeight * 0.5 - title.height - 25) transition.to (creditsView, heure = 300, y = display.contentHeight * 0.5 + creditsView.height, onComplete = fonction () creditsView: addEventListener ('tap ', hideCredits) fin) fin
Quand le crédits l'écran est mis sur écoute, il va être interpolé hors de la scène et supprimé.
Fonction hideCredits: tap (e) transition.to (creditsView, heure = 300, y = display.contentHeight, onComplete = fonction () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits) display .remove (creditsView) creditsView = nil fin) transition.to (titre, heure = 300, y = dernierY); 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 allons les séparer 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 images de bouton de jeu dans la scène.
-- Ajouter des carrés r.gfx = display.newImage ('red.png', 75, 155) g.gfx = display.newImage ('green.png', 165, 155) ye.gfx = display.newImage ('yellow.png ', 75, 245) b.gfx = display.newImage (' blue.png ', 165, 245) r.gfx.name =' r 'g.gfx.name =' g 'ye.gfx.name =' vous 'b.gfx.name =' b '
Les lignes suivantes ajouteront le instructions message, affichez-le pendant deux secondes, puis supprimez-le en fondu.
-- Instructions Message local ins = display.newImage ('message.png', 61, 373) transition.from (ins, heure = 200, alpha = 0,1, onComplete = fonction () timer.performWithDelay (2000, transition function (). to (ins, heure = 200, alpha = 0.1, onComplete = fonction () display.remove (ins) ins = nul gameTimer = timer.performWithDelay (500, playLevel, #currentLevel) end) end) end)
Ce bouton est utilisé pour tester la saisie de l'utilisateur et s'assurer qu'elle est égale au niveau sonore. C'est invisible par défaut.
-- Bouton de vérification check = display.newImage ('checkBtn.png', 135, 406) check.isVisible = false
Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add') puis r.gfx: addEventListener ('tap', onTap) g.gfx: addEventListener ('tap', onTap) ye.gfx: addEventListener ('tap', onTap ) b.gfx: addEventListener ('tap', onTap) cocher: addEventListener ('tap', checkInput) else r.gfx: removeEventListener ('tap', onTap) g.gfx: removeEventListener ('tap', onTap) ye. gfx: removeEventListener ('tap', onTap) b.gfx: removeEventListener ('tap', onTap) vérifiez: removeEventListener ('tap', checkInput) gameTimer = nil end end
Cette fonction lit le niveau actuel variable pour déterminer quel niveau jouer. Il utilise également une transition pour pointer visuellement le bouton associé au son. Lorsque la séquence de niveau est terminée, le vérifier le bouton devient visible.
fonction playLevel () if (fois <= #currentLevel) then transition.from(currentLevel[times].gfx, time = 200, alpha = 0.1) audio.play(currentLevel[times].s) times = times + 1 end if(times == #currentLevel+1) then check.isVisible = true gameListeners('add') end end
Appuyez sur les boutons du centre pour appeler cette fonction. Il va jouer un son et enregistrer sa valeur dans le userInput table. Ce tableau sera utilisé dans la prochaine fonction pour comparer les sons.
function onTap (e) if (e.target.name == 'r') alors table.insert (userInput, r.gfx) audio.play (rs) transition.from (e.target, heure = 200, alpha = 0,1) elseif (e.target.name == 'g') puis table.insert (userInput, g.gfx) audio.play (gs) transition.from (e.target, heure = 200, alpha = 0.1 ) elseif (e.target.name == 'ye') puis table.insert (userInput, ye.gfx) audio.play (ye.s) transition.from (e.target, heure = 200, alpha = 0.1 ) elseif (e.target.name == 'b') puis table.insert (userInput, b.gfx) audio.play (bs) transition.from (e.target, heure = 200, alpha = 0.1) fin fin
Cette fonction compare les noms des boutons pressés à la table de niveau et appelle une alerte avec le message correspondant..
function checkInput (e) check.isVisible = false pour i = 1, #currentLevel do if si (userInput [i] .name == currentLevel [i] .gfx.name) puis correct = correct + 1 fin si (correct == #currentLevel) puis alert ('win') sinon alert ('lost') end end
le Alerte function crée une vue d'alerte, l'anime et met fin au jeu.
fonction alert (action) gameListeners ('rmv') if (action == 'lost') puis alertView = display.newImage ('lost.png', 110, 218) else alertView = display.newImage ('win.png', 110, 218) end transition.from (alertView, heure = 200, alpha = 0.1) fin
Afin de démarrer le jeu, le Principale la fonction doit être appelée. Nous ferons cela ici avec le code ci-dessus en place.
Principale()
le Default.png fichier est une image qui sera affichée dès le démarrage de l'application pendant que iOS charge les données de base pour afficher l'écran principal. Ajoutez cette image dans le dossier source de votre projet. il sera automatiquement ajouté par le corrélateur Corona.
En utilisant les graphiques que vous avez créés précédemment, vous pouvez maintenant créer une belle icône. La taille des icônes pour un iPhone sans affichage Retina est de 57x57px, mais la version de la rétine est de 114x114px et le magasin iTunes nécessite une version de 512x512px. Je recommande de créer d'abord la version 512x512 et de réduire les tailles.
iTunes et l'iPhone créeront des angles arrondis et un éclat transparent.
Il est temps de faire le test final. Ouvrez le simulateur Corona, accédez au dossier de votre projet et cliquez sur Ouvrir. Si tout fonctionne comme prévu, vous êtes prêt pour l'étape finale!
Dans le simulateur Corona, accédez à Fichier et construction 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 le chargement du son, la lecture et la comparaison de tables. Ce sont des compétences qui peuvent être très utiles dans un grand nombre de jeux.
Vous pouvez expérimenter le résultat final et essayer 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ée utile. Merci pour la lecture!