3) Les évènements

Dans le chapitre précédent nous avons vu comment ajouter un sprite et lui donner un comportement. Construct est puissant, mais il ne va pas tout faire tout seul non plus. :p Nous allons donc continuer dans une première partie avec les évènements, puis dans une seconde partie nous verrons ce qu’est le monde des variables ! 

Commençons par voir ce qu’est un évènement. Lorsqu’il se passe quelque chose, un évènement a lieu. Pour bien vous faire comprendre : lorsque l’on appuie sur une touche du clavier, il se produit un évènement, quand on bouge la souris, il se produit un évènement. Ces évènements sont comme des messages envoyés à votre jeu pour lui dire qu’il s’est passé quelque chose.

Ressortez le projet du chapitre précédent, nous allons travailler dessus (je vous l’avais dit ! ^^ ). Si vous ne l’avez plus, le voici : ici. Nous avons donc devant nous 2 sprites : un qui se déplace avec les flèches du clavier (les 8 directions) et un autre qui va tout droit (la balle). Ce que nous voulons faire au cours de ce chapitre est de pouvoir tirer des balles lorsque l’on clique sur la souris.
Vous devez vous demander à quoi sert la balle. Pour l’instant, mettons la en dehors de notre zone de travail, pour ne pas qu’elle gène (placez-la comme sur la prochaine capture d’écran). Si vous essayez l’application, il n’y aura plus la balle. C’est normal on vient de l’enlever. ^^
Pour pouvoir utiliser le clavier et la souris, il va falloir rajouter un objet : Mouse & Keyboard. Double-cliquez sur la zone de travail pour rajouter cet objet. Vous remarquerez qu’il n’apparaît pas devant vous : cet objet n’a pas d’apparence, il sert juste à dire qu’on va se servir du clavier et de la souris.

Mais alors pourquoi on a pu bouger le sprite avec les flèches du clavier ? 

Nous avons ajouter au sprite un comportement : les 8 directions. Construct lui permet donc d’être déplacé avec les touches du clavier. Si nous rajoutons l’objet Mouse & Keyboard, c’est pour pouvoir s’en servir avec les évènements.

Le layout actuellement

Si vous regardez en bas, vous verrez marqué Event Sheet Editor qui signifie éditeur de feuille d’évènement. C’est par la que nous allons dans ce chapitre créer des évènements !  Mais avant de poursuivre, nous allons régler un petit quelque chose pour mieux nous repérer. Si vous regardez bien, pour l’instant nos sprites n’ont pas de nom (ou plutôt des noms à la suite : sprite1, sprite2). Ici, il n’y en a que deux, pour l’instant tout va bien ! Mais dès que vous en aurez des dizaines, ou même plus de 50… :euh: On se perd facilement.
Nous allons alors prendre une habitude dès maintenant. Chaque fois que l’on va créer un sprite, on va le renommer directement !
Pour bien commencer, renommons nos deux sprites déjà existants. Sélectionnez le premier sprite (le personnage) puis observez le menu de gauche.

La propriété Common (commun) déroulée (uniquement le premier élément de la liste)

Déroulez le menu Common. Comme pour les comportements, les objets ont eux aussi des paramètres. Le premier est le nom de votre sprite. Cliquez sur son nom actuel (Sprite1), renommez-le en tapant sur votre clavier : personnage puis appuyez sur la touche Entrée. Sélectionnez ensuite le second sprite (la balle), faîtes de même et appelez-la balle>. Voila, c’est mieux maintenant ! 

Et attention à celui qui oublie maintenant ! 

Nous pouvons désormais attaquer les évènements : cliquez sur l’onglet Event Sheet Editor.

L’éditeur de feuille d’évènement alias l’Event Sheet Editor

Nous avons donc devant nous l’éditeur de feuille d’évènement (que j’abrégerais désormais paréditeur d’évènement). Nous allons commencer par ajouter un évènement. Pour ce faire, c’est très simple, faites un clic-droit dans l’espace blanc devant vous. Il y a plusieurs choix possibles, nous permettant d’ajouter un évènement, un script (nous verrons ceci dans une prochaine partie), un commentaire. Je m’attarderai sur les commentaires plus loin. Cliquez sur Insert event (ajouter un évènement) pour ajouter un évènement, une fenêtre s’ouvre alors.

