Créer un jeu de combat aérien dans Corona Interface

Ce que vous allez créer

introduction

Dans cette courte série, je vais vous montrer comment créer un jeu de combat d'avion qui rappelle le vieux jeu d'arcade de 1942. En cours de route, vous en apprendrez plus sur les fonctionnalités du storyboard de Corona, les temporisateurs, le déplacement d'un personnage et un peu de trigonométrie..

Les graphiques utilisés dans ce didacticiel ont été créés par Ari Feldman et sont fournis sous la licence publique commune, ce qui signifie qu'ils sont libres d'utilisation. Assurez-vous de vérifier SpriteLib de Ari Feldman. Commençons.

1. Nouveau projet

Ouvrez le simulateur Corona, cliquez sur Nouveau projet, et configurez le projet comme indiqué ci-dessous. Sélectionnez un emplacement pour enregistrer votre projet et cliquez sur D'accord. Cela créera un dossier avec un certain nombre d'icônes et trois fichiers qui sont importants pour nous., main.lua, config.lua, et build.settings. Nous examinerons chaque fichier dans les prochaines étapes..

2. Paramètres de construction

le build.settings Le fichier est responsable des propriétés de construction du projet. Ouvrez ce fichier, supprimez son contenu et remplissez-le avec l'extrait de code suivant..


settings = orientation = default = "portrait", pris en charge = "portrait",,

Dans build.settings, nous définissons l'orientation par défaut et limitons l'application pour qu'elle ne prenne en charge qu'une orientation portrait. Vous pouvez apprendre quels autres paramètres vous pouvez inclure dans build.settings en explorant la documentation Corona.

3. Config.lua

le config.lua fichier gère la configuration de l'application. Comme nous l'avons fait avec build.settings, ouvrez ce fichier, supprimez son contenu et ajoutez le code suivant.


application = contenu = largeur = 768, hauteur = 1024, échelle = "boîte aux lettres", fps = 30,

Ceci définit la largeur et la hauteur par défaut de l'écran, utilise boîte aux lettres pour redimensionner les images et définit le nombre d'images par seconde 30.

Vous pouvez apprendre quelles autres propriétés vous pouvez définir dans config.lua en consultant la documentation Corona.

4. Main.lua

le main.lua fichier est le fichier que l'application charge en premier et utilise pour amorcer l'application. Nous allons utiliser main.lua définir quelques paramètres par défaut pour l'application et le Storyboard module pour charger le premier écran.

Si vous ne connaissez pas le module Storyboard de Corona, je vous recommande de lire rapidement la documentation. En résumé, Storyboard est la solution intégrée à la création et à la gestion de scènes ("écrans") dans Corona. Cette bibliothèque fournit aux développeurs un moyen simple de créer et de faire la transition entre des scènes individuelles..

5. Masquer la barre d'état

Nous ne voulons pas que la barre d'état apparaisse dans notre application. Ajoutez l'extrait de code suivant à main.lua cacher la barre d'état.


display.setStatusBar (display.HiddenStatusBar)

6. Définir les points d'ancrage par défaut

Pour définir l’ancre par défaut (points d’enregistrement), ajoutez ce qui suit à main.lua.

display.setDefault ("anchorX", 0) display.setDefault ("anchorY", 0)

le anchorX et ancrage les propriétés spécifient où vous voulez que le point d’enregistrement de vos objets d’affichage soit. Notez que la valeur va de 0.0 à 1,0. Par exemple, si vous souhaitez que le point d’enregistrement soit le centre de l’objet d’affichage, définissez les deux propriétés sur 0.5.

7. Générateur aléatoire de semences

Notre jeu utilisera Lua math.random fonction pour générer des nombres aléatoires. Pour vous assurer que les chiffres sont vraiment aléatoires à chaque exécution de l'application, vous devez fournir une valeur de départ. Si vous ne fournissez pas de valeur de départ, l'application générera le même caractère aléatoire à chaque fois..

Lua's est une bonne valeur de départ os.time fonction car il sera différent chaque fois que l'application est exécutée. Ajoutez l'extrait de code suivant à main.lua.

math.randomseed (os.time ()) 

8. Nécessite un storyboard

Avant de pouvoir utiliser le module Storyboard, nous devons d’abord en avoir besoin. Ajouter ce qui suit à main.lua.

storyboard local = nécessite "storyboard"

9. Chargement de l'écran de démarrage

Entrez l'extrait de code suivant sous la ligne dans laquelle vous avez besoin du module Storyboard..

storyboard.gotoScene ("début")

Cela fera que l'application ira à l'écran nommé début, qui est aussi un fichier Lua, start.lua. Vous n'avez pas besoin d'ajouter l'extension du fichier lorsque vous appelez le gotoScene une fonction.

10. Écran d'accueil

Créez un nouveau fichier Lua nommé start.lua dans le répertoire principal du projet. Ce sera un fichier de storyboard, ce qui signifie que nous devons avoir besoin du module Storyboard et créer une scène de storyboard. Ajoutez l'extrait suivant à start.lua.

storyboard local = require ("storyboard") scène locale = storyboard.newScene ()
L'appel à newScene fait du start.lua une partie du storyboard de l'application. Cela signifie que cela devient un écran dans le jeu, que nous pouvons appeler des méthodes de storyboard sur.

11. Variables locales

Nous n'avons besoin que d'une seule variable locale, Bouton Start, dans la partie principale de start.lua. Cette variable locale est utilisée pour référencer le bouton de démarrage dans cette scène.

bouton de démarrage local 

