Share
Ceci est le deuxième volet de notre tutoriel sur le jeu Corona SDK Pinball. Dans le tutoriel d'aujourd'hui, nous allons ajouter à notre interface, puis 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..
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.
Accentsconagua
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 plaçons le mur de gauche, rappelez-vous qu'il a été divisé en plusieurs parties pour appliquer la physique plus tard.
-- Parties du mur gauche l1 = display.newImage ('l1.png') l2 = display.newImage ('l2.png', 0, 214) l3 = display.newImage ('l3.png', 0, 273) l4 = afficher .newImage ('l4.png', 0, 387) Ce code place le bon mur en utilisant la même méthode.
-- Parties du mur droit r1 = display.newImage ('r1.png', 238, 0) r2 = display.newImage ('r2.png', 274, 214) r3 = display.newImage ('r3.png', 291, 273 ) r4 = display.newImage ('r4.png', 195, 387) Ajoutez la balle et HitLines avec le code suivant:
ball = display.newImage ('ball.png', display.contentWidth * 0,5, 0) hitLine1 = display.newImage ('hitLine.png', 70, 28) hitLine2 = display.newImage ('hitLine.png', 110, 28) Les cibles sont ajoutées en utilisant les lignes suivantes:
-- Hit balles hitBall1 = display.newImage ('hitBall.png', 160, 186) hitBall2 = display.newImage ('hitBall.png', 130, 236) hitBall3 = display.newImage ('hitBall.png', 187, 236) hitBall1.name = 'hBall' hitBall2.name = 'hBall' hitBall3.name = 'hBall' Ensuite, nous ajoutons les palettes et leur donnons un nom pour pouvoir les utiliser plus tard..
pLeft = display.newImage ('paddleL.png', 74, 425) pRight = display.newImage ('paddleR.png', 183, 425) pLeft.name = 'leftPaddle' pRight.name = 'rightPaddle' Ces boutons vont contrôler les palettes, ajoutez-les en utilisant ce code:
lBtn = display.newImage ('lBtn.png', 20, 425) rBtn = display.newImage ('rBtn.png', 260, 425) lBtn.name = 'left' rBtn.name = 'right' Enfin, nous ajoutons la partition textfield.
-- Score Score TextField = display.newText ('0', 2, 0, 'Feutre de marqueur', 14) score: setTextColor (255, 206, 0) 
Vous vous demandez probablement pourquoi nous avons ajouté les murs dans certaines parties. Puisque nous effectuons des collisions de pixel parfait sur eux, nous ne pouvons pas simplement utiliser le addBody méthode (car cela ajoutera une case couvrant également le canal alpha), nous utilisons plutôt le forme paramètre pour définir un polygone pour l'image.
Pourquoi pas un seul polygone?
Le paramètre de forme accepte uniquement convexe formes et un maximum de 8 côtés, notre mur est ni l'un ni l'autre, alors nous le divisons simplement en morceaux.
-- Parties du mur gauche physics.addBody (l1, 'static', shape = -40, -107, -11, -107, 40, 70, 3, 106, -41, 106) physics.addBody (l2, 'static', shape = -23, -30, 22, -30, 22, 8, 6, 29, -23, 29) physics.addBody (l3, 'static', shape = -14 , -56, 14, -56, 14, 56, -14, 56) physics.addBody (l4, 'static', shape = -62, -46, -33, -46, 61, 45, -62, 45) - Composants du mur droit physics.addBody (r1, 'static', shape = 10, -107, 39, -107, 40, 106, -5, 106, -41, 70 ) physics.addBody (r2, 'statique', forme = -22, -30, 22, -30, 22, 29, -6, 29, -23, 9) physics.addBody (r3, ' static ', shape = -14, -56, 14, -56, 14, 56, -14, 56) physics.addBody (r4,' static ', shape = 32, -46, 61, -46, 61, 45, -62, 45)
Des méthodes similaires sont utilisées avec les autres formes, à l’exception des cercles qui utilisent rayon paramètre.
physics.addBody (boule, 'dynamique', rayon = 8, rebond = 0.4) physics.addBody (hitLine1, 'statique', forme = -20, -42, -15, -49, -6, - 46, 18, 39, 15, 44, 5, 44,) physics.addBody (hitLine2, 'static', shape = -20, -42, -15, -49, -6, -46, 18 , 39, 15, 44, 5, 44) physics.addBody (hitBall1, 'statique', radius = 15) physics.addBody (hitBall2, 'statique', radius = 15) physics.addBody ( hitBall3, 'static', radius = 15) physics.addBody (pDroit, 'static', forme = -33, 11, 27, -12, 32, 1) physics.addBody (pLeft, 'statique ', forme = -33, 1, -28, -12, 32, 11)
Une simple ligne est ajoutée en haut de l'écran en tant que mur pour faire rebondir le ballon.
-- Mur supérieur local topWall = display.newLine (display.contentWidth * 0.5, -1, display.contentWidth * 2, -1) physics.addBody (topWall, 'static')
Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add'), puis lBtn: addEventListener ('touch', movePaddle) rBtn: addEventListener ('touch', movePaddle) ball: addEventListener ('collision', onCollision) Runtime: addEventListener (' enterFrame ', update) else lBtn: removeEventListener (' touch ', movePaddle) rBtn: removeEventListener (' touch ', movePaddle) ball: removeEventListener (' collision ', onCollision) Durée d'exécution: removeEventListener (' enterFrame ', update) Les boutons sur l'écran vont déclencher la rotation des palettes. Ce code gère ça.
function movePaddle (e) if (e.phase == 'commencé' et e.target.name == 'à gauche') alors pLeft.rotation = -40 elseif (e.phase == 'commencé' et e.target.name == 'right') puis pRight.rotation = 40 end
La rotation revient à son état initial lorsque vous n'appuyez plus sur le bouton.
si (e.phase == 'terminé') alors pLeft.rotation = 0 pRight.rotation = 0 end end
La balle sera tirée en cas de collision avec la raquette, mais uniquement si la rotation de la raquette est active. Cela évite de tirer la balle lorsque les boutons ne sont pas enfoncés.
function onCollision (e) - Tirez si (e.phase == 'commencé' et e.other.name == 'leftPaddle' et e.other.rotation == -40) puis ball: applyLinearImpulse (0.05, 0.05, ball .y, ball.y) elseif (e.phase == 'commencé' et e.other.name == 'rightPaddle' et e.other.rotation == 40) puis ball: applyLinearImpulse (0.05, 0.05, ball.y , ball.y) fin
Le score augmentera après une collision avec n'importe quel hitBall.
si (e.phase == 'terminé' et e.other.name == 'hBall') alors score.text = tostring (numéro de ton (score.text) + 100) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 2 audio.play (cloche) fin fin
Ce code vérifie si la balle tombe dans l’espace entre les palettes et la réinitialise si vrai.
function update () - Vérifie si la balle touche le bas si (ball.y> display.contentHeight) alors ball.y = 0 audio.play (buzz) end end
Afin de commencer 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 précédemment, 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 celle de la rétine est 114x114px et iTunes Store requiert une version de 512x512px. Je suggère de créer d'abord la version 512x512, puis de la réduire pour les autres tailles. L'icône n'a pas besoin d'avoir les coins arrondis ou l'éblouissement transparent, 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ée utile. Merci pour la lecture!