Cette fenêtre permet d’ajouter un évènement

Avant de continuer, voyons comment se constitue un évènement.
Grâce à l’éditeur d’évènements, nous pourront intercepter un évènement pour pouvoir ensuite faire une action. Par exemple, on peut tout à faire dire : « Si on clique sur le bouton Jouer, alorscommence une nouvelle partie. ».
On retiendra donc que lorsqu’il y a un évènement qui se produit, on effectue une action.

Revenons à notre fenêtre dans l’éditeur d’évènement. Nous avons devant nous pour l’instant 3 objets à choisir :

• System
• balle
• personnage

Pourquoi plusieurs choix et pas tout regroupé dans un même endroit ?

Premièrement, on s’y retrouve mieux. Ensuite, ça va nous permettre de choisir l’évènement en rapport avec notre objet ! Par exemple si l’on souhaite savoir quand le personnage se déplace, on regardera les évènements dans l’objet personnage. Si l’on souhaite savoir si la balle a touché quelque chose, on regardera les évènements dans l’objet balle, et ainsi de suite.
L’objet System quant à lui, c’est un peu tout le reste. Nous regarderons les évènements du System quand on voudra savoir plusieurs choses sur le système comme par exemple lorsqu’un objet est crée; chaque secondes; au début du jeu; etc…

Assez parlé, ajoutons cet évènements.  Qu’allons-nous faire ? Nous souhaitons que :
-> A tout moment, le personnage se tourne vers la souris (on dit s’orienter vers la souris).
Séparons cette phrase pour repérer l’évènement et l’action, ce qui donne :

-> A tout moment, le personnage se tourne vers la souris.

L’évènement

Commençons par l’évènement : A tout moment, qui peut se traduire aussi par Toujours. Ça n’a pas de rapport avec le personnage, ni avec la balle. Nous allons donc regarder au niveau du Système ! Cliquez sur System, puis sur Next (suivant).

Cette fenêtre permet d’ajouter un évènement dans la catégorie System

Comme vous le voyez, il y a beaucoup d’évènements ! ^^
Vous devez remarquer qu’il a du texte en bleu et du texte en noir. Tout ce qui est en bleu sont des groupes d’évènements, et ce qui est en noir sont les évènements dans ces groupes. Par exemple prenons le premier groupe, Collisions. En dessous il y a plusieurs évènements relatifs à la collision entre objets. Si nous traduisons en anglais notre évènement (toujours), on obtient always. Allez chercher l’évènement Always dans le groupe System. Cliquez dessus, puis sur Finish (terminer).

L’évènement s’est rajouté ! 

L’action

Continuons ensuite avec l’action : Le personnage se tourne vers la souris. Pour ajouter une action, cliquez à côté de l’évènement où vous voulez ajouter l’action, sur + New action. Une fenêtre similaire à celle des évènement s’ouvre. Cette fois-ci, il y a un rapport avec le personnage (bah oui, on veut qu’il se tourne ^^ ). Cliquez alors sur personnage puis sur Next (suivant).
La aussi, il y a beaucoup d’évènements ! Et on retrouve aussi nos groupes d’évènements. Nous souhaitons que notre objet personnage s’oriente vers la souris, nous allons donc voir du côté desangles ! Par chance, il se trouve juste devant nous, c’est le premier groupe.  Nous avons devant nous plusieurs évènements possibles, mais lequel choisir ? 
Comparons-les à l’aide d’une liste, pour ensuite choisir.

Action/Explication :

Rotate clockwise et Rotate counter-clockwise : Cette action permet de tourner le personnage dans le sens inverse ou non des aiguilles d’une montre.

Rotate towards a position et Rotate towards another object : Cette action permet de tourner le personnage vers une position définie, ou vers un autre objet.

Set angle, Set angle towards an object et Set angle towards position : Cette action permet de changer l’angle du personnage d’un montant défini; vers un objet: ou vers une position.

