Share
Ceci est le deuxième volet de notre didacticiel Corona SDK Air Hockey Game. Dans le tutoriel d'aujourd'hui, nous allons ajouter à notre interface et coder 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 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', 0, display.contentHeight) lastY = titreBg.y transition.to (titleBg, heure = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 50)) transition.to (creditsView, heure = 300, y = (display.contentHeight * 0.5) + 35, onComplete = fonction () 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: tapez (e) transition.to (creditsView, heure = 300, y = display.contentHeight + 25, onComplete = fonction () creditsBtn.isVisible = true playBtn.isVisible = vrai creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); 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) Ici, nous créons 6 lignes qui seront utilisées comme murs de table.
-- Murs gauche = display.newLine (-1, display.contentHeight * 0.5, -1, display.contentHeight * 2) right = display.newLine (display.contentWidth + 1, display.contentHeight * 0.5, display.contentWidth + 1, display .contentHeight * 2) topLeft = display.newLine (0, -1, display.contentWidth - 120, -1) topRight = display.newLine (display.contentWidth, -1, display.contentWidth * 1.6, -1) bottomLeft = display .newLine (0, display.contentHeight, display.contentWidth - 120, display.contentHeight) bottomRight = display.newLine (display.contentWidth, display.contentHeight, display.contentWidth * 1.6, display.contentHeight)
Ce code place le fond du jeu dans la scène.
-- Jeu Bg gameBg = display.newImage ('gameBg.png') Ajoutez le lecteur avec le code suivant:
-- Player player = display.newImage ('paddle1.png', display.contentCenterX-25, display.contentHeight-100) La palette Enemy est créée par cette ligne:
-- Ennemi ennemi = display.newImage ('paddle2.png', display.contentCenterX-25, 10) Ensuite, nous ajoutons les partitions TextFields pour les utiliser plus tard.
-- Scores ennemisScore = display.newText ('0', 289, 206, 'Courier-Bold', 20) ennemisScore: setTextColor (227, 2, 2) playerScore = display.newText ('0', 289, 240, 'Courier- Gras ', 20) playerScore: setTextColor (227, 2, 2) C'est la rondelle, elle apparaîtra au centre de la scène.
-- Puck puck = display.newImage ('puck.png', display.contentCenterX-20, display.contentCenterY-20) Enfin, nous ajoutons la physique aux éléments graphiques. Nous avons également défini une propriété Puck sur false pour empêcher sa rotation..
-- Définissez Physics.addBody physics.add (à gauche, «statique») physics.addBody (à droite, «static») physics.addBody (topLeft, «static») physics.addBody (bottomLeft, «statique») physics.addBody (topRight, 'static ') physics.addBody (bottomRight,' static ') physics.addBody (puck,' dynamic ', radius = 20, bounce = 0.4) puck.isFixedRotation = vrai physics.addBody (joueur,' dynamique ', radius = 25) physics.addBody (ennemi, 'statique', radius = 25) gameListeners ('add') end La fonction suivante gère le glisser joueur.
Il utilise une méthode différente de celle des didacticiels précédents car nous souhaitons faire glisser l'objet sans perdre ses interactions physiques. Vous pouvez en savoir plus sur le site Web Corona.
fonction dragBody (événement) gameUI.dragBody (événement, maxForce = 20000, fréquence = 10, dampingRatio = 0.2, center = true) fin
Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add'), puis joueur: addEventListener ('touch', dragBody) Durée: addEventListener ('enterFrame', update) timerSrc = timer.performWithDelay (100, moveEnemy, 0) autre joueur: removeEventListener ('touch', dragBody) Durée d'exécution: removeEventListener ('enterFrame', update) timer.cancel (timerSrc) timerSrc = nil end end Une minuterie est utilisée pour déplacer l'ennemi, cela créera un délai permettant à l'ennemi de manquer de frapper le puck.
function moveEnemy (e) - Déplace Ennemy si (puck.y < display.contentHeight * 0.5) then transition.to(enemy, time = 300, x = puck.x) end end
La fonction de mise à jour exécute chaque image.
Cette partie du code vérifie si le puck a quitté la scène à travers l'espace où aucun mur n'a été ajouté. Si true, cela augmente le champ de texte de score approprié.
function update () - Marquer si (puck.y> display.contentHeight) alors ennemiScore.text = tostring (numéro de ton (ennemiScore.text) + 1) elseif (puck.y < -5) then playerScore.text = tostring(tonumber(playerScore.text) + 1) end
Ces lignes réinitialisent la position de la rondelle à la sortie de la scène et jouent un son de but.
-- Réinitialiser la position de la rondelle si (puck.y> display.contentHeight ou puck.y < -5) then puck.x = display.contentCenterX puck.y = display.contentCenterY puck.isAwake = false audio.play(bell) end
Ici, nous empêchons le joueur de rentrer dans la partie ennemie de la scène.
-- Gardez la pagaie du côté du joueur si (player.y < display.contentWidth - 60) then player.y = display.contentWidth - 60 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 compilateur 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!
