[TUTO] L'animation d'un sprite

Posez toutes vos question concernant la création de procès sur AAO, ou proposez des tutoriaux pour aider les autres membres !
Post Reply
User avatar
Silver Glas
Posts: 3753
Joined: Sun May 16, 2010 12:15 pm
Gender: Male
Spoken languages: Français - English

[TUTO] L'animation d'un sprite

Post by Silver Glas »

Image
Note : Ce tutorial est un complément à celui de Tear qui explique lui comment réaliser un sprite. J'utilise d'ailleurs son sprite pour ce tutoriel.

Hello tout le monde ! Je poste ce petit tutorial parce que je sais que certaines personnes ont des difficultés pour réaliser les animations de leurs sprites, et je pense que ce qui va suivre peut servir. :)

Avant de commencer le tutoriel en lui-même, il va nous falloir un logiciel pour éditer les images (J'utilise de mon côté Paint.NET, mais Paint, Gimp et compagnie marchent aussi, tout dépend de ce avec quoi vous êtes le plus à l'aise) et un logiciel pour faire l'animation. Pour ce dernier j'utilise Beneton Movie Gif parce que j'ai toujours utilisé ça, et selon votre logiciel à vous les manipulations seront différentes, mais l'idée générale est la même.

_______________________

Avant de pouvoir animer votre sprite, il va falloir faire différentes variations : Le clignement des yeux ainsi que les mouvements de bouche. Du coup, on va copier notre sprite plusieurs fois sur une image pour avoir non seulement le sprite de base mais aussi les variations sur une même image.

Image

Les frames ou le personnage cligne des yeux (AKA la partie facile):

On va commencer par faire le sprite avec les yeux mi-fermés. Pour ça, il suffit de prendre un de nos sprites, et de tracer une ligne courbée avec une couleur bien visible (comme du rouge si votre sprite n'en contient pas) qui coupe l'oeil en deux.

Image

On a tracé la ligne, maintenant il va falloir enlever la partie des yeux au-dessus de la ligne (évidemment on fait ça au crayon pour être aussi précis que possible et pas toucher à autre chose). Une fois que c'est fait, on peut recolorer notre ligne soit avec la couleur la plus foncée de la peau soit avec celle des sourcils (c'est de la pure préférence, j'ai utilisé celle des sourcils pour ce sprite). Pour finir on va retoucher un peu la ligne (en ajoutant/supprimant des pixels, en faisant de l'anti-aliasing et j'en passe). Au final on obtiendra quelque chose de ce genre :

Image

Pour avoir un sprite avec les yeux totalement fermés, la technique est la même mis à part qu'on trace une ligne sur le bas de l'oeil :

Image

Image

Une fois que c'est fait, on a donc un sprite avec les yeux ouverts, à moitié ouverts et fermés. C'est déjà bien, mais on ira pas très loin avec ça à moins que le personnage ne parle jamais. :hotti: On va donc s'attaquer maintenant à...

Les frames ou la bouche du personnage bouge (AKA la partie moins facile):

Déjà si vous avez réussi à faire un sprite avec cette méthode ça veut dire que vous savez faire du frankensprite, et ça tombe bien puisque que c'est comme ça qu'on va faire pour la bouche !

Image

Vu que notre base pour le bas de la tête était Hunter jeune, on a été récupérer les mouvements de bouche de son sheet. De là, la technique est la même que pour le frankensprite : Recolorer, éditer des bouts pour que tout s'assemble bien... je vous apprends plus rien. ;)

Image

On refera la même chose pour la bouche mi-ouverte, et on aura enfin toutes les variations dont on a besoin pour faire nos animations !

Avant d'animer :

Avant de faire les animations, revérifions bien que nous avons tout :

Image

(Les F1, F2, etc. que vous voyez en dessous des sprites sont là comme référence personnelle : ça me permet de me repérer plus facilement lors de l'animation.)

On a bien nos 5 sprites, maintenant il va falloir que l'on crée les frames afin d'animer le sprite. Pour ça créez une nouvelle image de taille 256x192, et collez le sprite F1 dedans. Placez-le sur l'image, assurez vous que le fond est d'une couleur qui n'est pas utilisée dans votre sprite (recolorez le si c'est le cas) et enregistrez l'image en .png avec le nom que vous voulez. Sur ma référence, le sprite avec les yeux ouverts et la bouche fermée est F1 donc on appellera l'image suivante F1.png

Image

Faites ça avec toutes les variations de sprites en vous assurant que tous les sprites sont bien alignés. Pour vous aider, copiez-collez juste les parties qui changent sur F1.png et réenregistrez l'image avec le nom "FX.png" (X étant le numéro correspondant à ma référence). Si tout est bon vous aurez 5 images en png, de F1 à F5 !

Ce que vous attendiez tous, l'animation en elle-même

Pour l'animation, j'utilise Beneton Movie Gif. Si vous utilisez autre chose comme GIMP je pourrais pas trop aider :/

Une fois que vous avez ouvert le logiciel, on va lui dire d'ouvrir les frames pour pouvoir animer. Pour ça, cliquez sur "Add frames from a file", et allez chercher le dossier dans lequel vous avez sauvegardé les frames.

Image

Une fois que vous avez trouvé le dossier en question, on va faire la manoeuvre 4 fois et ajouter dans l'ordre F1, F2, F3 et encore une fois F2. On obtiendra normalement ceci :

Image

Quand on est là, on va sélectionner toutes nos frames en bas en cliquant sur une puis Ctrl+A, et on va s'intéresser à ce qu'il y a au-dessus de la preview : Delay et Transparent. Le premier correspond au temps en centisecondes durant laquelle la frame va s'afficher, et le second coule de source. :hotti: On va donc mettre 18 dans le Delay et cocher la case Transparent à chaque fois.
Une fois que c'est fait, on va sélectionner toutes nos frames, les copier et les coller trois fois. Pour être sûr de les coller au bon endroit, on va à chaque fois faire clic droit sur la dernière frame en bas puis "Paste after." On arrivera à 16 frames.

Image

Et maintenant on va ajouter un truc qui à l'air dur à réaliser mais qui est en réalité très simple : L'animation des yeux pendant que le personnage parle !
Pour ça, après la frame 16, on va ajouter avec la même technique qu'au début les frames suivantes : F4, F5 et F4. Quand c'est fait, il nous suffira de les sélectionner toutes les 3 et de mettre 6 dans le Delay.

Image

Enfin, pour finir notre animation avec le personnage qui parle, on va rajouter derrière ces frames F2, puis F3 et enfin F2. Comme au tout début, on leur mettra un Delay de 18. Maintenant que c'est fait vous devriez avoir normalement un gif de 22 frames comme sur l'image au dessus !

Image

Si les paramètres sont les suivants vous avez juste à faire OK et enregistrer votre gif ! Sinon réglez-les comme ça é_è

Et voilà, vous savez maintenant comment animer un sprite, et vous obtiendrez une animation comme celle-ci :)

