Créer un jeu de pendu dansant dans Corona: configuration du projet

Dans cette série en deux parties, je vais vous montrer comment créer le jeu classique du pendu. Cette version vient cependant avec une fin surprise. Si vous gagnez le jeu, le pendu fait une danse joyeuse. En cours de route, vous découvrirez l’API de dessin de Corona, la gestion de scènes, la distribution d’événements personnalisés, comment utiliser une feuille de sprite et comment utiliser des modules pour émuler des classes dans le langage de programmation Lua.

Dans la deuxième partie de cette série, nous ferons danser le bourreau si l’utilisateur remporte la manche. Pendant la danse du bourreau, on joue de la musique qui a été créé par knarmahfox, sous licence Licence d’attribution Creative Commons.

1. Nouveau projet

Ouvrez le Simulateur Corona, cliquez sur Nouveau projetet configurez le projet comme indiqué ci-dessous.

paramètres du simulateur Corona

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 nous intéressent, 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 la configuration suivante.

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 découvrir les autres paramètres que vous pouvez inclure dans build.settings en explorant le Documentation Corona.

3. Configuration de l’application

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

Ceci définit la largeur et la hauteur par défaut de l’écran, utilise boîte aux lettres pour mettre les images à l’échelle et définit la fréquence d’images sur 30. Visiter le Documentation Corona pour en savoir plus sur les autres propriétés que vous pouvez définir config.lua.

4. Point d’accès

le main.lua file est le fichier que l’application charge en premier et utilise pour démarrer l’application. Nous utiliserons main.lua pour définir quelques paramètres par défaut pour l’application et le Compositeur bibliothèque pour charger le premier écran.

Si vous n’êtes pas familier avec la bibliothèque Composer de Corona, je vous recommande de donner le
Documentation
une lecture rapide. En bref, Composer est la solution intégrée de création et de gestion de scènes (écrans) dans Corona. La bibliothèque offre aux développeurs un moyen simple de créer et de faire la transition entre les scènes.

Le nouveau module Composer remplace l’ancien et désormais obsolète StoryBoard module. UNE guide de migration est disponible pour vous aider à convertir vos anciens projets pour utiliser Composer.

Étape 1: Masquer la barre d’état

Nous ne voulons pas que la barre d’état s’affiche dans notre application. Ajoutez l’extrait de code suivant à main.lua pour masquer la barre d’état.

Étape 2: définir les points d’ancrage par défaut

Pour définir les points d’ancrage ou d’enregistrement par défaut, ajoutez le bloc de code suivant à main.lua.

le anchorX et anchorY Les propriétés spécifient l’emplacement du point d’alignement de vos objets d’affichage. Notez que la valeur varie de 0,0 à 1.0. Par exemple, si vous souhaitez que le point d’enregistrement soit en haut à gauche de l’objet d’affichage, définissez les deux propriétés sur 0,0.

Étape 3: 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 nombres 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.

Une bonne valeur de graine est celle de Lua os.time car il sera différent à chaque fois
l’application est exécutée. Ajoutez l’extrait de code suivant à main.lua.

Étape 4: Exiger Composer

Avant de pouvoir utiliser le module Composer, nous devons d’abord l’exiger. Ajoutez ce qui suit à main.lua.

Étape 5: Chargez la scène GameScreen

Ajoutez l’extrait de code suivant à main.lua. Cela permettra à l’application d’accéder à la scène nommée écran de jeu, qui est également un fichier Lua, gamescreen.lua. Vous n’avez pas besoin d’ajouter l’extension de fichier lorsque vous appelez le gotoScene fonction.

5. GameScreen

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

L’appel à newScene fait du gamescreen.lua partie de la hiérarchie de scène du compositeur. Cela signifie qu’il devient un écran dans le jeu, sur lequel nous pouvons appeler des méthodes de composition.

En relation :  Comment changer le lecteur de musique par défaut pour Google Assistant

À partir de maintenant, le code ajouté à gamescreen.lua doit être placé au-dessus de l’instruction de retour.

Étape 1: Variables locales

L’extrait de code suivant inclut les variables locales dont nous aurons besoin pour le écran de jeu scène.

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 les scènes du compositeur, par exemple, en invoquant des méthodes telles que gotoScence, les variables locales seront déjà initialisées.

Il est important de se rappeler si vous souhaitez que les variables locales soient réinitialisées lorsque
revenir à une scène particulière. Pour ce faire, le moyen le plus simple consiste à supprimer la scène de la hiérarchie du compositeur en appelant le removeScence
méthode. La prochaine fois que vous accédez à cette scène, la scène sera automatiquement rechargée. C’est l’approche que nous adopterons dans ce didacticiel.

Pour pouvoir utiliser Corona ButtonWidget, nous devons exiger le Widget bibliothèque. le growText module est un module personnalisé que nous allons créer pour fournir un effet de texte croissant. Créez un nouveau fichier dans votre dossier de projet nommé growtext.lua.

Étape 2: Événements du compositeur

Si vous avez pris le temps de lire le Documentation de la bibliothèque Composer, à laquelle j’ai lié plus tôt, vous aurez remarqué que la documentation comprend un modèle qui contient tous les événements compositeurs possibles. Les commentaires sont très utiles car ils indiquent les événements à exploiter pour l’initialisation des actifs, des minuteries, etc. scene:create, scene:show, et scene:hide méthodes pour ce didacticiel.

scene:create

Ajoutez l’extrait de code suivant à gamescreen.lua.

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

scene:show

Compositeur scene:show La méthode comporte deux phases. le volonté phase est appelée lorsque la scène est toujours hors écran, mais est sur le point de s’afficher à l’écran. le fait
phase est appelée lorsque la scène est à l’écran. C’est ici que vous souhaitez ajouter du code pour rendre la scène vivante, démarrer les minuteries, ajouter des écouteurs d’événements, lire de l’audio, etc.

