Hello World: Premier pas en création de jeu avec un vaisseau qui se déplace

Créer, jouer et publier des jeux vidéos

Hello World: Premier pas en création de jeu avec un vaisseau qui se déplace

Hello,

Bienvenue dans ce nouveau tutoriel où vous allez faire vos premiers pas en Corona SDK. À la fin de ce tutoriel, vous allez savoir comment créer un nouveau projet en Corona en plus de créer un petit programme ou jeu basique. Je l’avoue, il ne s’agit pas vraiment d’un jeu, mais juste d’un petit programme pour expliquer certains concepts de bases avant de les approfondir dans d’autres tutoriels. Notre petit jeu sera constitué d’une image de fond et de l’image d’un vaisseau. Quand l’image de ce vaisseau sera touchée, alors il se déplacera automatiquement sur l’écran en partant de la gauche vers la droite jusqu’à disparaitre de l’écran.

Je suppose que vous avez déjà installé Corona et un éditeur de code Lua (ZeroBrane Studio ou Sublime Text + plugin Corona Editor). Si vous ne l’avez pas encore fait, cliquez ici pour le faire.

L’application de Corona est ce qu’on appelle un simulateur. Etant créé à la base pour développer uniquement des jeux pour les plateformes mobiles, le simulateur de Corona permet de tester les jeux sous les différentes plateformes supportées par le framework. La grande particularité de ce simulateur est qu’elle exécute le code en instantané à chaque fois qu’un enregistrement des modifications est effectué. Ainsi, vous n’aurez pas besoin d’exécuter du code, de fermer le simulateur, de le relancer à nouveau, puis de le fermer à nouveau. Avant de commencer avec le tutoriel d’aujourd’hui, je vous invite à télécharger ce fichier ZIP contenant les deux images que nous allons utiliser.

Création d’un nouveau projet

Lancer Corona SDK et cliquez sur New Project pour créer un nouveau projet (encadré rouge sur l’image).

1-corona_creer_nouveau_projet

Donnez un nom au projet en l’écrivant dans le champ de la zone Application Name. Pour cet exemple, mettez HelloCorona. Dans la zone Default Orientation, cliquez sur Sideways pour choisir une orientation horizontale (mode paysage) du simulateur. Voir les deux encadrés ci-dessous

2-corona_creer_nouveau_projet2

Cliquez enfin sur OK pour valider la création du nouveau projet. Une fois cette validation effectuée, Corona  va vous ouvrir le dossier de votre projet avec le simulateur qui est réglé par défaut sur l’apparence d’un iPhone. Le contenu du dossier ressemblera à celle de l’image suivante :

3-dossier_projet_hellocorona

Je reviendrai en détail sur le contenu de ce dossier dans un prochain tutoriel où nous allons tout décortiquer. Pour le moment, voici ce que vous devez savoir :

  • Le fichier main.lua est celui qui nous intéresse pour l’instant parce qu’il s’agit du fichier principal d’un projet en Corona. Vous pourriez avoir plusieurs fichiers Lua dans un même projet, mais celui-ci est le principal parce qu’il est le fichier que le simulateur de Corona exécutera en premier. Ne le renommez pas.

Si vous avez déjà téléchargé ci-dessus les images que nous allons utiliser, copiez et collez-les dans le dossier du projet HelloCorona comme sur la capture précédente.

Par défaut, le simulateur de Corona est réglé sur l’apparence de l’iPhone. Pour le changer, allez dans le menu View, cliquez sur View As puis choisissez dans la liste qui s’affiche la plateforme que vous voulez.

4-simulateur_corona_changer_plateforme

Nous allons maintenant commencer avec le programme que nous allons écrire. Pour le faire, ouvrez le fichier main.lua qui se trouve dans le dossier du projet HelloCorona avec l’éditeur de code votre choix. Je reviendrai en fin d’article sur comment exécuter le code que vous avez écrit en fonction du fait que vous utilisez ZeroBrane Studio ou Sublime Text.

