Share
Dans ce tutoriel, je vais vous montrer comment créer un jeu qui rebondit avec le SDK Corona. Vous en apprendrez plus sur l'API de dessin, les commandes tactiles et les nombres aléatoires. L'objectif de ce jeu est d'utiliser une pagaie pour empêcher les balles de toucher le sol. Pour en savoir plus, lisez la suite!
Nous utiliserons des graphiques prédéfinis pour coder un jeu passionnant à l'aide des API Lua et Corona SDK.
Une fois l'opération terminée, le lecteur utilisera l'écran tactile de l'appareil pour contrôler une raquette. Les paramètres du code peuvent être modifiés 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 pourrons choisir la taille des images que nous utiliserons..
La plateforme iOS présente les caractéristiques suivantes:
Android étant une plate-forme ouverte, il existe de nombreux appareils et résolutions. Certaines des caractéristiques d'écran communes sont:
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 s'applique également au développement Android avec le SDK Corona..
Une interface simple et conviviale sera utilisée. Cela implique plusieurs formes, boutons, bitmaps, etc..
Les ressources graphiques d'interface nécessaires à ce tutoriel sont disponibles dans le téléchargement ci-joint..
Selon le périphérique sélectionné, vous devrez peut-être exporter les graphiques dans l'IPP recommandé. Vous pouvez le faire avec votre éditeur d'image 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 un fichier externe pour que l’application devienne 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 s'exécute 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é (n'importe quel éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique en surbrillance) 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, vous trouverez la structure familière..
Classes nécessaires Variables et constantes Déclarer des fonctions méthodes de classe du constructeur (fonction principale) (autres fonctions) appelle la fonction principale
display.setStatusBar (display.HiddenStatusBar)
Le code ci-dessus 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..
Un simple vecteur est utilisé comme arrière-plan pour l'interface de l'application. La ligne de code suivante le crée.
-- Graphiques - [Arrière-plan] local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) bg: setFillColor (52, 46, 45)
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 title 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
Un message d'instruction apparaîtra au début du jeu et sera interpolé après 2 secondes. Vous pouvez changer l'heure plus tard dans le code.
-- Instructions locales ins
Voici les cercles ou les balles. L’objectif du jeu est de les empêcher de toucher le bas de l’écran.
-- Cercles de couleur cercles locaux = display.newGroup ()
C'est l'alerte qui sera affichée quand une balle touche le sol. Il affichera le score et mettra fin au jeu..
-- Alerte locale alertVoir
Nous utiliserons des effets sonores pour améliorer le ressenti du jeu. Les sons utilisés dans ce jeu ont été créés dans as3sfxr.
Accentsconagua
-- Sons locaux bounceSnd = audio.loadSound ('bounce.wav') local perdSnd = audio.loadSound ('lost.wav') Ce sont les variables que nous allons utiliser. Vous pouvez lire les commentaires dans le code pour en savoir plus à leur sujet..
-- Variables locales circleTimer - Ajoute chaque fois un nouveau cercle appelé couleurs locales = 71, 241, 255, 255, 204, 0, 245, 94, 91, 0, 255, 204, 250, 140, 254, - Couleurs possibles pour les cercles (R, G, B)
Ensuite, déclarez toutes les fonctions en tant que local au début.
-- Fonctions local Main = startButtonListeners local = showCredits local = hideCredits local = showGameView local = gameListeners local = local moveBar = local addCircle = localCollision = local alert =
Au cours de cette étape, nous allons créer la fonction qui initialise la logique du jeu:
fonction Main () - code… fin
Maintenant nous allons placer le TitleView dans la scène et appeler une fonction qui ajoute le robinet les auditeurs aux boutons.
function Main () title = display.newImage ('title.png') playBtn = display.newImage ('playBtn.png', 130, 248) creditsBtn = display.newImage ('creditsBtn.png', 125, 316) titleView = display.newGroup (title, 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 sur bouton, un 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) transition.to (creditsView, heure = 300, y = affichage. contentHeight - (creditsView.height - 40), 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 + 40, onComplete = fonction () creditsBtn.isVisible = true playBtn.isVisible = vrai creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil fin) fin Quand le Jouer le bouton est tapé, le TitleView est interpolé et supprimé, révélant la GameView. 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) Les lignes suivantes ajoutent le message d'instructions:
ocal ins = display.newImage ('ins.png', 160, 355) transition.from (ins, heure = 200, alpha = 0,1, onComplete = fonction () timer.performWithDelay (2000, function () transition.to ( ins, heure = 200, alpha = 0.1, onComplete = fonction () display.remove (ins) ins = nil fin) fin) fin) Cette étape crée la raquette et la place sur la scène. Un nom peut être ajouté ultérieurement pour un accès plus facile.
-- Ajouter une barre = display.newRoundedRect (70, 340, 160, 10, 3) bar.name = 'bar'
Maintenant, nous allons créer des murs autour de l'écran pour empêcher les balles de quitter la scène.
-- Murs left = display.newLine (0, 240, 0, 720) left.isVisible = false à droite = display.newLine (320, 240, 320, 720) right.isVisible = false en bas = display.newLine (160, 480, 480 , 480) bottom.isVisible = false
Voici un score Champ de texte créer en haut à droite de la scène:
-- Score score = display.newText ('0', 300, 0, 'Futura', 15) Ensuite, nous devons ajouter de la physique à nos objets. Ici, nous allons utiliser le Filtre propriété qui empêche certains objets d'entrer en collision les uns avec les autres. Cela empêche nos cercles d'entrer en collision tout en maintenant les collisions entre les murs et la pagaie. Vous pouvez trouver une explication simple de son comportement sur le site Corona..
-- Physique physique.addBody (barre, 'statique', filtre = categoryBits = 4, maskBits = 7) physics.addBody (gauche, 'statique', filter = categoryBits = 4, maskBits = 7) physique .addBody (right, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (en bas, 'static', filter = categoryBits = 4, maskBits = 7) gameListeners (' ajouter ') end La fonction suivante ajoute les écouteurs nécessaires pour démarrer la logique de jeu:
fonction gameListeners (action) if (action == 'add') puis bg: addEventListener ('touch', moveBar) circleTimer = timer.performWithDelay (2000, addCircle, 5) barre: addEventListener ('collision', onCollision) en bas: addEventListener ('collision', alerte) else bg: removeEventListener ('touch', moveBar) timer.cancel (circleTimer) circleTimer = nil barre: removeEventListener ('collision', onCollision) bas: removeEventListener ('collision', alerte) end end Toucher l'arrière-plan appelle la fonction suivante qui gère le mouvement de la palette. Il suit le doigt et reste dessus.
function moveBar (e) if (e.phase == 'déplacé') puis bar.x = e.x bar.y = e.y - 40 end - Laisse la barre 1/3 à partir du haut si (bar.y < 160) then bar.y = 160 end end
le circleTimer appelle ce code. Il crée un cercle ou une balle en haut de l'écran (qui est ensuite déplacé vers le bas par gravité) et lui donne une taille et une couleur aléatoires choisies dans notre couleurs Table. Les valeurs de couleur sont ensuite stockées dans pour modifier également la palette. Un petit coup de pouce est ajouté dans une direction aléatoire calculée par le dir et r les variables.
fonction addCircle () local r = math.floor (math.random () * 12) + 13 local c = display.newCircle (0, 0, r) cx = math.floor (math.random () * (display.contentWidth - (r * 2))) cy = - (r * 2) - Couleur du cercle, couleur locale = math.floor (math.random () * 4) + 1 c.c1 = couleurs [couleur] [1] c. c2 = couleurs [couleur] [2] c.c3 = couleurs [couleur] [3] c: setFillColor (c.c1, c.c2, c.c3) physics.addBody (c, 'dynamique', radius = r , bounce = 0,95, filter = categoryBits = 2, maskBits = 4) cercles: insérer (c) --déplacer horizontalement le répertoire local if (r < 18) then dir = -1 else dir = 1 end c:setLinearVelocity((r*2) * dir, 0 ) end
Cette fonction est activée lorsque la raquette entre en collision avec une balle. Il joue un son, augmente le score et change la couleur de la palette.
function onCollision (e) audio.play (bounceSnd) bar: setFillColor (e.other.c1, e.other.c2, e.other.c3) score.text = chaîne (tonumber (score.text) + 50) score: setTextColor (e.other.c1, e.other.c2, e.other.c3) score.x = 300 fin
La fonction d'alerte crée une vue d'alerte, l'anime et met fin au jeu..
function alert () audio.play (lostSnd) gameListeners ('rmv') alertView = display.newImage ('alert.png', 90, 200) transition.from (alertView, heure = 200, alpha = 0.1) score localTF = display.newText (score.text, 145, 253, 'Futura', 17) scoreTF: setTextColor (255, 255, 255) - Attendez 100 ms pour arrêter la physique timer.performWithDelay (100, function () physics.stop ( ) fin, 1) 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 Default.png fichier est une image affichée au démarrage de l'application pendant qu'iOS charge les données de base à afficher dans l'écran principal. Ajoutez cette image dans le dossier source de votre projet, elle sera ensuite ajoutée automatiquement par le complémenteur Corona..
En utilisant les graphiques que vous avez créés précédemment, vous pouvez maintenant créer une belle icône. La taille de l'icône de l'iPhone non rétinien est de 57x57px, mais la version de la rétine est de 114x114px. Gardez à l'esprit que l'iTunes Store 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 les reflets transparents, iTunes et l'iPhone le font pour vous..
C'est l'heure du 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 la dernière étape!
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 est prête pour le test de l'appareil et / ou la soumission pour la distribution.!
Dans ce tutoriel, nous avons appris à dessiner des API, des minuteries, des nombres aléatoires et d'autres compétences pouvant s'avérer extrêmement 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 apprécié ce didacticiel et que vous l'avez trouvé utile. Merci pour la lecture!
