le graphisme facile n°3

L'animation de marche ou de course

Cette fois ci je vais tenter de vous apprendre à réaliser une belle animation de marche, fluide au possible. Je ne suis pas un pro, mes anims à moi ne sont pas extraordinaire comme le savent les membres (heu ne comptez pas l'anim du perso de DTS non plus hein, là c'est fait exprès ^^), mais je sais qu'il est possible de faire bien en s'appliquant et en réfléchissant bien Quoi ? Réfléchir ? Pour du graphisme ? Ben écoutez j'estime qu'une animation de marche ce n'est pas la facilité, et c'est parfois ce qui rebiffe certains joueurs à faire un personnage humain, car c'est coton, et du coup font un perso sans jambe, parfois un smiley (mais Hard-Pac si tu m'entends t'inquiète pas jtaime quand même ). Alors, nous allons d'abord réfléchir, à cette marche bipède si compliquée, en observant bien ce qui fait une belle anim.
(Notez qu'en robotique, la marche bipède est une chose qui a posé longtemps problème, et même aujourd'hui elle n'est pas encore totalement efficace-mais ça c'est autre chose)


1-observons les pros

a-les jambes

Nous allons regarder quelques gifs de marche extraits de jeux vidéos.
Ces animations sont très réussies je pense (pas vous ? ) donc c'est pour cela qu'elles nous intéressent.
Je vous laisse profiter de leur fluidité un moment



Maintenant nous allons regarder l'animation de près:

Regardez bien les pieds. Par exemple, première image, le pied droit :
il est tendu, lancé, vous avez bien saisi à quel moment de l'animation il appartient. Regardez maintenant à la cinquième image, c'est cette fois ci le pied gauche, qui est tendu en avant. Allez à la deuxième image, retour au pied droit. Il est posé, à l'avant. On va à la sixième image, et on regarde le pied gauche : Tiens ! lui aussi, il est posé à l'avant.
Vous pouvez continuer ainsi, et là, cool, vous comprenez que les pieds sont en fait les mêmes, mais l'animation est décalée. Cool, vous n'aurez qu'à animer une jambe, et à dupliquer l'animation en fond, en décalant quelques frames ! (Bien sûr vous voyez qu'ici le pied à l'arrière diffère un peu, parce qu'il est refait pour respecter la vue qu'on a sur la basket, le type qui a dessiné ça est un pro, il est payé pour faire tous les détails ! Mais bien sûr, nous qui sommes fainéants, n'allons peut être pas en faire autant Remarquez, si vous prenez la peine de retoucher l'autre jambe, tant mieux pour vous, ce n'est qu'un soin en plus apporté à l'animation )
Voici une petite image qui récapitule tel pied se trouve où, le décalage est de 4 frames.

Bien sûr on peut varier le nombre de frames, mais 8 est une bonne base, pour une fluidité suffisante. Car si vous en ajoutez, il n'y aura pas d'autre étape dans la marche, juste des frames intermédiaires, ainsi une image de 16 frames, devra être affichée avec une vitesse double pour que l'animation ne soit pas ralentie, mais elle gagnera en fluidité, à l'inverse si vous faites une animation de marche en 4 frames, ce sera saccadé (remarquez ça peut être fun ou voulu, moi j'adore l'animation du megaman de nes mais bon, si vous voulez plus de "réalisme", mettez minimum 8 frames)

b-les bras
Dans l'exemple du sonic, les bras vous motiveront aussi peut être plus. Evidemment le bras gauche fait le même mouvement que le bras droit, comme pour les jambes, en décalé. Mais là il est assez différent tout de même à cause de la vue, puisque sur le bras gauche on voit les doigts de la main, qu'on ne voit pas pour la main droite, angle de vue oblige.
Mais ce n'est pas là dessus que je veux attirer votre attention.
Regardez seulement le bras droit, d'abord la deuxième frame avec la dernière, puis la troisième avec l'avant dernière, et enfin la quatrième avec l'avant-avant dernière. Ce sont les même !
C'est l'avantage du bras, lui, son mouvement d'aller-retour, il le fait sur le même chemin, tandis que la jambe, pour revenir à sa position de départ, ne prend pas le même chemin, elle ne revient pas en arrière. Vous aurez alors moins d'image à faire pour le bras, puisque vous pouvez utiliser chacune deux fois (excepté quand le bras atteint son maximum à l'arrière et son maximum à l'avant).

c-le buste et la tête
Oye. La tête du hérisson. Elle bouge, enfin tourne, mais en plus sur elle même. Ca, c'est plus compliqué à faire. Mais rassurez vous ! Encore une fois, c'est une animation de pro, en plus Sonic a une grosse tête, et c'est vrai que ça ajoute du peps à l'animation de la faire tourner, mais vous, vous ne saurez pas forcément faire cela, et tant mieux parce que vous n'allez pas le faire ! (J'aurais du mal à vous expliquer comment, parce que je n'y arrive pas non plus très bien, j'ai déjà essayé mais ça demande une bonne vue d'ensemble sur l'animation pour faire la tete sous divers angles sans que ça paraisse bizarre)
Encore une fois, si vous le faites tant mieux, ça ajoutera du tonus à votre anim, mais sachez que ce n'est pas forcément nécessaire, parce que tout le monde n'a pas la tête qui bouge en courant, et puis regardez les autres gifs, la tête ne bouge pas toujours
Le buste, c'est la même affaire, vous utiliserez le même pour toute l'animation. Mais par contre, il ne faudra pas garder celui de votre personnage à l'arrêt ! Lorsqu'on court vite, le buste s'incline, à environ 45 degrés. Et même lorsqu'on marche, on se penche un peu en avant. Donc redessinez le buste de votre personnage (et sa tête) selon le mouvement.

