V. Animation

1) intro

références
Western Spaghetti, par PES: https://www.youtube.com/watch?v=qBjLW5_dGAM
Shawn the Sheep, série et film produits par Aardman Animation: https://www.youtube.com/user/aardmanshaunthesheep
L’étrange Noel de Mister Jack (The Nightmare Before Christmas), réalisé par Henry Selick
Ma vie de Courgette, réalisé par Claude Barras
Le petit prince (2015), réalisé par Mark Osborne, stop-motion animée par le studio TouTenKartoon https://toutenkartoon.ca/
Luminaris, par Juan Pablo Zaramella
Neighbours, réalisé par Norman McLaren, produit par l’ONF/NFB (Office National du Film canadien)
Parvana (the breadwinner), réalisé par Nora Twomey
Les 101 Dalmatiens, produit par Disney
Le Roi et L’oiseau, de Paul Grimault et Jacques Prévert
Cuphead, par Studio MDHR
Tangle Tower, par SFB games https://sfbgames.com/press/sheet.php?p=tangle_tower
Later Alligator, par PillowFight Games et SmallBu Animation https://press.pillowfight.io/later_alligator/index.html
Jotun, par Thunder Lotus Games https://thunderlotusgames.com/jotun/
Teen Titans Go!, produit par Cartoon Network
Team Fortress 2, par Valve
Abzu, par GiantSquid https://abzugame.com/

2) principes d’animation 1

  • timing
    • plus les images sont rapprochées dans l’espace (plus le personnage est à un endroit proche de l’image d’avant), plus ça bouge lentement
    • plus les images sont rapprochées dans le temps (sur la timeline), plus ça bouge vite
    • plus le framerate (fréquence d’images) est élevé plus ça va vite
    • par exemple:
      • pour une action très rapide, on voudra une image différente par frame (pour la partie très rapide en tous cas), et éventuellement un framerate de 24fps
      • pour une action très lente (un idle par exemple), un framerate de 12fps et une image toutes les une ou deux frames selon les images peuvent suffire
      • mais globalement essayer de ne pas avoir moins de 12 images/secondes à part pour un idle
      • utiliser l’espace plutôt que le temps pour gérer le rythme dans l’anim finale
  • varier les rythmes
    • les robots/machines ont tendance à avoir des mouvements plus réguliers
    • typiquement un mouvement organique est plus lent au départ et à l’arrivée
      • s’il y a beaucoup de force derrière ce mouvement, il aura une très forte anticipation et un rebond à l’arrivée
    • changement de direction: plus de temps, ralentissement (cf vidéo de mouvement de pendule)
      • le ralentissement est d’autant plus visible que l’objet mouvant est lourd et qu’il va vite
      • impression soulignée s’il y a un élément qui suit (cheveux, écharpe, queue, etc.) (un exemple, un autre exemple)

3) outils d’animation

  • Menu Frame
    • ajouter / supprimer une frame
    • changer la vitesse de l’animation: constant time rate
      • le cinéma en europe c’est 24fps, la télé 25
      • aux Etats-Unis, la télé c’est 30fps.
      • converti en millisecondes, ça donne: 25fps: 40ms; 12.5fps: 80ms; 8fps: 125ms; 6.25fps: 160ms
      • 25 c’est très fluide (pour des mouvements rapides), 12.5 c’est bien, 6 ça va pour un idle mais sinon c’est un peu limite
      • toujours utiliser un constant time rate, et au besoin doubler des images pour les faire durer plus longtemps
  • panneau des calques
    • déplacer / copier des frames (sélectionner, ctrl cliquer-glisser le contour)
    • calques continus / clic droit > Unlink
    • Alt Scroll molette pour se déplacer dans le temps
    • changer la durée de l’onionskin (cliquer glisser sur la timeline)
    • /!\ quand vous supprimez une image de l’animation (et que vous avez plusieurs calques), cliquez toujours dessus avant dans le panneau des calques et vérifiez qu’elle ne supprime pas la frame sur tous les calques
  • options de l’Onion Skin
    • Merge Frame vs Red/Blue Tint
    • activer Current Layer Only si on a un arriète-plan, le désactiver si notre perso est séparé en plusieurs calques

