Share
Dans cette série de didacticiels, nous allons créer un jeu Brick Breaker à partir de zéro en utilisant le SDK Corona. Le but de ce jeu est de contrôler une raquette en forme de pong pour frapper une balle contre une pile de briques jusqu'à ce qu'elles se cassent.
Le but de ce jeu est d’utiliser une raquette pour frapper une balle dans une pile de briques jusqu’à ce que toutes les briques soient cassées sans permettre à la balle de manquer la raquette et de s’envoler de l’écran. En cas de succès, l'utilisateur passera à un nouveau niveau, sinon le jeu se terminera.
La première chose à faire est de sélectionner la plate-forme 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. 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 belle interface colorée sera affiché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..
Temps d'écrire notre application!
Ouvrez votre éditeur Lua préféré (tout éditeur de texte fonctionnera, mais tous les éditeurs ne proposent pas la coloration syntaxique Lua) 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 allons utiliser le puissant moteur Box2D intégré à Corona, utilisez ce code pour l'inclure dans votre application:
--Moteur physique Physique local = nécessite la physique 'physics.start () physics.setGravity (0, 0) - Définit la gravité sur 0 car nous n'en aurons pas besoin
Ce sont les variables de base et les constantes que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus sur eux.
local BRICK_W = 41 - largeur de brique local BRICK_H = 21 - hauteur de brique local OFFSET = 23 - un décalage utilisé pour centrer les briques locales W_LEN = 8 - la longueur des niveaux, seules 8 briques horizontales doivent être créées sur la scène SCORE_CONST local = 100 --le montant à ajouter au score lorsqu'une brique est touchée score local = 0 - stocke le score actuel briques locales = display.newGroup () - contient toutes les briques de niveau local xSpeed = 5 local ySpeed = -5 xDir local = 1 - x direction locale yDir = 1 local gameEvent = "- stocke les événements du jeu (gagner, perdre, terminé) local currentLevel = 1
Ceci est l'écran principal de l'application, ce sera la première vue interactive à apparaître dans notre jeu. Ces variables stockent les composants d’arrière-plan et de l’écran de menu.
Accentsconagua
local background = display.newImage ('bg.png') menu localScreen local mScreen local startB local aboutB Portez une attention particulière à la ligne avec display.newImage ('bg.png'). Ceci est responsable de l'affichage de l'image de fond initiale sur l'écran.
L’écran à propos affichera le générique, l’année et les droits d’auteur du jeu. Cette variable sera utilisée pour stocker une référence à la vue:
local aboutScreen
Ceci est l'écran de jeu, il sera créé lorsque le Début le bouton est exploité.
Variables pour stocker l'écran de jeu:
paddle locale brique locale balle locale
Variables locales qui stockent les champs de texte score / niveau et les valeurs numériques de score / niveau:
score localText score localNuméro niveau localText niveau localNum
Cet écran apparaîtra une fois le jeu décidé. Le message dira au joueur qu'il gagne ou perd.
L'écran d'alerte est stocké par les variables suivantes:
local alertScreen local alertBg local box titreTF local msgTF
Tous nos niveaux seront stockés dans des tables (la version Lua d'un tableau).
Ceci est essentiellement une table contenant une table. Vous pouvez déclarer cela sur une seule ligne, mais avec le bon formatage, son espacement vous permet de voir en quelque sorte la forme que prendront les niveaux:
niveaux locaux = niveaux [1] = 0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0, 0, 0,0,1,1,0,0,0, 0,0,0,1,1,0,0,0, 0,1,1,1,1,1,1,0 , 0,1,1,1,1,1,0,0, 0,0,0,1,1,0,0,0, 0,0,0,1,1,0, 0,0, 0,0,0,0,0,0,0,0, niveaux [2] = 0,0,0,0,0,0,0,0,0, 0 , 0,0,1,1,0,0,0, 0,0,1,0,0,1,0,0, 0,0,0,0,0,1,0,0 , 0,0,0,0,1,0,0,0, 0,0,0,1,0,0,0,0, 0,0,1,0,0,0 , 0,0, 0,0,1,1,1,1,0,0, niveaux [3] = 0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0, 0,0,0,1,1,0,0,0,0, 0,1,0,0,0,0,1,1, 0, 0,1,1,1,1,1,1,0, 0,1,0,1,1,0,1,0, 0,0,0,0,0, 0,0,0, 0,0,0,1,1,0,0,0, 0,0,0,0,0,0,0,0,0, niveaux [4] = 0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0, 1,1,1,1,1,1,1 , 1, 1,0,0,0,0,0,0,1, 1,0,0,0,0,0,0,1, 1,0,0,0,0 , 0,0,1, 1,0,0,0,0,0,0,1, 1,0,0,0,0,0,0,1, 1,1,1 1,1,1,1,1,
Dans les tableaux multidimensionnels ci-dessus, le Les 1 représentent l’espace dans la scène où une brique sera placée, et le Les 0 ne sont que des espaces vides. Plus tard, les numéros seront lus par une fonction qui placera une brique sur la vue du jeu. Nous en avons ajouté quatre, mais vous pouvez en ajouter autant que vous le souhaitez.!
Vous avez maintenant vu l'interface et la configuration de base de notre jeu. Restez à l'écoute pour la deuxième partie de cette série, où nous allons ajouter de l'interactivité à l'interface et la détection des collisions entre nos graphiques de jeu..
