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.
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.
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 :
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 :
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. 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 !
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.
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 :
(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
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.
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 :
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. 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.
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.
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 !
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
Pour référence, les frames et délais associés pour réaliser les deux animations :
Spoiler : Perso qui parle :
Spoiler : Perso qui ne parle pas :