Image

Pour référence, les frames et délais associés pour réaliser les deux animations :
Spoiler : Perso qui parle :
F1, F2, F3, F2 (x4), F4, F5, F4, F2, F3, F2

F1, F2 et F3 ont toujours un délai de 18 centisecondes.
F4 et F5 ont toujours un délai de 6 centisecondes.
Spoiler : Perso qui ne parle pas :
F1, F4, F5, F4, F1

La première F1 a un délai de 166 centiseconde et la seconde un délai de 333 centisecondes.
F4 et F5 ont toujours un délai de 10 centisecondes.
Image
Tear
Posts: 19211
Joined: Thu Aug 14, 2008 9:57 pm
Gender: Male
Spoken languages: Français, English

Re: [TUTO] L'animation d'un sprite

Post by Tear »

C'est vraiment bien expliqué !
User avatar
Jofe
Posts: 14411
Joined: Fri Jun 10, 2011 1:44 am
Gender: Male
Spoken languages: Français [100%], English [70%]

Re: [TUTO] L'animation d'un sprite

Post by Jofe »

Très sympa. Personnellement j'ai toujours eu plus de mal à animer les yeux alors qu'expliquer comme ça, c'est vrai que c'est pas sorcier. Et merci pour les délais.
Image Image Image Image Image
User avatar
Milesedgeworth123
Posts: 146
Joined: Sun Oct 04, 2015 10:28 pm
Gender: Male
Spoken languages: francais, anglais

Re: [TUTO] L'animation d'un sprite

Post by Milesedgeworth123 »

Salut,

En fait du fait que je me sois basé sur mon dessin directement je n'arrive pas à avoir mes sprites sans qu'il y ai un cadre blanc autour et quand je les ouvre dans le logiciel pour les animer ils apparaissent en petit du coup je pense que je vais abandonner l'idée parce que je n'y arrive vraiment pas mais c'est cool d'avoir mis un tuto pour ça merci :)
Detective-Luke-Atmey
Posts: 24
Joined: Mon Apr 30, 2018 6:48 pm
Gender: Female
Spoken languages: France

Re: [TUTO] L'animation d'un sprite

Post by Detective-Luke-Atmey »

Salut,j'aimerais savoir comment faire pour décompresser un sprite (le séparer en plusieurs gif dans les étapes du mouvements du visage) déjà connu comme celui-ci par exemple Image sur mon photofiltre 7 afin de créer d'autres émotions animées + d'autres poses,pour ensuite les superposer sur d'autres corps et visages svp? :?: (par exemple Matt Moissat Image : lui enlever la sueur du visage doit être compliquer, qui pose sa main sur son bras comme le fait Hunter sur ce gif Image )
Spoiler : :
Image
Image
Post Reply