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.
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.
settings =
{
orientation =
{
default ="portrait",
supported =
{
"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 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.
application =
{
content =
{
width = 768,
height = 1024,
scale = "letterbox",
fps = 30,
}
}
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.
display.setStatusBar(display.HiddenStatusBar)
É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.
display.setDefault( "anchorX", 0.5) display.setDefault( "anchorY", 0.5)
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.
math.randomseed( os.time() )
Étape 4: Exiger Composer
Avant de pouvoir utiliser le module Composer, nous devons d’abord l’exiger. Ajoutez ce qui suit à main.lua.
local composer = require( "composer" )
É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.
composer.gotoScene( "gamescreen" )
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.
local composer = require( "composer" ) local scene = composer.newScene() return scene
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.
À 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.
local widget = require ("widget") -- Needed for the button widget
local growText = require("growtext") -- A module providing a growing text effect
local words5 = {} -- Holds words 5 characters or less in length
local words9 = {} -- Holds words 9 characters or less in length
local words13 = {} -- Holds words 13 characters or less in length
local hangmanGroup
local alphabetArray = {"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"}
local guessWordText
local theWord -- The actual word
local guessWord -- The word the player has guessed
local numWrong = 0
local gameButtons = {} -- holds all the buttons
local winLoseText
local wonGame = false
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.
function scene:create( event )
local group = self.view
end
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.
function scene:show( event )
local phase = event.phase
local previousScene = composer.getSceneName( "previous" )
if(previousScene~=nil) then
composer.removeScene(previousScene)
end
if ( phase == "did" ) then
end
end
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.
function scene:hide( event )
local phase = event.phase
if ( phase == "will" ) then
end
end
É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.
scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene )
É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.
function scene:show( event )
local phase = event.phase
--SNIP--
if ( phase == "did" ) then
print("Working") -- Temporary print statement
end
end
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.
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.
function drawChalkBoard(r,g,b)
local chalkBoard = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
chalkBoard:setFillColor(r,g,b)
chalkBoard.anchorX = 0
chalkBoard.anchorY = 0
scene.view:insert(chalkBoard)
end
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.
function scene:create( event )
local group = self.view
drawChalkBoard(1,1,1)
end
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.
function scene:create( event )
--SNIP--
hangmanGroup = display.newGroup()
group:insert(hangmanGroup)
hangmanGroup.x = 180
hangmanGroup.y = 180
end
Étape 2: Dessiner le pendu
drawGallows
Ajoutez le code suivant à gamescreen.lua.
function drawGallows()
local gallows = display.newLine( hangmanGroup,20,380,360, 380)
gallows:append(290,380,290,50,180,50,180,90)
gallows:setStrokeColor(0, 0, 0)
gallows.strokeWidth = 3
end
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.
function scene:create( event )
--SNIP--
hangmanGroup.x = 180
hangmanGroup.y = 180
drawGallows()
end
Si vous testez le jeu à ce stade, vous devriez voir la potence dessinée à l’écran.
drawHead
Le code suivant dessine la tête.
function drawHead()
local head = display.newCircle(hangmanGroup,150,90,30)
head:setStrokeColor(0,0,0)
head:setFillColor(0,0,0,0)
head.strokeWidth = 3
head.anchorX = 0
head.anchorY = 0
end
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.
function drawBody()
local body = display.newLine(hangmanGroup,180,150,180,300)
body:setStrokeColor(0, 0, 0)
body.strokeWidth = 3
end
drawArm1 et drawArm2
le drawArm1 et drawArm2 les fonctions dessinent les bras du bourreau.
function drawArm1()
local arm = display.newLine(hangmanGroup,180,200,130,190)
arm:setStrokeColor(0, 0, 0)
arm.strokeWidth = 3
end
function drawArm2()
local arm= display.newLine(hangmanGroup,180,200,230,190)
arm:setStrokeColor(0, 0, 0)
arm.strokeWidth = 3
end
drawLeg1 et drawLeg2
le drawLeg1 et drawLeg2 les fonctions dessinent les jambes du bourreau.
function drawLeg1()
local leg = display.newLine(hangmanGroup,180,300,130,330)
leg:setStrokeColor(0, 0, 0)
leg.strokeWidth = 3
end
function drawLeg2()
local leg = display.newLine(hangmanGroup,180,300,230,330)
leg:setStrokeColor(0, 0, 0)
leg.strokeWidth = 3
end
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.
function scene:create( event )
--SNIP--
drawGallows()
drawHead()
drawBody()
drawArm1()
drawArm2()
drawLeg1()
drawLeg2()
end
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.
