• Facile

Mis à jour le 20/06/2014

Une animation avec les sprites

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Tout d'abord, bienvenue dans la Partie II :D .

Ce chapitre-là traitera plus en détail les sprites. Vous ne vous y attendiez pas, et pourtant, c'est là un chapitre entier que je leur dédie ! Vous qui pensiez tout savoir dessus, détrompez-vous ;) ... Saviez-vous par exemple que l'on peut créer des animations grâce à plusieurs sprites ? Non ?

Pas grave, puisque de toute façons ce n'est que maintenant que nous voyons tout cela. Allez, courage, et bientôt vous serez un vrai incollable sur le sujet ;) .

Les animations

Après avoir longuement conversé au sujet des événements, nous allons reparler un petit peu des sprites. Savez-vous tout d'abord ce qu'est une animation ?
Une animation, c'est une série d'images, qui lorsqu'on les fait défiler très vite, forment un petit film animé.

Dans Game Maker, et dans beaucoup d'autres logiciels et concepts d'ailleurs, on utilise plusieurs images que l'on fait défiler très vite. Bien sur, dans les courtes animations rudimentaires, peu d'images sont requises. Par contre, dans les longues animations, il faudra beaucoup plus d'images.

Prenons un exemple concret : le vol de la mouche :D . La mouche, quand elle vole, bat les ailes de haut en bas. Voici les images que nous pouvons utiliser pour cela :

Image utilisateur

|

Image utilisateur

|

Image utilisateur

Dans la première image, la mouche a les ailes vers le haut, dans la deuxième elle les a un peu baissées et dans la dernière, elle a les ailes vers le bas. Ainsi, en mettant plusieurs fois ces images à la suite, on obtient une réelle animation :

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

etc.
C'est exactement la même chose lors du mouvement d'un personnage, par exemple. Sauf que le personnage, lui, a des jambes et pas des ailes :lol: . Voici une animation d'un personnage marchant vers la droite (Le premier qui se moque de mes dessins, il sort ! :-° ).

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

etc.

Chaque image qui compose l'animation est un sprite différent dans Game Maker.

Mais ça veut dire qu'avec une animation de 10 images, j'aurais 10 sprites dans mon projet ! Ça va tout encombrer !

Non car Game Maker permet de charger plusieurs images dans un seul sprite : ainsi, l'image du sprite lui-même sera constitué de plusieurs images animées. On essaie ? (Pour le besoin de ce chapitre vous pouvez créer un personnage sur Paint comme je l'ai fait. Ça m'a pris 5 minutes pour tout vous dire. Attention, faites des images de 32*32 pixels pour que nous travaillions sur le même format. Au pire, copiez-collez mes images, ça sera plus simple :D ).

Ajouter notre animation à notre projet

Ouvrez un nouveau projet et ajoutez un sprite que vous nommerez Personnage_test par exemple. Appuyez ensuite sur "Load Sprite" et sélectionnez toutes les images de votre animation.

Image utilisateur

Regardez alors sous le bouton "Edit Sprite". Il y a écrit :

Image utilisateur

La ligne "number of subimages" correspond aux nombres d'images qui composent votre sprite. Il y a écrit 3, donc les trois images ont étés chargées !
Pour vérifier, appuyez sur "Edit Sprite". Vous voyez ainsi les "subimages" de votre sprite. Voilà pour moi :

Image utilisateur

Vous pouvez appuyer sur OK et fermer la fenêtre du sprite.
Créez ensuite un objet Personnage donc le sprite est l'animation chargée. Cochez l'option Solid.

Ajoutez maintenant un sprite de mur (je vous propose wall.png du fichier tutorial1.) Créez l'objet correspondant et cochez l'option Solid.

Image utilisateur

Créez désormais une pièce avec un quadrillage de 32*32 pixels. Arrangez-la de la sorte :

Image utilisateur