–
EXERCICE 7
faire traverser l’image à un trait suivant différents rythmes (taille de l’image: 128x32 ou 256x64)

  • régulier
  • début lent, accélération
  • début rapide, décélération
  • quasi instantané (sans dessiner dans l’espace entre l’image de début et l’image de fin)

EXERCICE 8

  • ouvrir une image de 64*64
  • prendre une brosse ronde d’environ 10px
  • sur l’image 3, faire un point dans le coin en bas à gauche (qui ne touche pas les bords)
  • les images 1 et 2 peuvent soit être vides soit être des copies continues de l’image 3
  • sur l’image 8, faire un point en haut au milieu
  • sur l’image 13, faire un point en bas à droite
  • les images 14 et 15 peuvent soit être vides soit être des copies continues de l’image 13
  • remplir les images vides du milieu (si vous avez besoin de plus ou moins d’images vous pouvez en ajouter ou enlever)

–

4) principes d’animation 2

  • anticipation (prendre de l’élan) - action - réaction (cf un gif)
    • pour la défense/esquive du joueur, diminuer l’anticipation pour augmenter la réactivité
    • pour l’attaque des ennemis, augmenter l’anticipation pour donner au joueur le temps de réagir
    • l’anticipation sert à préparer le joueur pour qu’il lise mieux l’action
      • et aussi ça fait des animations plus vraisemblables
      • mais quand c’est le personnage que le joueur contrôle il sait déjà ce qu’il va faire
        • donc on n’a pas besoin de prévenir le joueur
          • on perd en vraisemblance mais c’est la vie
            • si vous voulez pouvoir faire des anims vraiment dans les règles ne faites pas un jeu d’action
  • intervalles réguliers
  • courbes
    • savoir d’où tu viens où tu vas
  • anims décalées
    • une bonne boucle c’est une boucle pour laquelle on peut pas distinguer quelles sont la première et la dernière image (il n’y a pas d’à-coup)
      • pour certains types d’animation (feu, vent dans un arbre, etc.), avoir plusieurs sous-boucles qui commencent à des frames différentes peut aider
  • les poses-clé doivent être très claires, aussi bien pour le personnage que pour l’action
    • les intervalles peuvent être un peu moches
      • ce qui compte c’est que l’anim globale soit bien
  • squash and stretch, déformations (cf une animation des looney tunes à regarder image par image)
  • de l’importance de l’anim de “personnage blessé”
    • parce que FEEDBACK!!!
  • anim de marche (différence marche/course)
    • il doit y avoir une différence de hauteur de la tête (à cause de la hauteur des hanches, en fait) pendant la marche/course
      marche
    • jambe/bras opposés
    • inclinaison du torse: un torse plus incliné vers l’avant traduit souvent une vitesse plus grande - sauf pour les athlètes, qui courent avec le torse droit.
    • le centre de gravité doit être entre les points d’appuis ou la position cesse d’être stable et le personnage / l’objet tombe (ou saute, s’il a donné une impulsion)
  • /!\ pour une animation de jeu, toujours animer une boucle qui fait du sur-place. C’est le moteur de jeu qui se chargera de la faire se déplacer
  • saut en jeu
    • pas juste une anim mais trois à cinq bouts d’anim
      • début du saut
        • tenir
      • transition
        • tenir
      • atterrissage
  • anim ondulation: vague/fumée/vent/queue/drapeau/etc.
  • animations standard d’un personnage d’un jeu de combat:
    • idle
    • marche et/ou course
    • une ou plusieurs attaques
    • mort
    • personnage touché
    • saut (si platformer)