Ecriture du programme HelloCorona

Je suppose que vous avez bien déposé les deux images que nous allons utiliser dans le dossier du projet. Si ce n’est pas encore fait, téléchargez-les, faites-le et attaquons avec la première ligne de code.

Le premier code que nous allons écrire permettra de mettre une belle image  de fond à notre jeu, histoire de simuler le sol vu du dessus. Pour le faire, nous allons charger l’image de fond et la placer au milieu de l’écran. Je vous donne le code. Ecrivez-le et lisez l’explication ensuite.

local fond=display.newImage("fond.jpg", display.contentWidth/2, display.contentHeight/2)

Si vous n’aviez pas fermé le simulateur, alors, il vous suffit d’enregistrer les modifications une fois cette ligne de code écrite et le simulateur l’exécutera automatiquement en affichant l’image à l’écran.

Dans ce code, nous déclarons une variable locale nommée fond qui va représenter notre image de fond. Nous utilisons ensuite la fonction newImage() du module display de Corona qui permet de charger et d’afficher une image à l’écran. Nous parlerons des modules dans un prochain tutoriel sur Lua. Dans notre code, cette fonction prend trois éléments en paramètre à savoir :

  • Le nom et l’extension de l’image à charger et à afficher (fong.jpg dans notre cas)
  • La position X de l’image à l’écran en deuxième paramètre
  • La position Y de l’image à l’écran en troisième paramètre

Expliquons les valeurs des positions X et Y. les variables globales contentWidth et contentHeight du module display permettent d’obtenir respectivement la valeur de la largeur et de la hauteur de l’écran. Pour être franc, il s’agit plutôt de la largeur et de la hauteur de la zone de dessin et non de la dimension de l’écran de l’appareil parce qu’il s’agit de deux choses différentes. Nous n’allons pas rentrer dans les détails sur ça dans ce tutoriel donc pour l’instant, considérez ces valeurs comme étant la largeur et la hauteur de l’écran.

Les valeurs obtenues, nous les divisons par deux pour obtenir les valeurs que nous voulons. Si display.contentWidth retourne la valeur de la largeur de l’écran, alors le fait de la diviser par deux (display.contentWidth/2) nous donnera la valeur de la moitié de l’écran sur l’axe des X (horizontalement). Ceci est valable pour display.contentHeight/2 qui nous permet d’obtenir la valeur de la moitié de l’écran sur l’axe des Y (verticalement). C’est ainsi que notre image fond.jpg sera alors positionnée au centre de l’écran de l’appareil comme sur la capture ci-dessous :

5-hellocorona_image_de_fond

L’image de fond étant maintenant placée à l’écran, nous allons utiliser la même fonction newImage() du module display pour charger et afficher l’image du vaisseau. La prochaine ligne de code sera alors ceci :

local vaisseau=display.newImage("vaisseau.png", 10, display.contentHeight/2)

Ce code fait la même action que le précédent sauf qu’il affiche l’image vaisseau.png à la position 10 sur l’axe des X et à la moitié de la hauteur de l’écran sur l’axe des Y. Enregistrez les modifications et voyez le résultat (semblable à celui de la capture ci-dessous) dans le simulateur.

6-hellocorona_image_de_fond_et_vaisseau

Maintenant que nous avons les deux images affichées à l’écran, nous allons passer aux codes qui feront déplacer notre vaisseau une fois qu’on le touchera. Pour cela, créez deux fonctions que vous allez nommer respectivement deplacerVaisseau() et toucherVaisseau(). Nous reviendrons bientôt sur ces fonctions pour y ajouter du code. Si vous n’avez pas suivi le tutoriel sur les fonctions en Lua, cliquez ici. En attendant, déclarez-les comme suit :

function deplacerVaisseau(event)

end

function toucherVaisseau(event)

end

Je ne parlerai pas encore du paramètre event de ces deux fonctions. Pour l’instant, placez ce paramètre tel quel. Son rôle sera l’objet d’un autre tutoriel.