Testez ensuite votre projet. Votre animation marche, le personnage gigote !

Ouais c'est cool ! Mais par contre, le personnage bouge trop vite ! Il ne se déplace pas pas non plus et y'a un carré blanc tout autour et c'est horrible !

Nous allons régler ces problèmes-là. Nous allons commencer par régler le problème du carré blanc.

La transparence

Si vous voyez un carré blanc, c'est tout simplement parce qu'il y a du blanc tout autour ! Dans votre image, le contour du personnage est constitué de couleur blanche, qui apparaitra forcément par-dessus un fond gris. Pour régler ce problème, il suffit d'"effacer" ce blanc tout autour. Nous allons donc utiliser un logiciel inclus dans Game Maker : l'éditeur de sprites !

Double-cliquez sur votre sprite Personnage pour ouvrir la fameuse fenêtre. Cliquez alors sur le bouton "Edit sprite". Vous voyez alors l'aperçu de vos images. Nous avons vu cela tout à l'heure. Double-cliquez maintenant sur la première image. Un logiciel un peut comme Paint s'ouvre alors.

Image utilisateur

Maintenant, allez dans le menu "Image". Descendez jusqu'à "Erase a color" ou appuyez sur Shift + Control + E. Sélectionnez la couleur blanche (par défaut) ou prenez votre couleur de fond si elle n'est pas blanche (certaines personnes colorient le fond de leurs sprites en violet par exemple). Laissez la barre "tolerance" à 0. Appuyez alors sur OK. Votre couleur blanche devient transparente. En gros, tout ce qui est blanc sur le dessin sera "découpé", sera rendu invisible.

Image utilisateur

->

Image utilisateur

Répétez alors l'opération pour chaque image que constituent votre animation.

Image utilisateur

Vos images sont désormais transparentes ! Pour être sur que la modification soit prise en compte, rechargez vos sprites dans vos objets. Une fois fait, relancez le projet. Résultat, plus d'immonde carré blanc :

Image utilisateur

Gauche/droite

Maintenant que ce problème graphique est résolu, nous allons pouvoir nous occuper du gros : faire bouger le personnage ! Cependant, avant de faire cela, il faudra posséder deux animations et non une. Notre personnage bouge, certes, mais vers la droite ! Si nous voulons qu'il puisse se diriger vers la gauche, il faudra qu'il se tourne vers la gauche.

Quoi, il va falloir refaire toutes les images à l'envers !? :colere:

Mais non, puisque une fois de plus Game Maker est génial : il a tout prévu ;)
Renommez le sprite du personnage en Personnage Droite et créez-en un nouveau Personnage_gauche. Rechargez les mêmes images.

Image utilisateur

Notre personnage regarde toujours vers la droite me direz-vous, mais double-cliquez sur Personnage Gauche et réouvrez le logiciel de tout à l'heure.

Allez dans le menu "Transform" et cliquez sur l'option "Miror/Flip" (ou appuyez sur Control + Alt + M). Laissez les paramètres et appuyez sur OK. Votre image est inversées horizontalement.

Image utilisateur

->

Image utilisateur

Faites ainsi pour chaque image de Personnage Gauche.

Voilà donc ce que vous devriez avoir:

Image utilisateur

Nous allons désormais pouvoir placer les événements.

Les événements

L'idée générale est la suivante : lorsque l'on appuie sur la Flèche de gauche, le bonhomme marche vers la gauche, tandis que si l'on appuie sur la Flèche de droite, il se dirige vers la droite. Il va donc falloir créer un événement Keyboard pour la flèche gauche et un autre pour la flèche droite. On y va ?