On peut déjà éliminer les deux premiers évènements, on ne veut pas que le personnage tourne autour de lui même. On peut ensuite éliminer les évènements qui tournent le personnage vers un objet : oui, la souris n’est pas considéré comme un objet ! Enfin, on peut aussi éliminer Set angle.
Il nous reste donc Rotate towards a position et Set angle towards position. En français, Rotate towards a position signifie Faire tourner vers une position et Set angle towards position signifieDéfinir l’angle vers une position.

Quelle est la différence entre les deux ?

Ils sont presque semblable, mais il y a quand même une subtilité. Dans le premier cas, le personnage tournera progressivement vers la position. Dans le second cas, le personnage tournera directement la position. Nous allons donc choisir le deuxième, pour que le personnage tourne directement. Cliquez sur Set angle towards position puis sur Next.
Dans la fenêtre qui suit, deux paramètres vous sont demandés. Et oui, on a demandé à notre personnage de tourner vers une position, mais encore faut-il préciser quel est cette position ! ^^ Nous voulons que le personnage se tourne vers la souris, une question se pose alors :

Comment on sait les positions de la souris ? C’est jamais les mêmes ! 

Oui !  Ce que nous allons utiliser-ici s’appellent des variables. Nous allons voir ceci en deuxième partie.

Les paramètres de l’action (mouseX et mouseY correspondent aux coordonnées X et Y de la souris)

Contentez-vous pour l’instant de remplir comme la capture d’écran, vous comprendrez par la suite. Cliquez ensuite sur Finish (terminer). 

L’action s’est rajoutée ! 

Et regardez bien, on peut presque lire naturellement la feuille d’évènement ! Si on le traduit en français ça donne donc : À chaque instants, définir l’angle du personnage en direction de la souris.
Essayez le programme (avec l’écran en haut, je vous le rappel encore une fois ^^ ), et observez le résultat. 

La balle

Maintenant qu’on a notre personnage qui tourne autours de la souris, nous pouvons continuer en nous occupant de la balle.
Alors cette fois-ci, qu’allons nous faire ? Nous souhaitons que :
-> Lorsque l’on clique gauche sur la souris, tirer une balle partant du personnage.
Séparons cette phrase pour repérer l’évènement et l’action, ce qui donne :

-> Lorsque l’on clique gauche sur la souris, tirer une balle partant du personnage.

L’évènement

Comme tout à l’heure (et à chaque fois), on commence avec l’évènement : Lorsque l’on clique sur la souris. Ça n’a pas de rapport avec le personnage, ni avec la balle.

On va voir le système alors ! 

Bien tenté, mais non. ^^
Rappelez-vous, au début du chapitre, je vous ai fait ajouter un objet : le clavier et la souris (Mouse & Keyboard en anglais). Nous allons maintenant nous en servir. Cliquez sur Mouse & Keyboard puis sur Next.
Vous remarquez qu’il y a beaucoup moins d’évènements ! Tant mieux. :p Il y a 3 groupes ici, celui qui va nous intéresser est Mouse (la souris).
Lequel choisir ?

Ce n’est pas les deux premiers, on veut que l’action se passe lorsque l’on clique ! Les deux suivants, On any click et On click sont ceux qui nous intéressent : lorsque l’on clique. Il y a une différence entre les deux.

Je sais ! Il y en a un, c’est pour n’importe quel clique, et le deuxième on choisit le clic qu’on veut !

Oui c’est ça ! 
Et vu que nous voulons que ça soit lors d’un clic gauche, nous choisissons On click !  Cliquez surOn click puis sur Next.
Cette fois-ci, vous n’avez rien à écrire, il y a une liste pour vous. Le premier paramètre estMouse Button qui est le bouton à choisir (gauche, milieu, ou droit). Le second paramètre permet de définir quel type de clic nous voulons : clic simple, double clic, ou les deux. Choisissez les deux, ça évitera des problèmes. :p

La condition On click.

Une fois bien paramétré, cliquez sur Finish (terminer).

La condition s’est rajoutée ! 

L’action