En dessous de ces deux fonctions, écrivez le code suivant :

vaisseau:addEventListener("tap", toucherVaisseau)

Ce code permet de créer un listener d’évènement. Ne vous emballez pas, je vais  expliquer ce qu’on entend par listener et évènement. Pour faire une comparaison, on peut comparer un listener à un espion en Corona qui va appeler une fonction pour exécuter une tâche quelconque quand un évènement est déclenché.

Un évènement peut être défini par une action effectuée sur un élément placé dans notre jeu. En exemple, le fait de toucher l’image de notre vaisseau à l’écran est un évènement. Toucher,  glisser et déposer, effectuer une collision entre deux ou plusieurs objets d’un jeu, etc. sont tous des évènements en Corona. Il y a plusieurs évènements que nous verrons au fur et à mesure que nous évoluerons avec d’autres tutoriels.

Pour ajouter un listener à un objet d’un jeu dans le but de traiter un évènement qui s’est produit, on utilise la fonction addEventListener() qui prend en premier paramètre le nom de l’évènement à traiter et en deuxième paramètre le nom de la fonction à exécuter (sans les paramètres à la fin du nom de la fonction) quand l’évènement associé sera déclenché. En Corona, il y a deux types d’évènements :

  • Les évènements liés à un seul objet de la scène du jeu
  • Les évènements génériques liés à tout l’environnement du jeu

Dans le cas de notre code, nous ajoutons un listener à la variable vaisseau qui représente l’image de notre vaisseau. L’évènement à détecter ici se nomme tap (premier paramètre de la fonction addEventListener()) et est lié au fait que l’image du vaisseau a été touchée à l’écran par un doigt (sur mobile) ou par un clic de souris (sur PC). Une fois que cet évènement sera déclenché, la fonction toucherVaisseau() (deuxième paramètre de la fonction addEventListener()) que nous avons précédemment créée sera appelée et exécutée.

Retournons maintenant dans la fonction toucherVaisseau() pour y ajouter du code. Ce code sera semblable au précédent que nous avons écrit.

function toucherVaisseau(event)
Runtime:addEventListener("enterFrame", deplacerVaisseau )
end

Le code de cette fonction est semblable à celui d’ajout de l’évènement tap de la variable vaisseau. Dans celui-ci, il s’agit d’un évènement générique qui n’est plus lié à un objet précis, mais au jeu tout entier. Ainsi, le mot Runtime qui remplace le nom de la variable vaisseau dans le code veut dire qu’il s’agit d’un évènement générique. En premier paramètre de addEventListener(), nous faisons appel à l’évènement enterFrame et en deuxième paramètre à la fonction deplacerVaisseau().

En résumé, quand on touchera sur l’image du vaisseau, la fonction toucherVaisseau() qui sera appelée va déclencher à son tour un autre évènement (enterFrame) qui appellera à son tour deplacerVaisseau() pour s’exécuter.

L’évènement enterFrame est appelé à chaque frame de la boucle principale du jeu. Dans chaque jeu, il existe une boucle principale qui ne s’arrête qu’à la fermeture du jeu. Cette boucle s’occupe de redessiner à chaque itération, la scène du jeu et de recevoir et traiter les évènements envoyés par le joueur du jeu. Chaque tour de cette boucle est appelée frame. J’ai parlé de ce principe dans l’article "Quelques termes à comprendre avant toute chose. Les connaissez-vous ? ", section FPS (Frames Per Seconds). Lisez-le si ce n’est pas encore fait pour plus d’explications. enterFrame étant alors déclenché à chaque tour de cette boucle qui redessine en permanence la scène du jeu, la fonction deplacerVaisseau() sera alors aussi appelée à chaque tour de cette boucle.