Nous allons commencer par nous occuper de la direction vers la droite.
Ouvrez donc l'objet Personnage. Ajoutez un événement Keyboard Right. Mettez une action Move fixed qui va vers la droite avec une vitesse de 3. Ça, nous connaissons. Nous allons ajouter une seconde action que vous ne connaissez pas : Change sprite qui se trouve dans l'onglet main1. Choisissez dans le menu déroulant Personnage droite (puisque c'est vers la droite) et mettez -1 en subimage.

Ajoutez un second événement Keyboard Left et mettez les mêmes actions, mais réglées vers la gauche. Ainsi, dans Move fixed, vous sélectionnerez la flèche gauche et dans Change sprite, vous choisirez Personnage Gauche.

Évidemment, n'oubliez pas de mettre une collision avec le mur. Mettez-y comme action un Move fixed, direction centrale à la vitesse 0.

Récapitulation

Voici donc ce que vous devriez avoir dans chaque événement :

Événement "Keyboard Left"

Image utilisateur

Évènement "Keyboard Right"

Image utilisateur

Et bien sur l'événement "Collision mur"

Image utilisateur
Testons !

Ça y est, nous avons réussi à créer notre bonhomme qui se déplace ! Quand on appuie sur les flèches, il va vers la gauche ou la droite. C'est génial ! :D

Ne dirait-on pas un début de Mario ? Vous avez la base, rajoutez des pièces et un compteur de points qui incrémente à chaque pièce ramassée :) . Bref, améliorez et améliorez pour vous entrainer !

Bon allez, comme je suis de bonne humeur, je vous donne un screen de ce que j'ai chez moi :

Image utilisateur

Bob en balade.

Ce que nous pouvons améliorer

Voici une liste des choses que nous pouvons améliorer :

  • Changer de fond : En effet, le fond gris, c'est plutôt bof.

  • Ajouter de la fluidité dans le mouvement : Le personnage semble se précipiter entre ses mouvements de jambes. On pourrait rajouter des images pour plus de fluidité.

  • Réduire la vitesse de mouvement : Les jambes du personnage font un marathon ou quoi !? Il court très vite et pourtant n'avance quasiment pas, il faudrait changer cela !

  • Le personnage pourrait nous regarder : Lorsque l'on commence, il faudrait que le personnage soit orienté vers nous. De plus, quand il se prend un mur, il marche bêtement vers ce mur. Il devrait s'arrêter et nous regarder de nouveau.

Changer de fond

Nous allons pour cela voir deux techniques :
Ajouter une couleur unie, et ajouter une image par-dessus, mais qui reste tout de même un fond.

Ajouter une couleur unie

C'est ce qu'il y a de plus simple : ouvrez votre pièce et allez dans l'onglet Backgrounds. Cliquez sur le carré gris de Color et mettez autre chose, comme une couleur bleu ciel.

Image utilisateur
Ajouter une image par-dessus

Ce que nous pourrions ajouter comme image, ce serait des montagnes. Cliquez sur Create a background de la barre d'outils et chargez l'image mountains.png. Dans la fenêtre de la pièce, allez voir l'option "Foreground image". Choisissez alors vos montagnes.

Heu... elles sont bizarres tes montagnes !

Si il y a deux rangées de montagnes, c'est parce que l'image se répète horizontalement ET verticalement. Décochez alors Tile Vert pour que l'image ne se répète que horizontalement. Ensuite, dans la même option, entrez une valeur telle que la montagne soit à la limite du sol, comme ceci ^^ :

Image utilisateur

C'est sur que ça pête, hein ? ;)

Ajouter plus de fluidité dans le mouvement