2-Brouillon d'animation
Ceux qui ont lu "le graphisme facile n°2" savent déjà que je conseille l'utilisation de stickmens avant de créer un personnage, parce que ça permet de s'assurer que la posture du personnage est dynamique, avant de le faire. Eh bien ça peut aussi servir en animation, mais pas qu'au dynamisme, à la fluidité surtout !

-Comme on a vu que les jambes et les bras pouvaient se dupliquer, on va faire membre par membre pour ensuite les superposer et afficher tout ça correctement.-

Donc avant de se lancer à faire chaque membre et au moment de l'assemblage, se rendre compte que c'est complètement zarb et raté, on peut faire un stickman animé, parce que lui au moins, il est pas long à faire, et si son animation n'est pas correcte, on a juste à modifier les "bâtons" sur la frame incorrecte, et pas décaler plein de pixels d'un perso fini. Faire un stickman permet de vérifier toute la fluidité de l'animation plutôt que d'être déçu après avoir perdu son temps d'une animation ratée.

Je vous présente les deux personnages avec lesquels je dois faire une animation de marche:

Au début j'étais censé le faire uniquement avec le petit semi-homme de droite, mais on m'a fait une commande de sprite humain, celui de droite, et comme je vais lui aussi lui faire une animation de marche et qu'il est beaucoup plus grand, je pense que ça vaut plus le coup de vous le montrer.
De toute façon, ce sera une marche avec le grand personnage et une course avec le petit.