Cette fois nous continuons avec l’action : tirer une balle partant du personnage. Comme tout à l’heure, cliquez sur + New action afin de rajouter une action. La même fenêtre s’ouvre encore. La, on parle de la balle et du personnage. Que choisir ? Ça a un rapport avec la balle ET le personnage.
Si nous lisons bien l’action que l’on souhaite, on souhaite tirer une balle partant du personnage. C’est donc de lui que va sortir la balle. Cliquez sur le personnage puis sur Next.
C’est la même fenêtre que tout à l’heure. Nous souhaitons que la balle parte du personnage, le personnage devra donc créer la balle. Si vous cherchez un peu, vous verrez le groupe Creation, c’est exactement ce qu’on veut ! Et la, on a pas trop le choix, il y a qu’une action !  Cliquez surSpawn another object (engendrer un objet) puis sur Next.

L’action Spawn another object

Cette fois, vous n’avez pas de liste comme pour la souris. ^^ Vous avez du texte, comme précédemment, mais aussi un bouton qui va vous permettre de dire quel objet créer. Cliquez dessus, et choisissez la balle (cliquez dessus puis sur OK). Pour les deux autres paramètres, laissez les comme ils sont pour l’instant nous les verrons après. Cliquez sur Finish (terminer) pour valider.

L’action s’est rajoutée 

Nous pouvons encore traduire directement pour voir ce que ça donne : Lorsque l’on clique gauche sur la souris (clique ou double-clique), le personnage crée une balle sur le calque 1 (au point d’image 0) (ne vous intéressez pas à cette histoire de calque et d’image point pour l’instant, nous allons voir ce que c’est). Testons l’application (avec l’écran en haut, je vous le rappel pour la dernière fois ^^ ) pour observer le résultat. 

Eh, mais il y a un problème la ! 

Oui. :p La balle part du centre du personnage, c’est moche. En fait, c’est tout à fait normal, car la balle est, par défaut, créée à l’endroit du hotspot de notre personnage, et vu qu’on le place au centre, la balle part du centre. Je vous arrête tout de suite, nous n’allons pas changer de place lehotspot. Cela poserait beaucoup plus de problèmes que de changer l’endroit d’où part la balle.
Pour palier ce problème, nous allons voir les points d’image.

Les points d’image : de retour dans l’éditeur d’image !

Dans le chapitre précédent, je vous ai parlé de l’éditeur d’image, et décrit brièvement les outils. Nous allons nous pencher sur un de ces outils : le point image . Ces points image vont nous permettre de spécifier un endroit de notre sprite, pour décider où nous voulons que notre balle sera crée. Pour créer un point image, retournez dans l’éditeur d’image. Pour ce faire, revenez tout d’abord sur la zone de travail (en cliquant sur Layout Editor à gauche de Event Sheet Editor). Ensuite, double-cliquez sur le sprite personnage, et l’éditeur s’ouvre. Cliquez ensuite sur l’outilpoint d’image  pour sélectionner l’outil. Avant de placer le point image, nous allons créer ce point image. Regardez les options de cet outil :

Options de l’outil point image

Par défaut, un point image est créé, nommé point, aux coordonnées (0;0). Mais nous n’allons pas nous en servir. Nous allons créer le notre. Cliquez sur le [+] pour ajouter un point image. Une fenêtre s’ouvre alors.

Étapes de la création d’un point image

Dans le champ de texte supérieur, entrez ici le nom de votre point image. Appelons-le « tir » (c’est de ce point que le personnage tirera je vous le rappel ^^ ). Marquez tir dans le champ puis cliquez sur Add pour créer le point image. Le point image s’est rajouté à la liste !  Cliquez ensuite sur Close pour fermer la fenêtre. Il faut par la suite sélectionner le point image que l’on vient de créer (nous en avons deux : point et tir). Cliquez sur la flèche du menu déroulant, puis choisissez le point image tir.

Choix du point image

Vous pouvez désormais cliquer pour placer le point image. Placez le à droite, comme sur l’image, car les sprites sont tournés à droite par défaut.

Emplacement du point image tir

Nous pouvons enfin fermer l’éditeur d’image. Retournez maintenant dans l’éditeur d’évènement, nous allons modifier l’action qui crée la balle. Faites un clique-droit dessus, puis cliquez sur Edit action. Dans le champ image point, rentrez « tir » (attention à bien mettre les guillemets !) puis cliquez sur Finish (terminer). Vous pouvez tester l’application, la balle part bien de la où il faut ! 

Au prochain chapitre, les variables ! Cliquez ici pour continuer.