Pour rendre plus réaliste le mouvement de notre personnage, le mieux serait de mieux décomposer son mouvement, qu'on ait vraiment l'impression qu'il bouge les jambes. Nous allons pour cela ajouter une image à son animation.
Ouvrez la fenêtre du personnage (gauche ou droite, à vous de choisir, de toute façons vous aurez aussi l'autre à faire alors...) et réarangez les images dans cet ordre-là :

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

Explications : il faut qu'entre chaque "coup de jambe" il repose sa jambe au centre. Ça ferait en gros:

Jambe droite -> Les jambes au centre -> Jambe gauche -> Jambes au centre -> Jambe droite...
Testez, vous verrez : il y a plus de fluidité dans le mouvement.

Réduire la vitesse de mouvement

Les jambes de notre bonhomme semblent être alimentés en 1600Volts, et ça fait vraiment pas beau :o . Si nous réduisons la vitesse de ses jambes (parce qu'en plus il va pas très vite, et si on n'avance pas très rapidement alors que les jambes elles bougent très vite c'est qu'il y a un problème...), il semblera aller à la bonne vitesse et ce sera donc bien meilleur :) .

Ouvrez donc la fenêtre de notre personnage et allez voir dans les événements Keyboard que nous avons créé, plus précisément dans les action Change sprite. Dans la ligne Speed, entrez une valeur bien inférieur à 1. Je trouve que 0.25 est parfait. Cette valeur, vous l'avez compris, change la vitesse de transition entre les images de l'animation.

Testez, et magie notre personnage va à la bonne vitesse ! (Ou plutôt il s'est calmé niveau jambes... :-° )

Nouvelle orientation du personnage

C'est bien sur le plus long à faire, mais aussi et surtout le plus intéressant ! Répétons ce que nous voudrons avoir (très important, je vous rappelle, de fixer ce que nous voulons créer pour que ce soit le plus précis possible) :

  • Quand on commence la partie, le bonhomme regarde vers la droite (ou la gauche). Ce serait mieux si il nous regardait nous.

  • Quand le personnage se mange un mur, il reste planté devant comme un débile et marche frénétiquement dans le vide. Une fois de plus, si à la place de se comporter ainsi il nous regardait, ça ferait bien mieux !

  • Et pourquoi pas, lors de son déplacement, si on appuie sur bas ou haut, il s'arrêterait et nous regarderait.

Allez courage, c'est pas dur ! :p
Tout d'abord, ce qu'il faudra évidemment faire, c'est dessiner notre personnage de face. Voilà pour moi :

Image utilisateur

Nous allons donc ajouter notre sprite à notre projet.

Image utilisateur

Retournez alors dans votre objet Personnage et créez un événement de type Create. Mettez un Move fixed, direction centrale et vitesse 0, ainsi qu'un Change sprite et sélectionnez votre personnage vu de face (laissez subimage et speed à 0).

Image utilisateur

Allez maintenant voir votre événement Collision avec mur et mettez-y le même Change sprite (personnage vu de face, subimage et speed à 0).

Avec les touches bas et haut

Autre amélioration que j'avais proposé, ce que quand on appuie sur haut ou bas pendant le déplacement, le personnage s'arrête et nous regarde.

Cette fois, vous le faites tout seuls, c'est assez facile à faire !

...

Voilà la correction (pas tricher ! :diable: )

Image utilisateur
Image utilisateur

Un bug assez courant...

J'ai remarqué que la plupart du temps, lorsque l'on fonçait dans un mur, le personnage restait alors bloqué. Ajoutez donc à l'événement Collision avec mur l'action Move to contact (premier onglet, tout en bas). Mettez comme paramètres ceci :

Image utilisateur

Le bug est donc parti, et on peut repartir d'un mur tranquillement.

La version finale

Voilà, vous avez créé votre premier jeu qui comporte une animation ! Autant dire que nous sommes passés au stade supérieur... je vous dit tout d'abord bravo ! ;)
Voilà un screen final :

Image utilisateur

Votre première animation, vous pouvez être fier ! Nous avons commencé par une version où le bonhomme faisait du surplace avec un immonde carré blanc autour de lui, puis nous avons fait en sorte qu'il aille à gauche et à droite, puis avons rajouté un fond, modifié sa vitesse et enfin lui avons rajouté une dernière direction. Autant dire qu'on a fait du beau boulot ! :D

Exemple de certificat de réussite
Exemple de certificat de réussite