Share
Dans cette série de tutoriels en deux parties, vous apprendrez à créer un jeu de flipper. L'objectif du jeu est de frapper la balle en utilisant les palettes pour augmenter le score. Continuer à lire!
En utilisant des graphismes prédéfinis, nous allons coder un jeu divertissant en utilisant Lua et les API Corona SDK.
Le joueur pourra frapper une balle en utilisant des boutons sur la scène. Vous pouvez modifier les paramètres dans le code pour personnaliser le jeu..
La première chose à faire est de sélectionner la plateforme sur laquelle vous souhaitez exécuter notre application. Ainsi, nous serons en mesure de choisir la taille des images que nous utilisons..
La plateforme iOS présente les caractéristiques suivantes:
Android étant une plate-forme ouverte, il existe de nombreux appareils et résolutions. Voici quelques-unes des caractéristiques d'écran les plus courantes:
Dans ce tutoriel, nous allons nous concentrer sur la plate-forme iOS avec la conception graphique, spécialement conçue pour la distribution sur un iPhone / iPod touch, mais le code présenté ici devrait également s'appliquer au développement Android avec le SDK Corona..
Une interface simple et conviviale sera utilisée, elle implique plusieurs formes, boutons, bitmaps et plus.
Les ressources graphiques d'interface nécessaires à ce tutoriel sont disponibles dans le téléchargement ci-joint..
Selon le périphérique que vous avez sélectionné, vous devrez peut-être exporter les graphiques dans les ppi recommandés. Vous pouvez le faire dans votre éditeur d'images préféré..
J'ai utilisé le Ajuster la taille… fonction dans l'application Aperçu sur Mac OS X.
N'oubliez pas de donner un nom descriptif aux images et de les enregistrer dans votre dossier de projet..
Nous utiliserons les effets sonores pour améliorer la sensation du jeu. Vous pouvez trouver les sons utilisés dans cet exemple sur Soungle.com en utilisant les mots-clés. cloche et bourdonner.
Un fichier externe sera utilisé pour que l’application passe en plein écran sur tous les appareils, le config.lua fichier. Ce fichier indique la taille d'écran d'origine et la méthode utilisée pour redimensionner ce contenu si l'application est exécutée dans une résolution d'écran différente..
application = contenu = largeur = 320, hauteur = 480, échelle = "boîte aux lettres",
Ecrivons l'application!
Ouvrez votre éditeur Lua préféré (tout éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique) et préparez-vous à écrire votre superbe application. N'oubliez pas de sauvegarder le fichier sous main.lua dans votre dossier de projet.
Nous structurerons notre code comme s'il s'agissait d'une classe. Si vous connaissez ActionScript ou Java, la structure vous est familière..
Necesary Classes Variables et constantes Déclarer des fonctions méthodes de la classe contructor (fonction principale) (autres fonctions) appelle la fonction principale
display.setStatusBar (display.HiddenStatusBar)
Ce code masque la barre d'état. La barre d'état est la barre en haut de l'écran de l'appareil qui affiche l'heure, le signal et d'autres indicateurs..
Nous utiliserons la bibliothèque Physics pour gérer les collisions. Utilisez ce code pour l'importer:
Accentsconagua
physique locale = nécessite ('physique') physics.start () 
Un graphique simple est utilisé comme arrière-plan pour l'interface de l'application, la ligne de code suivante le stocke.
-- Graphiques - [Arrière-plan] local bg = display.newImage ('bg.png') 
Ceci est la vue du titre, ce sera le premier écran interactif à apparaître dans notre jeu. Ces variables stockent ses composants..
-- [Vue titre] local titleBg local playBtn local creditsBtn local titleView
Cette vue montrera le générique et le copyright du jeu, cette variable sera utilisée pour le stocker..
-- [CreditsView] crédits locauxVoir
Les murs où la balle pourra rebondir.
Puisque nous allons utiliser la physique pour créer exactement les mêmes polygones, nous allons diviser chaque côté en quatre parties. Les pièces sont marquées par des lignes rouges.
-- [Murs] local l1 local l2 local l3 local l4 local r1 local r2 local r3 local r4
Ceci est le graphique de la balle, référencé dans la variable suivante.
-- [Balle] balle locale
Nous allons ajouter quelques obstacles dans le jeu, ce seront eux.
-- [Hit Lines] hitLine1 local hitLine2 local
Ces balles sont la cible du flipper, les frapper augmentera notre score.
-- [Hit Balls] hitBall1 local hitBall2 local hitBall3 local
Pagaie gauche et droite. Utilisé pour frapper la balle
-- [Pagaies] pLeft local pRight
Ces boutons déplacent les palettes faisant rebondir la balle.
-- [Boutons de la palette] local lBtn local rBtn
Une variable de score est ajoutée pour l'afficher plus tard à l'écran.
-- Score score local
Les lignes suivantes stockent une référence pour les fichiers son.
local bell = audio.loadSound ('bell.caf') buzz local = audio.loadSound ('buzz.caf') Ceci est la variable que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus.
-- Variables local lastY - utilisé pour mémoriser la position du titre bmp
Déclarer toutes les fonctions comme local au début.
-- Fonctions local Main = startButtonListeners local = showCredits local = hideCredits local = showGameView local = gameListeners local = movePaddle local = onCollision local = update local =
Nous allons ensuite créer la fonction qui initialisera toute la logique du jeu:
fonction Main () - code… fin
Maintenant, nous plaçons TitleView dans la scène et appelons une fonction qui ajoutera le robinet les auditeurs aux boutons.
function Main () titleBg = display.newImage ('title.png', display.contentCenterX - 97, 96) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 30, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png', display.contentCenterX - 44.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end Cette fonction ajoute les auditeurs nécessaires à la TitleView boutons.
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 + 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 Dans cette partie de la série, vous avez appris l'interface et la configuration de base du jeu. Dans la prochaine et dernière partie de la série, nous nous occuperons du mouvement de la palette, de la détection de collision et des dernières étapes à suivre avant la publication, comme la création d’un test d’application, la création d’un écran de démarrage, l’ajout d’une icône et enfin la création de l’application. Restez à l'écoute pour la dernière partie!
