Share
C’est le deuxième volet de notre tutoriel sur le puzzle physique avec Corona SDK. Dans le tutoriel d'aujourd'hui, nous allons ajouter à notre interface et notre interaction de jeu. Continuer à lire!
Assurez-vous de lire la première partie du didacticiel pour bien comprendre et vous préparer à ce didacticiel..
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 sur bouton. 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', -130, display.contentHeight-140) transition.to (creditsView, heure = 300, x = 65, 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: tap (e) playBtn.isVisible = vrai creditsBtn.isVisible = vrai transition.to (creditsView, heure = 300, y = display.contentHeight + creditsView.height, onComplete = fonction () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil fin) 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 la prochaine étape.
function showGameView: tapez sur (e) transition.to (titleView, heure = 300, x = -titleView.height, onComplete = fonction () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Les lignes suivantes ajoutent le message d'instructions. Nous allons le montrer pendant deux secondes, puis le faire disparaître..
-- Instructions Message local ins = display.newImage ('ins.png', 32, 182) 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 fin) fin) lvlImg = display.newImage ('level.png', 202, 2 ) Ce code crée un rectangle dans le bas de la scène à utiliser comme sol.
-- Étage local = display.newRect (0, 320, 480, 1)
Cette partie gère la création de niveau. Il commence par créer les cases dans la scène. Nous en apprendrons plus sur cette fonction dans les prochaines étapes..
-- Zones de niveau addBox ('g', 60, 272) addBox ('s', 148, 284) addBox ('s', 148, 248) addBox ('s', 148, 212) addBox ('s', 148, 176) addBox ('n', 297, 272) addBox ('n', 297, 224) addBox ('n', 297, 176) addBox ('w', 148, 164) Ce code ajoute la balle au niveau.
-- Ball ball = display.newImage ('ball.png', 234, 138) ball.name = 'ball' Ici, nous ajoutons de la physique au sol et à la balle.
-- Ajouter Physique physics.addBody (sol, 'statique') physics.addBody (boule, 'dynamique', radius = 12) end
La fonction suivante utilise trois paramètres pour créer un objet boîte. Vous pouvez spécifier le type de boîte dans le premier paramètre et sa position dans les deux suivants. Avec cette méthode, vous pouvez créer des niveaux complexes en utilisant seulement quelques lignes de code. Il va ajouter de la physique à la nouvelle boîte ainsi qu'un écouteur.
fonction addBox (type, X, Y) local b = display.newImage (type… 'Box.png', X, Y) physics.addBody (b, 'dynamic') if (type ~ = '' g ') alors b: addEventListener ('tap', removeBox) elseif (type == 'g') puis b: addEventListener ('collision', onCollision) end end Cette fonction supprime la boîte cible lorsqu'elle est tapée.
function removeBox (e) display.remove (e.target) fin
Nous allons utiliser ce code pour voir si le ballon entre en collision avec la boîte de but et appeler une alerte si c'est vrai.
function onCollision (e) if (e.other.name == 'ball'), puis display.remove (ball) alert () end end
La fonction d'alerte 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 avec le code suivant en place.
Principale()
le default.png Le fichier est une image qui sera affichée dès le lancement de l'application. Il sera automatiquement ajouté par le compilateur Corona lorsque vous l'ajouterez à votre dossier source du projet..
En utilisant les graphiques que vous avez créés précédemment, vous pouvez créer une belle icône. La taille de l'icône de l'icône iPhone non rétinienne est 57x57px, mais la version de la rétine est 114x114px et l'iTunes Store nécessite un 512x512px version. Je suggère de créer le 512x512 version première et réduction pour les autres tailles.
Il n'a pas besoin d'avoir des coins arrondis ou un é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 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> 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 la soumission pour distribution.!
Dans cette série, nous avons appris sur le comportement de la physique, les écouteurs d'écoute et les collisions. Ce sont des compétences qui peuvent être vraiment utiles dans un grand nombre de jeux.
Expérimentez avec le résultat final et essayez de créer votre propre version personnalisée du jeu.!
J'espère que vous avez aimé cette série et que vous l'avez trouvée utile. Merci pour la lecture!
