Animation d'os 2D

Dans ce tutoriel, vous apprendrez à créer une animation d'os en pixel art 2D dans PixelOver.
Nous partirons d'une seule illustration, la découperons en parties, la riggerons avec des os, l'animerons et exporterons l'animation de sprite finale.

Prérequis

Pour ce tutoriel, vous avez besoin d'une illustration à animer.
J'utilise une illustration de Smiley-Fakemon.

Avant le rigging, l'illustration doit être découpée en parties séparées (tête, torse, ailes, pattes, etc.).
Si vous ne savez pas comment faire, consultez d'abord ce tutoriel :
Découper des dessins en objets

Ensuite, nous utiliserons PixelOver pour pixeliser l'illustration et l'animer à l'aide d'os.

1. Découper et remplir l'illustration

La première étape consiste à découper l'illustration en parties indépendantes.
Ces parties seront ensuite animées séparément.

Les parties typiques incluent :

• tête
• torse
• ailes
• pattes / jambes
• queue
• accessoires (le cas échéant)

Remplir les zones cachées (important)

Après le découpage, vous devez remplir les zones cachées derrière chaque partie.

Par exemple :

• l'aile cache une partie du torse
• le torse cache une partie de la base de l'aile
• les pattes peuvent cacher une partie des jambes

Même un remplissage rapide suffit généralement, car les petites imperfections deviennent moins visibles une fois l'illustration pixelisée.

Exporter chaque partie

Exportez chaque partie séparée dans un fichier image différent.
Vous pouvez télécharger les images de cet exemple :
Télécharger les parties découpées (.zip)

2. Importer les images dans PixelOver

Ouvrez PixelOver, puis glissez-déposez toutes vos images de parties dans le projet.

À l'import, choisissez de les importer comme images séparées (pas comme une image animée).

Il est aussi recommandé d'importer l'illustration complète d'origine comme image de référence.

3. Redimensionner votre illustration (optionnel mais recommandé)

Si besoin, vous pouvez sélectionner plusieurs images à la fois (Maj + clic gauche) et les redimensionner ensemble.

C'est utile pour ajuster rapidement l'échelle pixel art souhaitée avant d'appliquer le shader.

4. Appliquer un shader pixel art

Appliquez maintenant un shader pour obtenir le rendu pixel art.

Vous pouvez :

• charger un shader préréglé depuis la barre supérieure
• ou ajuster les paramètres du shader dans le panneau de droite

5. Rigging : créer la structure d'os

Désélectionnez toutes les images, puis sélectionnez l'outil os.

Créer les os

Utilisez cliquer + glisser pour créer des os dans la vue.

Créez une hiérarchie propre (parent → enfant), par exemple :

• Root
  • Bone_Torso
  • Bone_Head
    • Bone_Wing_L
    • Bone_Wing_R
    • Bone_Leg_L
    • Bone_Leg_R
    • Bone_Tail

Parenter les images sous les os

À ce stade, les os n'affectent pas automatiquement les images.
Pour lier une partie de sprite à un os, il suffit de parenter l'image sous l'os dans l'arbre de scène.

Exemple :

• Bone_Torso
  • Torso_Image
  • Bone_Head
    • Head_Image

Vous pouvez utiliser le couper/coller ou le parentage par glisser-déposer dans l'arbre de scène.

Une fois toutes les parties correctement parentées, votre rig devrait ressembler à une hiérarchie complète :

À ce stade, le rigging est terminé.
Nous pouvons maintenant commencer à animer.

6. Animation

Ouvrez le panneau d'animation en bas de l'interface.

Renommez votre animation, puis configurez :

• la durée
• les FPS (images par seconde)

Créer les premières clefs

Sélectionnez tous les os, puis cliquez sur les icônes de clef pour créer des clefs pour :

• Position
• Rotation

Cela crée la pose de base pour la frame 0.

Ajouter d'autres poses

Avancez le curseur de la chronologie.
Posez les os pour créer la frame suivante.

Si le bouton REC est activé, les clefs seront créées automatiquement lorsque vous modifiez les os.

Dupliquer des clefs pour accélérer le travail

Pour gagner du temps, vous pouvez sélectionner des clefs et les dupliquer à la position actuelle du curseur.

Réinitialiser les os à la pose de repos

À tout moment, vous pouvez forcer les os à revenir à leur position de repos.

Exemple d'animation (saut)

Pour cet exemple, le personnage effectue un saut :

Améliorer les transitions

Pour rendre l'animation plus fluide, vous pouvez :

• ajuster le timing des clefs
• appliquer de l'accélération sur les clefs
• affiner manuellement les transitions

7. Export

Avant d'exporter :

• vérifiez que les FPS de votre animation sont corrects
• masquez les os à l'aide du bouton en haut à droite si besoin (meilleur aperçu)

Ouvrez ensuite la boîte de dialogue d'export :

Projet > Exporter...

Vous pouvez exporter comme :

• séquence PNG
• GIF
• feuille de sprite

Vous pouvez aussi :

• redimensionner la taille des pixels
• séparer les animations dans des dossiers
• prévisualiser le nombre de frames qui seront générées

Résultat final :

Ce projet et d'autres exemples sont disponibles dans les fichiers de téléchargement de PixelOver (y compris la démo) :
https://deakcor.itch.io/pixelover#purchase