Share
Ceci est le deuxième volet de notre tutoriel de jeu Corona SDK Hundreds. 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 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 lastX = titreBg.x transition.to (titreBg , time = 300, y = (display.contentHeight * 0.5) - (titleBg.height + 20), x = (display.contentWidth * 0.5) - (titleBg.width * 0.5) - 10) transition.to (creditsView , time = 300, y = (display.contentHeight * 0.5) + 35, 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: 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, x = lastX); 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 l'image de fond du jeu dans la scène.
-- Arrière-plan du jeu display.remove (bg) gameBg = display.newImage ('gameBg.png') 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 cercles sur l’écran en une position aléatoire, la je variable est utilisé pour multiplier une constante qui définira la couleur des cercles en la rendant plus claire à chaque fois. Un champ de texte est également créé et les deux sont conservés dans un groupe pour les déplacer ensemble.
-- Cercles cercles = display.newGroup () local color = 0 pour i = 1, 5 local rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) local ry = 21 + math.floor (math.random () * (display.contentHeight - 42)) local cg = display.newCircle (rx, ry, 21) étiquette locale = display.newText ('0', cg.x-4.2, cg.y-12.2 , native.systemFontBold, 13) cg.fillColor = couleur + (i * 40) cg: setFillColor (cg.fillColor) local c = display.newGroup (cg, étiquette) c.pressed = false c.name = 'c' c .radius = 21 Ici, nous ajoutons la physique à notre nouveau cercle.
-- Physique du cercle physics.addBody (c, 'dynamique', rayon = 21, bounce = 1) c: setLinearVelocity (100, 100) cercles: insert (c) 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 de la partition.
-- Score Score TextField = display.newText ('0', 257, 4, native.systemFont, 15) score: setTextColor (150, 150, 150) total local = display.newText ('/ 100', 267, 4, natif. systemFont, 15) total: setTextColor (150, 150, 150) gameListeners ('add') end Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add'), puis pour i = 1, 5 les cercles [i]: addEventListener ('touch', onTouch) les cercles [i]: addEventListener ('collision', onCollision) finissent else pour i = 1, 5 ne cercles [i]: removeEventListener ('touch', onTouch) cercles [i]: removeEventListener ('collision', onCollision) fin fin Ce code fonctionne quand le cercle est touché.
D'abord on augmente le score.
function onTouch (e) if (e.phase == 'commencé'), puis e.target.pressed = true - Augmenter le compteur score.text = tostring (tonumber (score.text) + 2)
Puis la taille du cercle. Le cercle grandira quand le doigt ne sera plus dessus.
-- Augmenter la taille e.target.radius = e.target.radius + 2
Change la couleur du noir / gris au rouge.
-- Changer la couleur e.target [1]: setFillColor (224, 11, 0)
Nous recréons le cercle et ses propriétés lorsque l'événement tactile est terminé.
if (e.phase == 'terminé') alors e.target.pressed = false - Met à jour le numéro physique de la physique = tostring (numéro (e.target [2] .text) +2) local r = e.target.radius local cg = display.newCircle (e.target.x, e.target.y, r) étiquette locale = display.newText (nombre, cg.x-4.2, cg.y-12.2, native.systemFontBold, 13) cg: setFillColor (e.target [1] .fillColor) cg.fillColor = e.target [1] .fillColor local c = display.newGroup (cg, étiquette) c.pressed = false c.name = 'c' c.radius = r cercles: remove (e.target) physics.addBody (c, 'dynamique', rayon = r, bounce = 1) c: setLinearVelocity (100, 100) c: addEventListener ('touch', onTouch) c: addEventListener ('collision', onCollision) cercles: insérer (c) - Déplacer un champ de texte lorsque le nombre est égal à 2 chiffres si (numéro de numérotation (nombre)> 9), puis libellé.x = libellé.x - 5 fin Ici, nous vérifions si le score a atteint 100 points et appelons un gagner alerte si vrai.
-- Vérifiez si le score atteint 100 si (nombre de ton (score.text)> = 100), alors bg local = display.newImage ('gameBg.png') transition.from (bg, heure = 500, alpha = 0, onComplete = alerte ('win')) end end end Le jeu est perdu lorsqu'un cercle pressé entre en collision avec un autre. Les auditeurs sont retirés et un perdu alerte s'appelle.
function onCollision (e) if (e.target.pressed et e.other.name == 'c') then - Attendez 0,1 seconde pour arrêter la minuterie physique timer.performWithDelay (100, function () physics.stop () end, 1 ) local r = e.target.radius local c = display.newCircle (e.target.x, e.target.y, r) c: setFillColor (224, 11, 0) gameListeners ('rmv') transition.to ( c, time = 700, xScale = 25, yScale = 25, onComplete = alert ('lost')) end end La fonction d'alerte affiche un message en fonction du type d'alerte appelé.
fonction alert (action) if (action == 'win'), puis local alertView = display.newImage ('won.png', 10, display.contentHeight * 0,5 - 41) transition.from (alertView, heure = 300, y = -82, delay = 500) sinon local alertView = display.newImage ('lost.png', 10, display.contentHeight * 0.5 - 41) transition.from (alertView, heure = 300, y = -82, délai = 500) fin fin 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!
