Générer un sprite à partir d'un artwork et l'animer avec PixelOver

0 Replies • 792 Views

Bonjour, ce tutoriel vous donnera les clés pour réaliser une animation par os en pixel art à partir d'un artwork avec PixelOver.

Sommaire
  • Prérequis et alternative
  • Le découpage et remplissage
  • Importation et rigging
  • L’animation
  • Export

I. Prérequis et alternative

Pour ce tutoriel, vous devez avoir un artwork à animer. J'utiliserai un artwork de Smiley-Fakemon. Assurez vous d'avoir l'autorisation d'utiliser et de modifier l'artwork avant de l'utiliser dans votre jeu.



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. Le logiciel est payant (il y a une version d'essai avec toutes les fonctionnalités sauf l'export), si vous voulez une alternative gratuite vous pouvez utiliser Spriter : Créer un sprite animé type 5G avec Spriter.

L'avantage d'utiliser PixelOver :
  • Des outils pour pixeliser directement un artwork.
  • Meilleurs lines grâce à un algorithme de rotation pour le pixel art.
  • Pouvoir ajouter des trails.
  • Gérer des images animés (gif, spritesheet,...) alors qu'avec Spriter il faut remplacer l'image pour l'animer.

II. Le 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.

III. 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 !

IV. L’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.



V. 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. Project exemple : https://drive.google.com/file/d/1k6sRZrSsUrNAVUZCQkYc21-wJ269RgNH/view?usp=sharing



Si vous souhaitez obtenir plus de précisions, n'hésitez pas à créer un post ici https://deakcor.itch.io/pixelover/community.
Je developpe des jeux et des applis, ils sont accessibles sur Itch.io.

There was an error while thanking
Thanking...