Share
Dans cette série de didacticiels, nous allons apprendre à créer un jeu de tir spatial comme le jeu classique Space Defender. Continuer à lire!
Dans cette version de Space Defender, le joueur devra défendre son espace en tirant sur des ennemis. Chaque fois que le joueur réussit à détruire un ennemi, il gagne des points et lorsque le joueur a atteint 20 ou 40 points, son arme à feu reçoit une mise à niveau. Pour mélanger les choses, ce jeu enverra des packages bonus qui valent 5 points. Pour voir le jeu en action, regardez la courte vidéo ci-dessus. Maintenant que nous en savons plus sur le jeu que nous créons, commençons!
Ce jeu de tir spatial sera construit en utilisant le SDK Corona. Voici certaines des choses que vous apprendrez dans cette série de tutoriels:
Pour utiliser ce didacticiel, le kit de développement Corona SDK doit être installé sur votre ordinateur. Si vous ne possédez pas le SDK, rendez-vous sur www.CoronaLabs.com pour créer un compte gratuit et télécharger le logiciel gratuit..
Notre première étape dans la configuration de notre jeu est le fichier build.settings. Ce fichier gère toutes les propriétés de création de notre application, telles que l'orientation et des options supplémentaires pour les plates-formes Android et iOS. Créez un nouveau fichier appelé build.settings et copiez les paramètres suivants dans votre fichier..
settings = orientation = default = "landscapeRight", pris en charge = "landscapeRight", "landscapeLeft", iphone = plist = UIStatusBarHidden = false, UIAppFonts = "Kemco Pixel.ttf",,
Un des points forts de Corona SDK est que la langue auto-documente et que la plupart des paramètres de ce fichier doivent être faciles à comprendre. Cependant, parcourons rapidement ces paramètres.
Une fois que nous avons défini nos configurations d’heure de construction, nous allons configurer nos configurations d’exécution dans notre fichier config.lua. Dans ce fichier, nous allons définir la largeur et la hauteur de notre jeu, le type de mise à l'échelle du contenu et le nombre d'images par seconde. Créez un nouveau fichier appelé config.lua et copiez les paramètres suivants.
application = contenu = largeur = 320, hauteur = 480, échelle = "letterBox", fps = 30,,
Semblable à notre fichier build.settings, config.lua est auto-documenté, à l'exception de l'option scale. L'option d'échelle est une fonctionnalité utilisée par Corona SDK pour adapter votre application à différentes tailles d'écran. Dans le cas de l'option letterBox, nous demandons à Corona d'afficher tout notre contenu à l'écran tout en conservant les proportions. Lorsque le contenu ne couvre pas la totalité de l'écran, l'application affiche des barres noires dans les zones sans contenu (un peu comme regarder des films en mode écran large)..
Avant de continuer à créer notre application, nous devons parler de graphiques. Vous pouvez obtenir des graphiques pour votre jeu de nombreuses manières différentes: engager un graphiste, un ami, les dessiner vous-même ou même acheter des graphiques sous forme de stock sur des sites tels que https://graphicriver.net/..
Toutefois, si vous avez un budget restreint, vous ne pourrez peut-être pas acheter ces graphiques ou vous n’aurez peut-être pas le temps de les créer. Dans ce type de situation, vous pouvez utiliser des graphiques publiés sous la licence creative commons. La licence creative commons vous permet d’utiliser des graphiques librement disponibles sous certaines restrictions, telles que l’attribution à l’auteur..
Pour notre jeu, nous allons utiliser des illustrations sous la licence creative commons de OpenGameArt.org. L'auteur qui a créé ces graphiques est VividRealtiy et voici un lien direct vers son travail - http://opengameart.org/content/evolutius-gfx-pack. Avant de continuer, assurez-vous de télécharger le jeu graphique ou de télécharger le fichier de ce tutoriel..
Bien qu'il existe une tonne de sites Web avec des graphiques sous cette licence, voici trois sites que je visite souvent:
Maintenant que nous avons nos graphiques, nous pouvons continuer à faire notre jeu! Pour continuer notre jeu, nous devons créer un nouveau fichier appelé main.lua. Ce fichier sera le point de départ de notre jeu. En fait, c’est le point de départ de chaque jeu réalisé avec Corona. Une fois le fichier créé, ouvrez-le dans votre éditeur favori et entrez le code suivant:
-- masquer la barre d'état display.setStatusBar (display.HiddenStatusBar)
Cette ligne de code masquera la barre d'état sur iOS. Nous utiliserons ensuite le storyboard de Corona pour gérer notre jeu. La fonctionnalité de storyboard traite différentes parties du jeu en tant que scènes afin de faciliter la gestion du code par les développeurs. Par exemple, notre jeu comporte trois scènes: main.lua, le menu et l’écran de jeu. Une fois que chaque scène est configurée, Corona offre un moyen très simple de passer d’une scène à l’autre. Étant donné que cela peut constituer un obstacle considérable pour les développeurs qui commencent avec le SDK Corona, voici une représentation graphique de la présentation de notre jeu..
Chaque case bleue représente une scène individuelle et la flèche entre chaque scène indique comment nous allons naviguer à travers les scènes. En termes simples, nous commençons par main.lua et naviguons dans les deux sens entre scène 2 et scène 3.
La mise en œuvre du Storyboard dans notre application est simple: vous n'avez besoin que du module et vous êtes prêt! Placez le code suivant dans main.lua pour intégrer cette fonctionnalité intéressante.
-- inclure le module "storyboard" Corona storyboard local = nécessite "storyboard"
Ensuite, nous voudrons passer à la deuxième scène et nous utiliserons la variable de storyboard pour accomplir cela..
Accentsconagua
-- charger le menu d'écran storyboard.gotoScene ("menu") Maintenant que nous avons terminé notre fichier main.lua, abordons le menu principal!
Le menu principal de notre jeu affichera une image d’arrière-plan, le titre du jeu et un bouton Jouer maintenant. Pour commencer, créez un nouveau fichier appelé menu.lua et le scénarimage de Corona..
storyboard local = require ("storyboard") scène locale = storyboard.newScene () Nous allons maintenant ajouter la fonctionnalité de widget de Corona pour créer notre bouton. La fonctionnalité de widget nous permet de créer facilement des éléments d'interface graphique communs tels que des boutons dans notre jeu..
widget local = nécessite "widget"
Après la bibliothèque de widgets, nous allons prédéfinir certaines variables pour notre jeu. Ces variables vont stocker la largeur de l'écran, la hauteur de l'écran et le milieu des coordonnées de l'écran.
écran local, écranH, demiW, demiY = display.contentWidth, display.contentHeight, display.contentWidth * 0.5, display.contentHeight * 0.5
Après nos variables, nous allons créer notre toute première fonction appelée scène: createScene (). Cette fonction est appelée lorsque la scène est chargée pour la première fois ou si la scène a déjà été supprimée. De manière générale, cette fonction permet d’ajouter tous les éléments graphiques à l’écran.
scène de fonction: createScene (événement) groupe local = self.view end
Une caractéristique importante d'un storyboard est la façon dont il gère les objets. Tous les objets d'affichage que nous utilisons dans cette scène seront placés dans le groupe de variables. En plaçant nos objets d'affichage dans ce groupe, nous faisons savoir à Corona que ces objets appartiennent à cette scène. Lorsque la scène doit être supprimée, ces objets seront également supprimés..
Dans la scène de la fonction: createScene (), nous utiliserons le graphique BKG.png (ce graphique provient de opengameart.org) comme arrière-plan de notre jeu. Une fois ajouté, nous centrerons le graphique sur l'écran et l'insérerons dans la variable de groupe..
-- afficher une image d'arrière-plan local bg = display.newImageRect ("images / BKG.png", 480, 320) bg.x = halfW bg.y = halfY groupe: insert (bg) Ensuite, nous plaçons le titre de notre jeu à l'écran en utilisant la police personnalisée que nous avons spécifiée dans notre fichier build.settings..
-- placez un titre de jeu sur l'écran local gametitle = display.newText ("Space Defender", 0,0, "Kemco Pixel", 40) gametitle.x = halfW gametitle.y = 100 groupe: insert (gametitle) Notre dernier ajout à notre première fonction est le bouton de lecture. Le bouton de lecture utilisera la fonctionnalité de widget de Corona et un écouteur d'événements appelé onPlayBtnRelease. L'auditeur d'événement sera déclenché lorsque le bouton de lecture est touché. Ajoutez le code suivant à l'intérieur du scène: createScene () une fonction.
fonction locale onPlayBtnRelease () storyboard.gotoScene ("game", "slideLeft") end playBtn = widget.newButton label = "Jouer maintenant", labelColor = default = 255, defaultFile = "images / Button.png" , overFile = "images / Button_Purple.png", width = 150, height = 60, left = 180, top = 150, font = "Kemco Pixel", fontSize = 18, onRelease = onPlayBtnRelease - fonction d'écoute d'événements groupe: insert (playBtn) Après notre fonction de création de scène, nous ajouterons une fonction d'entrée de scène. Cette fonction sera déclenchée après la fonction de création de scène et supprimera la scène précédente..
scène de fonction: enterScene (événement) groupe local = self.view si storyboard.getPrevious () ~ = nil, puis storyboard.removeScene (storyboard.getPrevious ()) end end
La dernière fonction que nous allons ajouter est la fonction destroyScene. Cette fonction sera appelée lorsque la scène sera supprimée ou détruite. Dans notre cas, nous utilisons des widgets et puisque les widgets doivent être supprimés manuellement, nous supprimons le widget dans notre fonction de scène de destruction.
scène de fonction: destroyScene (événement) groupe local = auto.view si playBtn, puis playBtn: removeSelf () - les widgets doivent être supprimés manuellement playBtn = nil end end
Enfin, nous ajoutons des écouteurs d’événements pour appeler les différentes fonctions configurées: enterScene, destroyScene et createScene..
scène: addEventListener ("createScene", scène) scène: addEventListener ("enterScene", scène) scène: addEventListener ("destroyScene", scène) Et c'est tout pour la partie 1! Nous avons appris comment configurer notre projet, comment implémenter la fonction de scénarimage de Corona, comment démarrer notre application et comment créer un système de menus. Lire la partie 2 de cette série maintenant!
