Animation par os
Bonjour, ce tutoriel vous donnera les clés pour réaliser une animation par os en pixel art à partir d’un artwork.
Sommaire
1. Prérequis
Pour ce tutoriel, vous devez avoir un artwork à animer. J’utilise un artwork de Smiley-Fakemon
Vous devez également disposer d’un autre logiciel d’édition pour pouvoir couper et remplir le dessin. Par exemple Aseprite
Ensuite, on va utiliser PixelOver pour pixeliser l’artwork et l’animer.
2. Découpage et remplissage
Prochaine étape, nous allons diviser l’artwork en différentes parties indépendantes. La tête, le torse, les ailes, les pattes,… En gros, toutes les parties que vous voudrez bouger indépendamment.
Une fois que vous avez découpé les différentes parties, vous devez remplir les zones manquantes.
Par exemple, les ailes et le torse sont des parties mobiles, quand je les ai découpés j’ai re-rempli les zones cachées. Comme vous pouvez le voir, c’est fait très rapidement car le dessin sera pixellisé donc les petites erreurs disparaîtront.
Exportez les parties dans des images différentes. Images from this example
3. Importation et rigging
Maintenant, ouvrons PixelOver. Vous pouvez directement drag’n’drop toutes vos images depuis votre explorateur de fichiers vers PixelOver et choisissez d’importer différentes images au lieu d’une seule animée. (J’ai aussi mis l’image de base pour avoir une référence)
Il n’est pas encore nécessaire de réorganiser les images car vous devrez les déplacer en fils des os.
Au lieu de cela, vous pouvez sélectionner toutes les images de manière à les redimensionner pour mettre la taille que vous voulez pour votre pixel art.
Appliquez ensuite un shader ou modifiez directement les paramètres du shader.
Commençons à placer les os avec l’outil os.
Faites un drag’n’drop pour ajouter un os.
Mettons les autres os, utilisons le drag’n’drop pour les réordonner et utilisons la relation parent-enfant. N’oubliez pas de les renommer pour ne pas vous perdre.
Maintenant que le rigging est terminé, nous allons animer !
4. Animation
Ouvrez l’onglet animation en bas. Vous pouvez renommer l’animation, définir la durée et le nombre d’images par seconde.
Sélectionnez tous les os, maintenant il y a une icône de clé à côté des inputs. Cliquez sur cette icône pour ajouter une clé pour la Position et la Rotation de tous les os.
Avançons le curseur pour ajouter de nouvelles clés. Déplacez les os selon vos besoins si le bouton REC de clé est activé, les clés seront créées automatiquement.
Pour vous aider à créer l’animation, vous pouvez sélectionner les touches et les dupliquer sur le curseur.
Vous pouvez également forcer les os à revenir à leur position de repos à tout moment.
Par exemple, pour cette animation, j’ai choisi de faire un saut.
Ce que vous devez savoir, c’est que chaque mouvement doit être contrebalancé. S’il saute, il doit absorber le choc, et pas seulement revenir à sa position initiale.
Pour cela, vous pouvez utiliser la fonction d’easing sur les clés, mais il faut parfois le faire manuellement en ajoutant d’autres clés.
5. Export
Avant d’exporter, vous devez vous assurer de mettre la bonne valeur FPS, vous pouvez également cacher les os avec le bouton en haut à droite pour mieux voir l’animation.
Ensuite, vous pouvez aller sur le menu Projet pour exporter.
Vous pouvez choisir l’extension du fichier (png ou gif), modifier l’échelle des pixels et séparer les animations dans différents dossiers ou créer un spritesheet. Un message est également affiché pour savoir combien d’images seront créées.
Voici le résultat final pour cet exemple. Exemple de projet disponible en téléchargeant PixelOver (dans la démo également)
Si vous avez des questions, n’hésitez pas à consulter la communauté.