références
Looney Tunes, par Warner Bros

3) export

  • suite d’images
    • File > Save As (choisir le format .png)
    • si on nomme son fichier {tag}_quelqueChose.png, les noms des images comprendront le nom de son tag (pratique pour exporter plusieurs anims à partir d’un seul fichier).
  • spritesheet
    • File > Export Spritesheet (si Padding, choisir Shape)

97) exercices

1) étude du timing

  • dessiner un trait.
  • Une anim où il traverse l’écran de gauche à droite à une vitesse régulière.
  • Une autre où il accélère.
  • Une autre où il ralentit.
  • Une autre où il le traverse quasi instantanément.
    correction

2) étude du timing 2 et des courbes

  • ouvrir une image de 64*64
  • prendre une brosse ronde d’environ 10px
  • sur l’image 3, faire un point dans le coin en bas à gauche (qui ne touche pas les bords)
  • les images 1 et 2 peuvent soit être vides soit être des copies continues de l’image 3
  • sur l’image 8, faire un point en haut au milieu
  • sur l’image 13, faire un point en bas à droite
  • les images 14 et 15 peuvent soit être vides soit être des copies continues de l’image 13
  • remplir les images vides du milieu (si vous avez besoin de plus ou moins d’images vous pouvez en ajouter ou enlever)
    correction

3) animation de marche/course
faire une animation de marche/course

4) animation de saut
animer un saut (utilisable dans un jeu vidéo: différentes étapes, boucle)

2) courbes d’animation

  • dessiner un perso; qu’il soit en position de base de idle; copier cette frame à la frame 3O. Activer l’onionskin avec trois frames devant et trois frames derrière (ou d’une autre manière si c’est plus confortable pour vous). Utiliser une palette réduite pour que ce soit plus rapide à animer.
  • En s’aidant de l’onionskin, faire une anim qui boucle (éventuellement au cours du processus d’animation déplacer la frame de fin si l’anim ne fait pas 30 images): esquive, saut, ou attaque.
  • Sur un autre calque, non animé, noter dans une couleur non utilisée ailleurs la position des yeux à chaque frame, et de l’extrémité de chaque membre (mains, jambes, pattes) dans d’autres couleurs.
  • Vérifier si ça suit autant que possible une courbe, et que les espacements entre deux points sont réguliers; si non, modifier l’animation pour que ça soit davantage le cas.

3) intervalles (et silhouettes)

  • dessiner un perso, choisir une action.
  • Décrire l’action en trois à cinq silhouettes (possibilité de marquer l’oeil, mais c’est tout).
  • Ajuster le timing en déplaçant les keyframes dans le temps.
  • Une fois que c’est bon, ajouter des couleurs.
  • Ajouter des silhouettes entre.
  • Ajuster le timing et les courbes du mouvement (cf exercice 2)
  • ajouter des silhouettes.
  • Quand le mouvement a suffisament d’images, mettre en couleur ce qui ne l’est pas.

4) illustration du principe de l’inertie

  • tenir un tissu entre ses doigts, en en laissant pendre une grosse partie (par exemple un t-shirt, tenu aux épaules). Avancer les mains brusquement de 30 centimètres, observer le délai avec lequel le reste du tissu suit le mouvement. Tester une action unique (avancer les mains une fois) et une boucle (faire un mouvement de va-et-vient sans s’arrêter). Tester avec des matériaux plus ou moins rigides et lourds (veste en cuir, chemise légère, etc.)
  • Dessiner un perso avec un élément secondaire inerte ou semi-inerte (un gosse qui traine un doudou, un personnage avec une queue, une ceinture, une écharpe, ou des cheveux longs, une cape, une pousse de plante sur la tête, etc.).
  • Animer un mouvement brusque.
  • Etudier comment l’élément secondaire agit.

99) Plus de ressources (principalement en anglais)

100) Ressources en français ou visuelles