Il est important de comprendre que les variables locales du bloc principal ne sont appelées qu'une seule fois, lorsque la scène est chargée pour la première fois. Lors de la navigation dans le storyboard, par exemple, en appelant des méthodes telles que gotoScence, les variables locales seront déjà initialisées.

Il est important de vous rappeler si vous souhaitez que les variables locales soient réinitialisées lors de la navigation vers une scène particulière. Pour ce faire, la solution la plus simple consiste à supprimer la scène du storyboard en appelant le removeScence méthode. La prochaine fois que vous accéderez à cette scène, celle-ci sera automatiquement rechargée. C'est l'approche que nous allons suivre dans ce tutoriel.

12. Événements Storyboard

Si vous avez pris le temps de lire la documentation sur les storyboards que j'ai liée précédemment, vous aurez sûrement remarqué que la documentation comprend un modèle contenant tous les événements possibles de storyboard. Les commentaires sont très utiles car ils indiquent quels événements utiliser pour initialiser des actifs, des minuteries, etc..

Le modèle peut sembler un peu écrasant au début. Cependant, pour ce tutoriel, nous ne sommes intéressés que par trois événements, createSceneenterScene, et exitScene.

13. Créer une scène

Ajouter ce qui suit pour l'extrait à start.lua.

scène de fonction: createScene (événement) groupe local = self.view local fond = display.newRect (0, 0, display.contentWidth, display.contentHeight) fond: setFillColor (0, .39, .75) groupe: insert (arrière-plan) local bigplane = display.newImage ("bigplane.png", 0,0) groupe: insert (bigplane) startbutton = display.newImage ("startbutton.png", 264,670) groupe: insert (startbutton) fin

Cette méthode est appelée lorsque la vue de la scène n'existe pas encore. C'est là que vous devez initialiser les objets d'affichage et les ajouter à la scène. le groupe la variable pointe vers auto.view, qui est un GroupObject pour toute la scène.

Nous dessinons ensuite un rectangle pour le fond. Corona Afficher objet est livré avec certaines méthodes de dessin, telles que nouveauCercle, nouvelle ligne, et, comme indiqué dans l'extrait ci-dessus, nouveauRect. Nous invoquons aussi setFillColor donner au rectangle une couleur bleuâtre. Les paramètres que nous passons sont des pourcentages.

Nous insérons ensuite le Contexte dans le groupe. Il est important d'insérer des objets d'affichage dans le groupe de la vue pour vous assurer qu'ils sont supprimés lorsque la vue principale est supprimée. Enfin, créez le bouton de démarrage et ajoutez-le également au groupe. le afficher objet a la Nouvelle image méthode, qui prend comme paramètres le chemin d'accès à l'image et le X et y valeurs pour la position de l'image à l'écran.

14. Entrez dans la scène

le enterScene La méthode est appelée immédiatement après que la scène se soit déplacée à l'écran. C'est ici que vous pouvez ajouter des écouteurs d'événement, démarrer des minuteries, charger du son, etc. Ajoutez l'extrait suivant sous le code que vous avez ajouté à l'étape précédente.


scène de fonction: enterScene (événement) bouton de démarrage: addEventListener ("tap", startGame) fin

Dans enterScene, nous ajoutons un écouteur d'événement à la Bouton Start, qui appellera le démarrer jeu fonction lorsque les utilisateurs appuient sur le bouton de démarrage.

15. Scène de sortie

le exitScene La méthode est appelée lorsque la scène est sur le point de quitter l'écran. C'est là que tu veux annuler tout ce que vous avez mis en place dans le enterScene méthode, telle que supprimer les écouteurs d'événements, arrêter les minuteries, décharger l'audio, etc. Ajoutez l'extrait de code suivant sous le code que vous avez ajouté à l'étape précédente.

scène de fonction: exitScene (event) startbutton: removeEventListener ("tap", startGame) end

Tout ce que nous faisons dans le exitScene méthode supprime l'écouteur d'événements que nous avons ajouté à la Bouton Start.

16. Commencer le jeu

le démarrer jeu la fonction est simple. Il a le storyboard charger le gamelevel scène.

fonction startGame () storyboard.gotoScene ("gamelevel") fin

17. Ajouter des auditeurs à la scène

Ayant ajouté le createScene, enterScene, et exitScene méthodes, nous devons enregistrer la scène pour écouter ces événements. Entrez l'extrait de code suivant pour le faire..

scène: addEventListener ("createScene", scène) scène: addEventListener ("enterScene", scène) scène: addEventListener ("exitScene", scène)

18. rendre la scène

La dernière chose que vous devez vous assurer que vous faites dans un scénario est de retourner la scène, parce que c'est un module.

scène de retour

19. Ajouter la scène GameLevel

Avant de pouvoir tester nos progrès, nous devons ajouter le gamelevel scène. Créez un nouveau fichier Lua dans le répertoire principal du projet et nommez-le. gamelevel.lua. Ajoutez l'extrait de code suivant au fichier que vous venez de créer..

storyboard local = require ("storyboard") scène locale = storyboard.newScene () retour scène

Comme nous l’avons vu précédemment, nous avons d’abord besoin du module de scénarimage, créer une nouvelle scène et restituer la scène. le gamelevel la scène est la scène dans laquelle nous allons mettre en œuvre le gameplay du jeu.

Conclusion

Ceci met fin à la première partie de cette série. Dans la prochaine partie de cette série, nous commencerons à implémenter le gameplay du jeu. Merci d'avoir lu et je vous verrai là-bas.