Nous allons animer le membres uns par uns pour chaque personnage, puis les superposer pour obtenir l'animation. D'habitude je me sers du système de calque de photoshop pour cela, mais tout le monde ne dispose pas de ce logiciel, alors nous allons en utiliser un autre, que normalement la majorité d'entre vous possèdent : Game maker !
Avec son système de draw, il est aussi très utile pour superposer plusieurs sprites, et on pourra ainsi décaler toute l'animation d'un membre sans problème (la programmation au service de l'animation!)

Je duplique le sprite de mon grand perso, et je ne garde que le buste (j'ai choisi de le garder droit car ce sera une marche lente), ça donne la première image.

Ensuite, sur un autre sprite, j'ai repéré où se situe la jambe droite, et j'ai commencé à faire une jambe de stickman, en me basant sur l'animation du sonic. Ne faites pas attention aux deux premières images de la jambe, j'avais déjà commencé à faire les vrais contours par dessus. Mais c'est à ce moment que vous définissez la fluidité et le mouvement de la jambe pour toute l'animation, ensuite vous le conserverez en rajoutant les vrais contours.
Pendant ce temps avec mon semi-homme je répète la même opération, sauf que comme celui ci court, je vais devoir redessiner tout le corps.
J'ai d'abord fait un stickman complet pour avoir une idée des dimensions, puis j'ai dupliqué le sprite, je supprime les jambes du stickman dans le premier, et dans le deuxième, je ne garde que la jambe avant.

Ensuite j'ai commencé à l'animer:


Pour l'instant, on a juste des bustes fixes avec une jambe en bâton qui s'agite. On va regarder ce que donne pour l'instant notre petit bonhomme, dupliquez le sprite de la jambe animée, et décalez l'animation de 4 frames. Vous pouvez utiliser Images>cycle left et cycle right.
Ensuite, créez un objet qui aura le sprite de la première jambe.
Mettez dans son event draw :
draw_sprite("nom du sprite du buste",0,x,y)
draw_sprite("jambe2",image_index,x,y)
draw_sprite("jambe1",image_index,x,y)

Placez l'objet dans la room et lancez le jeu pour voir l'animation.
Comme ça, vous voyez les deux jambes animées s'agiter en même temps. Vous pouvez changer l'ordre des lignes de code pour ajuster la profondeur, la premier sprite affiché étant le sprite le plus au fond.
Et aussi, il faudra sans doute ajuster la position du sprite, donc utilisez des x+12, y+24 etc...

L'animation n'a pour l'instant pas grand intérêt, et un stickman, ce n'est pas ce qui nous intéresse. Donc, rouvrez le sprite de la première jambe, et commencez à dessiner les vrais contours par dessus, en respectant les dimensions du personnage, et en suivant la posture des bâtons. Il est conseillé de changer de couleur les bâtons pour pouvoir ensuite les supprimer facilement.

Voici la jambe de mon semi homme avec le contour, et l'autre personnage dont j'ai commencé à colorer la jambe.



Bien sûr, en animé, on voit mieux ce que ça donne :



Vous pouvez redupliquer le sprite de jambe et décaler de 4 frames pour remplacer l'autre sprite "jambe2", et déjà vous verrez que l'animation progresse.
Exemple de ce que ça donne :

Mais ce n'est pas encore fini bien sûr, cela n'est que pour vous encourager à continuer

3-Chopez la technique !
Pour continuer, il va falloir répéter l'opération, mais avec les autres membres, ici les bras. Je ne vais pas m'attarder, car c'est la même technique, vous faites d'abord en bâton, vous regardez avec le draw où bien placer le bras, puis vous rajoutez les vrais contours en vous assurant que ça reste correct, et vous continuez...

Un autre avantage d'utiliser les draw, c'est que vous pouvez, si vous avez fait un sprite trop grand, changer l'échelle d'affichage, avec draw_sprite_ext(sprite,subimg,x,y,xscale,yscale,rot,color,alpha)
En entrant des valeurs telles que 0.8, 0.6 au lieu de 1 pour rétrécir, ou 1.2 pour agrandir
Bien sûr pour utiliser cette commande, il vous faut game maker registré, mais vous pouvez aussi resizer dans le sprite editor, avec le menu Transform (moins bonne qualité). Cependant dès que vous changez l'xscale ou l'yscale le sprite sera forcément un peu déformé, il faudra alors plus tard faire quelques retouches. Mais de toute façon, elles sont inévitables.
Attention page déformée>

Spoiler:

Voici où vous en êtes : vous avez terminé l'animation dans votre gm6, avec différents sprites body, jambe1,jambe2,bras1,bras2 (vous pouvez déjà foncer un peu la couleur sur bras2 et jambe2, comme ils sont censés être "en fond", ça vous évitera des retouches compliquées), et l'animation vous convient. Comment allons nous récupérer tout cela ? Eh bien comme le font les rippeurs, lancez votre jeu en débug mode (flèche rouge) puis profitez en pour faire set speed et réduisez la vitesse (en mettant à 10 sur 30, vous pourrez la regarder en une vitesse plus adaptée à l'animation de 8 frame en général, mais vous pouvez aussi directement régler dans votre objet de mettre l'image_speed à 1/3 par exemple. Enfin toujours est il que je ne vous ai pas demander de lancer en debug mode pour regarder l'animation à la bonne vitesse, mais réduire fortement la vitesse de jeu et ripper ainsi plus facilement.
Lancez en même temps un programme où vous pourrez récupérer toutes vos captures facilement, et prenez les différentes frames, en laissant la fenêtre de jeu à la même hauteur bien sûr pour que le perso se trouve toujours à la même place sur chaque capture, ça facilitera la tâche.

Une fois que vous avez les 8 frames, trop grandes, redimmensionnez les, ne gardez que la zone où l'on voit le personnage, en vous assurant que sur aucune frame il n'est coupé. Mettez en l'ordre les frames, par exemple sous l'éditeur de sprite de game maker (vous pouvez directement coller les captures ici mais ça risque de ramer un peu car game maker a du mal à gérer les grosses images) et voilà ce que vous devriez obtenir.

Votre perso animé, mais pas encore fini, d'ailleurs on dirait qu'il flotte de façon ridicule.

Pour ça, c'est pas dur. Réferez vous à une ligne imaginaire, par exemple le bas de l'image, comme si c'était le sol, sur lequel votre personnage marche. Dans chaque image, baissez le au maximum, de sorte que ses pieds soient toujours posés sur l'image (Notez que pour les images numéro 1 et numéro 5 -par rapport au sonic- vous pouvez le décoller légèrement du sol, de sorte qu'il "bondisse" en marchant / ou plûtot en courant, ce n'est pas vraiment conseillé pour une marche)

Après avoir modifié cela, votre perso devrait déjà plus sembler avancer (si vous avez bien fait les jambes d'une bonne taille, en gardant leurs proportions tout au long de l'animation et en faisant exécuter le bon mouvement, au moment où vous descendez le personnage, il doit se trouver à chaque fois où il doit être :-D )
Voilà ce que ça donne (pour le semi homme, la masse verte derrière c'est parce que j'avais ajouté une pseudo cape) :

Vous êtes Happy ? Pourtant le travail n'est pas fini, d'ailleurs, comparez ces deux là :

ça ne colle pas du tout ! les styles des sprites sont complètement différents, les traits noirs à l'intérieur, quelques trucs pas fignolés...
Pour ça, qu'une seule solution : retoucher

4-Retouchez, un beau sprite servira dans tout un jeu, et on ne se lassera pas de le revoir

Game maker dispose d'une fonction intéressante, si vous avez votre animation, vous pouvez faire File>save as strip, et vous aurez votre animation sous forme
d'une BD, dont chaque image représente une frame. C'est sous cette forme qu'on trouve beaucoup de sprites sous internet, sur spriter ressource ou shyguy kingdom. Les enregistrer sous cette forme permet, notamment, quand vous avez une animation avec un nombre de couleur assez élevé, de ne pas en perdre, car le .gif, format animé, est limité à 256 couleurs je crois
Mais les enregistrer en strip permet aussi de les modifier plus aisément, et ensuite faire toutes les modifications sur une seule image...
Pour ça encore, je ne vais pas beaucoup expliquer, car c'est avant tout un travail d'observation que vous devez faire sur quoi bouger et pourquoi. J'ai choisi pour mon semi homme d'animer sa petite cape, et de faire bouger ses cheveux selon qu'il monte ou descende. J'ai aussi retouché certains traits du pantalon, des pieds, des mains et des bras (changements de couleurs) et pour finir j'ai redescendu un peu le gilet sur la jambe, autrement il semblait coupé (à cause des membres animés).

Voici pour le semi homme...
avant :


après:



...Et pour l'autre personnage :

Avant :

Après :

Un autre personnage animé avec cette méthode :



Voilà, j'espère que ce tutorial ne sera pas trop inutile que certains prendront le temps de le lire car faire de bonnes animation(ou du moins fluides et, je pense, correcte pour nous qui sommes des amateurs) est quelque chose de vraiment simple, seulement long, il faut prendre son temps et s'appliquer, le résultat en vaut la peine





Je pense que c'est fini, je rajouterais l'autre anim quand je l'aurais finie, désolé des deux postes mais le premier message dépassait la limite autorisée :gniah:

C'est le meilleur et les plus utile de tes 3 tutos je trouve

Moi qui ai du mal pour faire une animation de se genre, sa va me servir ^^

(lol semi-homme :gniah: )

Mais ce doit être super long à faire !

En tout cas, le tuto est d'une sacré qualité

C'est celui des trois que j'ai le plus hésité à faire, surtout parce que j'étais pas sûr de moi même faire quelque chose de potable, j'ai fait plusieurs essais pour peaufiner ma technique avant

Et Topaze, comme je vais sûrement faire aussi une marche simple pour mon semi homme, si tu veux la prochaine fois je me chronomètre pour savoir le temps environ, mais moi je fais en plusieurs fois

Pas mal du tout! Ta série de tutorial va toujours en s'améliorant. Je peux le mettre sur le site?

Yay

Merci. je l'ai préparé, j'aurai juste à presser sur publier maintenant lorsque tu auras fini la dernière animation.

super!!
enfin un tuto utile :nezrouge:
vraiment très bien fait, ca reprend un peu des autre mais mieu exipliquer(je pense)
continue ca va m'etre utile a moi et mes stickman

J'ai pas encore fini l'autre (pas continué lol) mais ça viendra...
J'ai fait une autre anim de marche : celle de l'Orc de rem, et j'ai regardé le temps que j'ai mis cette fois, comme je l'ai fait d'une seule traite, et j'y ai mis environ 45 minutes.

Un des persos de Cbna Battle

LoL j'adore.

pour ton homme je les prit pour jeux jer le droit :p_merci:

hmm ben bof, ça me regarde pas vraiment parce que je le fais pour quelqu'un, qui va sans doute l'utiliser donc après si ya ton perso dans un autre jeu... enfin c'est toi qui vois
Mais t'as pris lequel précisément ?
Car moi je parle pour le grand, mais si tu as pris le petit, alors là désolé mais je n'aimerais mieux pas que tu le prennes
Car je m'en sers.

jer pri le grand sans bras ^^

J'ai rajouté le grand personnage retouché, ainsin que l'orc de rem.
Le bras est un peu bizarre pour le grand personnage Argh :pac_dr:

Je peux le poster quand? :sourire:

Quand tu veux lol, tu fais comme tu veux :sourire:
Je crois que je ferais plus de tutoriels graphiques, j'ai juste une autre idée mais bon, les autres si j'en faisais ce serait du remplissage, j'ai fait ce que je voulais

C'est déjà pas mal c'est 3 tutos, on a appris comment faire assez facilement des sprites et les animer.

Oui j'ai trouvé ça assez instructif, je vois pas ce que tu pourrai faire de plus les techniques que tu as montré sont suffisantes. Et powerful.

Vraiment cool ce tuto je vais enfin pouvoir faire mes petits personnages tout seul merci robotic

waw gg robotic76

franchement c'est du bô boulot

So goude so goude aie fil goude

awou té la wouna

[_]

Ce tuto n' est toujours pas sur le site, ça va pas du tout !

:p_lol: .
vive le repertoire d'attente ! =D