Share
Ceci est le deuxième volet de notre didacticiel de jeu Bubble Popping Corona SDK. Dans le tutoriel d'aujourd'hui, nous allons ajouter à notre interface en codant 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, un bouton 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 + 30)) 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, nous allons donc 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) Ensuite, nous ajoutons les murs à la scène. Ils sont créés à l'aide de l'API de dessin..
-- Murs à gauche = display.newLine (0, 240, 0, 720) à droite = display.newLine (320, 240, 320, 720) en haut = display.newLine (160, 0, 480, 0) en bas = display.newLine (160 , 480, 480, 480)
Cette partie crée cinq bulles sur l'écran à une position aléatoire.
bubbles = display.newGroup () pour i = 1, 5 faire rx local = 21 + math.floor (math.random () * (display.contentWidth - 42)) ry local = 21 + math.floor (math.random ( ) * (display.contentHeight - 42)) local b = display.newImage ('bubble.png', rx, ry) b.name = 'bubble' Ici, nous ajoutons de la physique à notre nouvelle bulle.
-- Physique des bulles physics.addBody (b, 'dynamique', rayon = 21, bounce = 1) b: setLinearVelocity (100, 100) bubbles: insert (b) end
Et faire la même chose avec nos murs.
-- Murs Physics physics.addBody (gauche, 'statique') physics.addBody (droite, 'statique') physics.addBody (haut, 'statique') physics.addBody (bas, 'statique')
Maintenant nous ajoutons les champs de texte bulles, bulles sautées et requis.
-- Level TextField level = display.newImage ('level.png', 2, 0) levelN = display.newText ('1', 54, 5, native.systemFont, 15) levelN: setTextColor (255, 255, 255) - Champ de texte sauté popped = display.newImage ('popped.png', 126, 0) poppedN = display.newText ('0', 187, 5, native.systemFont, 15) poppedN: setTextColor (255, 255, 255) - Obligatoire TextField required = display.newImage ('required.png', 231, 0) requiredN = display.newText ('4', 306, 5, native.systemFont, 15) requiredN: setTextColor (255, 255, 255) bullets = display.newGroup () end Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add'), puis bg: addEventListener ('tap', createBullets) else bg: removeEventListener ('tap', createBullets) Durée d'exécution: removeEventListener ('enterFrame', update) end end Ce code est exécuté lorsque l’arrière-plan est exploité..
Tout d'abord, nous créons les graphiques de balle.
function createBullets (e) pour i = 1, 4 local bullet = display.newImage ('bullet.png', e.x, e.y) Ensuite, nous lui donnons une direction en définissant la vitesse linéaire.
-- Définissez la direction si (i == 1) puis bullet.x = bullet.x - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (-150, 0) end --left if ( i == 2) puis bullet.x = bullet.x + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (150, 0) end --right if (i == 3) then bullet.y = bullet.y - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, -150) end --up if (i == 4), puis bullet.y = bullet.y + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, 150) end - down bullet: addEventListener ('collision', onCollision) puces: insert (bullet) bg: removeEventListener ('tap', createBullets) end Durée d'exécution: addEventListener ('enterFrame', update) end Les collisions sont gérées par la fonction suivante. Un son est joué, le score augmente et supprime la bulle de l'écran.
function onCollision (e) if (e.other.name == 'bubble'), puis audio.play (pop) display.remove (e.other) poppedN.text = tostring (tonumber (poppedN.text) + 1) end end
Ce code va supprimer toute balle qui est hors de vue.
Mise à jour de la fonction (e) - Recherche de puces hors scène pour i = 1, bullets.numChildren do if (puces [i] ~ = nul), puis si (puces [i] .x < 0 or bullets[i].x > 320 ou des balles [i] .y < 0 or bullets[i].y > 480) puis display.remove (ballets [i]) fin fin fin
Ici, nous vérifions si les bulles éclatées ont atteint la quantité requise et appelons un gagner alerte si vrai.
-- Vérifiez si les bulles requises sont apparues si (bullets.numChildren == 0 et numero de ton (poppedN.text)> = tonumber (requiredN.text)), puis alerte ('win') elseif (bullets.numChildren == 0 et numero de Ton (poppedN.). texte) < tonumber(requiredN.text)) then alert('lose') end end La fonction d'alerte affiche un message en fonction du type d'alerte appelée (niveau complet ou échoué).
fonction alert (action) gameListeners ('rmv') if (action == 'win'), puis local alertView = display.newImage ('won.png', 80, display.contentHeight * 0,5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) else local alertView = display.newImage ('lost.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) 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!