Dans ce tutoriel, nous ne nous intéressons qu’aux fait phase. Ajoutez l’extrait de code suivant à gamescreen.lua.

Nous déclarons une variable locale phase, que nous utilisons pour vérifier quelle phase le show Comme nous reviendrons sur cette scène plus tard dans le jeu, nous vérifions s’il existe une scène précédente et, si elle est vraie, la supprimons.

scene:hide

Compositeur scene:hide La méthode comporte également deux phases. le volonté
phase est appelée lorsque la scène est à l’écran, mais est sur le point de disparaître. Ici, vous voudrez arrêter les minuteries, supprimer les écouteurs d’événements, arrêter l’audio, etc. fait phase est appelée une fois que la scène est sortie de l’écran.

Dans ce tutoriel, nous ne nous intéressons qu’aux volonté phase.

Étape 3: Ajouter des écouteurs de scène

Nous devons ajouter des écouteurs de scène pour le create, show, et hide méthodes. Ajoutez le code suivant à gamescreen.lua.

Étape 4: Tester la progression

Vous devez maintenant tester le projet pour vous assurer qu’il n’y a pas d’erreurs. Un moyen simple de confirmer que le projet fonctionne comme il se doit consiste à insérer une instruction print dans le scene:show méthode comme indiqué ci-dessous.

Si vous testez l’application et regardez dans la console, vous devriez voir que «Fonctionnement» a été imprimé. Vous pouvez supprimer l’instruction d’impression maintenant que vous avez vérifié que le projet fonctionne comme il se doit.

En relation :  Comment créer une liste de contrôle dans Excel

6. Dessiner le tableau

Nous allons dessiner un “tableau noir” qui servira de toile de fond au jeu. Entrez le code suivant dans gamescreen.lua.

le newRect La méthode dessine un rectangle sur l’écran. Il prend comme paramètres le x et y positions du rectangle, ainsi que la largeur et la hauteur. Nous utilisons display.contentWidth et display.contentHeight, qui représentent la largeur et la hauteur d’origine du contenu en pixels. Ceux-ci sont définis par défaut sur la largeur et la hauteur de l’écran.

le setFillColor prend comme paramètres les valeurs R, V et B en pourcentage, allant de à 1. En passant les valeurs R, V, B comme paramètres, nous pouvons facilement changer la couleur du tableau.

Plus tôt dans ce tutoriel, nous avons défini la valeur par défaut anchorX et anchorY à 0,5. Nous les mettons à ici, le rectangle sera dessiné à partir du coin supérieur gauche de l’écran. Nous insérons le chalkboard dans le scenede sorte qu’il sera supprimé lorsque le scene lui-même est supprimé.

Ensuite, nous devons invoquer cette méthode dans le scene:create méthode comme indiqué dans l’extrait de code suivant.

sept. API de dessin

Le SDK Corona fournit une API de dessin via le Display classe. Nous n’utiliserons que les méthodes de dessin newCircle et newLine dans ce didacticiel. Nous avons utilisé le newRect méthode de dessin à l’étape précédente. le Display La classe fournit également une méthode pour dessiner des polygones. Consultez la documentation pour plus d’informations.

Étape 1: Ajout du hangmanGroup

Le jeu attirera le pendu et le placera dans un GroupObject, hangmanGroup. Cela nous permettra d’opérer sur les pièces dessinées en groupe. Ajoutez ce qui suit au scene:create méthode.

Étape 2: Dessiner le pendu

drawGallows

Ajoutez le code suivant à gamescreen.lua.

Ici, nous utilisons le newLine méthode pour dessiner la potence. Les paramètres pour newLine sont le groupe dans lequel tracer la ligne, le départ x et y positions de la ligne et la fin x et y positions de la ligne.

le append la méthode nous permet d’ajouter un supplément x et y paires à la ligne d’origine. La méthode setStrokeColor définit la couleur de la ligne et le strokeWidth propriété définit la largeur de la ligne.

Appelez cette méthode dans scene:create.

Si vous testez le jeu à ce stade, vous devriez voir la potence dessinée à l’écran.

dessiner la potence

drawHead

Le code suivant dessine la tête.

le newCircle prend comme paramètres le groupe dans lequel dessiner le cercle, le x et y positions, et le rayon du cercle. Avec le setFillColor méthode nous passons dans un extra , qui est le alpha propriété. Nous ne voulons pas d’un cercle plein, donc en passant le remplissage sera complètement transparent. Les autres options devraient vous être familières si vous avez suivi.

drawBody

le drawBody La fonction trace une ligne verticale représentant le corps du pendu.

drawArm1 et drawArm2

le drawArm1 et drawArm2 les fonctions dessinent les bras du bourreau.

drawLeg1 et drawLeg2

le drawLeg1 et drawLeg2 les fonctions dessinent les jambes du bourreau.

8. Progression des tests

Maintenant que nous avons toutes les méthodes en place pour dessiner le pendu, nous pouvons tester et nous assurer que tout fonctionne comme il se doit. Tout ce que nous devons faire est d’appeler chacune des méthodes précédentes dans le scene:create méthode.

dessiner le bourreau

Vous pouvez maintenant supprimer tous les appels de fonction que nous venons d’ajouter. Nous ne voulons pas que le pendu soit tiré dès le début du jeu. Assurez-vous de laisser le drawGallows méthode cependant.

Conclusion

Ceci met un terme au premier de cette série en deux parties. Dans la deuxième partie, nous allons mettre en œuvre le gameplay et faire danser le bourreau sur une musique joyeuse. Merci d’avoir lu et j’espère vous voir dans la deuxième partie.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.