Que contiendra alors deplacerVaisseau() comme instruction ? Dans cette fonction, nous allons simplement changer la position X du vaisseau. Ainsi, la nouvelle valeur de la position du vaisseau à chaque frame sera égale à son ancienne valeur plus trois (3). Comme la scène du jeu est redessinée à chaque tour de boucle, on aura alors l’impression que le vaisseau est en mouvement en se déplaçant de manière continue sur l’axe des X. Voici le code de deplacerVaisseau() :

function deplacerVaisseau(event)
vaisseau.x=vaisseau.x+3;
end

Bravo ! Vous venez de réaliser un premier jeu en Corona SDK. Pour tester le jeu, lancez le simulateur et cliquez sur l’image du vaisseau pour le voir se déplacer en ligne droite jusqu’à disparaître de l’écran. Il est vrai qu’il ne s’agit pas du tout d’un jeu parce qu’il manque énormément de choses pour avoir un jeu complet, mais avec ce petit exemple, vous avez fait votre premier pas en Corona et savez au moins déplacer un objet à l’écran 😉 Dans les prochains tutoriels, nous allons voir en détail les fonctionnalités présentées dans ce jeu.

Voici le code source complet :

local fond=display.newImage("fond.jpg", display.contentWidth/2, display.contentHeight/2)

local vaisseau=display.newImage("vaisseau.png", 10, display.contentHeight/2)


function deplacerVaisseau(event)
vaisseau.x=vaisseau.x+3;
end


function toucherVaisseau(event)
Runtime:addEventListener("enterFrame", deplacerVaisseau )
end


vaisseau:addEventListener("tap", toucherVaisseau)

Vous pouvez aussi télécharger ou cloner le projet au complet sur GitHub.

7-hellocorona_execution_sublimetext

À l’attention des utilisateurs de ZeroBrane Studio

Pour exécuter votre code avec ZeroBrane Studio, il vous faut d’abord suivre les étapes suivantes :

  • Ouvrez le dossier du projet HelloCorona dans ZeroBrane Studio. Pour le faire, faites un clic droit sur le nom du dossier ouvert dans l’onglet Projet. Choisissiez ensuite Répertoire de projet puis cliquez sur Choisir… Sélectionnez le dossier HelloCorona à l’endroit où vous l’avez créé et validez.

8-choisir_dossier_zerobranestudio

  • Double-cliquez sur le fichier lua pour l’ouvrir puis allez sur la barre de statuts. À cet endroit, cliquez sur la zone où est écrit Lua 5.3 et choisissez Corona dans la liste qui s’affiche. Voir la capture ci-dessous :

9-choisir_corona_zerobranestudio

C’est tout ! Si vous avez fermé par hasard le simulateur de Corona et que vous voulez exécuter le code écrit, il vous suffit de cliquer sur le bouton Exécuter (F6) sur la barre d’outils. Vous trouverez aussi ce bouton dans le menu Projet.

À l’attention des utilisateurs de Sublime Text + plugin Corona Editor

Si vous avez opté pour l’utilisation de Sublime Text et que vous avez installé le plugin Corona Editor comme nous l’avons fait dans un autre tutoriel, alors il vous suffit d’ouvrir le fichier main.lua dans Sublime Text et de saisir le code du jeu. Pour l’exécuter (au cas où le simulateur est fermé), allez dans le menu Corona Editor et cliquez sur Run Project pour lancer le simulateur et exécuter le code. Si le simulateur était déjà ouvert, un simple enregistrement des modifications du code suffirait pour l’exécuter.

10-hellocorona_execution_sublimetext

Nous sommes à la fin de ce tutoriel qui, je l’avoue, est un peu long. Relisez-le et prenez la peine d’écrire vous-même le code au lieu de copier-coller et de bien lire les explications pour mieux comprendre. Je suis disponible pour répondre à vos questions dans les commentaires en dessous de l’article.

Une dernière chose avant de partir. Si vous n’êtes pas toujours inscrit pour recevoir les tutoriels et le pack cadeau de bienvenue, faites-le avec le formulaire ci-dessous. À bientôt

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
%d blogueurs aiment cette page :