Posted on ven. 20 octobre 2017
Trois semaines de dur labeur sur Battle for Wesnoth et le projet touche à sa fin. J'ai donc décidé de vous faire un petit tuto sur l'animation en pixel art (qui, je l'admets, m'aura fait m'arracher quelques cheveux ^^).

Bien que j'avais déjà donné un aperçu la semaine dernière, je vais approfondir le sujet pour vous permettre de mieux comprendre le pourquoi du comment. Alors à vos tablettes graphiques et c'est parti !

Etape 1 : le découpage

Tout d'abord, il faut sélectionner son image de référence (c'est-à-dire la frame de base pour toutes les animations de ce personnage). Pour ma part, j'ai repris le pixel art de ma prêtresse au stade 2 afin d'illustrer ce tuto.

Prêtresse 2

Ensuite, on ouvre cette image dans Krita (ou tout autre logiciel possédant un outil de dessin et d'animation). Et on sélectionne les parties mobiles du personnages (celles qu'on souhaite animer), celles-ci variant selon l'animation désirée. Je suis parti ici sur une animation d'attaque et ai donc isolé les les bras et les flammes comme on peut le voir ci-dessous.

Découpage

Pour plus de précision je vous conseille une sélection rectangulaire pixel par pixel pour tous les éléments superposés.

Etape 2 : le dessin image par image

Nous voici donc arrivé à la phase la plus fastidieuse et chronophage (celle qui prend le plus de temps quoi) de l'animation ^^ Il s'agit du dessin de chacune des frames nécessaires pour animer le mouvement de votre personnage. C'est là qu'est tout l'intérêt de l'étape 1 : on modifie uniquement les parties mobiles sans avoir à tout redessiner l'image (vous n'êtes pas prêts d'avoir fini sinon).

image image image image image image image image image

Voici les 9 images utilisées pour animer mon attaque (dont celle de cépart). On constate donc que seuls les bras et les flammes ont été repris, le reste du corps n'ayant pas été modifié (la subtilité ici étant le mouvement constant des flammes). Vous devez également chosir les différentes phases du mouvement que vous souhaitez recréer (plus vous avez d'images, plus ce sera fluide).

Etape 3 : le peaufinage

Je n'ai pas trouvé de meilleur terme mais il s'agit ici de retravailler les images à l'aide afin de mieux les intégrer à l'univers du jeu (en l'occurence, Battle for Wesnoth). Ici je me suis contenté d'appliquer des filtres pour assombrir mes images, donner du relief au personnage et rejouter de la texture aux flammes.

image image image image image image image image image

Ici les filtres utilisés sont ceux de G'MIC : Light Glow pour les flammes, Relief Light et Dark Edges pour le corps. Il faut cependant les appliquer image par image.

Etape 4 : l'animation

Vous avez fini tous vos dessins, avez appliqué des filtres et êtes satisfait de votre travail ? Enfin, on va passer à la partie fun : l'animation des images à proprement parler ! :)

Animation

Rien de plus simple ici, vous avez seulement deux paramètres à prendre en compte : le nombre d'images par seconde et la vitesse de lecture. Il vous suffit juste de jouer avec les curseurs entourés ci-dessus et de lancer l'animation pour tester et trouver votre bonheur :)

anim

Voilà qui conclut donc ce petit tutoriel ainsi que le projet Wesnoth. Je vous invite également à consulter les articles de Maxime de Maryon qui traitent respectivement du dessin en pixel art et des techniques du portrait et d'animation. Sur ce, je vous dis à la prochaine :)

Fabian MOSAKOWSKI

Commentaires


Links