Dans un film d’animation, le design ne se limite évidemment pas aux personnages. On va aussi designer les objets, accessoires, et bien sûr les décors. Par exemple, voici notre processus pour le design de la “maison” de ZeMarmot… ou du moins la vue extérieure puisque nous ne voyons jamais l’intérieur (contrairement à la BD initiale que nous avions commencée).
Vous vous souvenez notre premier voyage de recherche? Nous avions trouvé alors, près du village de Saint-Véran, une colline avec un seul arbre au milieu.
L’arbre sur la colline: référence du film ZeMarmot
Et bien sûr, à son pied, un trou de terrier de marmotte.
Le trou du terrier dans les racines: référence du film ZeMarmot
On s’est dit que c’était vraiment cool. La plupart des entrées de terriers étaient juste des trous au milieu de plaines, alors celui-ci semblait un “trou spécial”. Notre personnage n’est pourtant pas une marmotte particulière. Ce n’est pas un leader hollywoodien, ni le chef du clan des marmottes, ou quoi que ce soit. Tout de même… c’est notre héros. Ce n’est pas n’importe quelle marmotte, c’est ZeMarmot! Pour cette raison, lui donner un terrier particulier semblait la chose à faire. C’est ainsi que ZeMarmot vit dorénavant sous un arbre!
La différence principale avec notre référence est que nous avons placé cet arbre dans une vallée et non sur une colline.
Voici l’entrée du terrier dans le storyboard:
Storyboard: entrée du terrier
Le dessin au propre:
Dessin: entrée du terrier
Avec des couleurs:
Entrée du terrier de ZeMarmot colorisé (travail en cours)
Notons que cette dernière image est un travail en cours. On a tout de même pensé que ce serait sympa de vous montrer la progression entre les photos de recherche, les sketchs de storyboard, le dessin puis enfin une colorisation.
J’espère que vous avez apprécié cet aperçu dans les coulisses de ZeMarmot! 🙂
Alors que nous sommes en pleine étape d’animation, on s’est dit que vous aimeriez un peu en savoir plus sur cette étape de production. Comment passe-t-on d’images statiques à images animées?
Storyboard, puis Animatique
Nous avons déjà parlé en long, en large et en travers de ces étapes, donc nous n’allons pas épiloguer. Nous vous conseillons de lire les blog posts des mois passés pour en savoir plus. Ce sont les étapes des images “purement statiques” type BD (storyboard) puis d’images statiques projetées en vidéo (animatique).
Key Framing
Avec le numérique, le sens terme “keyframe” a changé plusieurs fois. Ainsi dans les vidéos formats, on entend par “keyframe” une image qui est complète dans le flux vidéo, en oppositions aux images partielles qui n’ont de sens qu’associés à une keyframe précédente. Dans l’animation 3D ou vecteur, on va en général nommer keyframe les positions extrêmes dans une transition (mouvement de personnage par exemple), dont les positions intermédiaires sont calculées par un algorithme (interpolation ). C’est plus ou moins la définition donnée par Wikipedia pour une keyframe: “A key frame in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition.”
Cette définition est cependant un peu trop “mécanique”, liée aux méthodes modernes d’animer avec la 3D et le dessin vectoriel (ce n’est pas totalement vrai même avec ces techniques, mais avec un peu de paresse, en découvrant la magie de l’interpolation algorithmique, cela paraît être la définition pour beaucoup). Les keyframes sont en fait simplement des “images importantes”, ce qui est déterminé totalement subjectivement. Le Keyframing est donc une part de l’art de l’animateur, plutôt qu’une science. Bien sûr, très souvent, les keyframes sont des débuts/fins de mouvement, mais ce n’est pas une vérité absolue. On les appelle aussi parfois les “poses clés”; il s’agit donc des poses que l’animateur juge comme importantes pour rendre le mouvement juste, de manière totalement partiale comme pour tout œuvre.
Animation Pose à Pose vs Straight Ahead
Il y a 2 principales logiques pour animer. La première méthode consiste à décomposer le mouvement en poses clés (keyframes) dans un premier temps. Dans le second temps, quand vous êtes content du résultat, you pouvez ajouter les images intermédiaires (inbetweens). C’est la méthode pose à pose.
Dans un gros studio, les keyframes sont généralement dessinées par les animateurs expérimentés. Puis les assistants (animateurs juniors) dessineront les inbetweens après coup. Cela permet un peu plus de partage de travail, d’efficacité et de multi-tâche. Pour ZeMarmot malheureusement, Aryeom fait toutes les étapes elle-même, puisque nous n’avons pas le financement pour engager plus d’artistes pour l’instant.
L’autre méthode s’appelle en anglais “Straight Ahead” et consiste à dessiner les images successivement les unes après les autres, sans décomposition préalable. Cela rend le planning de la séquence plus difficile et le timing est bien plus difficile à gérer. Il est également plus probable que vous gâcherez des dessins avec cette méthode. Néanmoins certains animateurs aiment la liberté apportée et aussi le manque de planification peut permettre des mouvements moins parfaits, moins mécaniques et donc plus réalistes. Il s’agit de reproduire les êtres vivants dans toute leur splendeur de parfaite imperfection!
En observant Aryeom travailler, on peut constater qu’elle utilise régulièrement l’une ou l’autre méthode. Cela dépend des séquences.
Conclusion
Nous espérons que vous aurez apprécié ce petit aperçu dans le monde de l’animation et le travail de l’animateur. Nous espérons également que la petite vidéo attachée vous aura intéressés. Nous l’avons choisie pour vous montrer diverses étapes de la même section de scène, l’une après l’autre, puis côte-à-côte.
Vous remarquerez aussi que nous avons tendance à montrer toujours les mêmes sections du travail car nous souhaitons vous éviter le moins possible de spoiler, ce qui gâcherait le visionnage final. 🙂
2017 débute avec brio, beaucoup de nouveaux contributeurs et de la joie de vivre! 🙂
Nous avons retrouvé un vieux projet, qui date en fait de quelques mois avant ZeMarmot (soit fin 2014, soit début 2015), quand justement nous cherchions ce qui nous occuperait dans les années à venir. Comme vous le savez, ce n’est pas le projet que nous avons choisi ce qui explique qu’il était oublié au fond de nos disques durs. C’est un peu dommage, donc autant libérer de suite ce petit épisode d’une trentaine de secondes.
La série est en pause puisque nous nous concentrons dorénavant sur ZeMarmot. Il s’agit de la première publication de cet épisode (qui n’a été montré qu’une seule fois lors d’une petite conférence).
Le concept de la série était d’illustrer des expressions du monde entier avec de courtes animations (pas forcément de manière intellectuelle, plutôt avec un angle comique). Pour ce pilote, nous avions choisi l’expression française: “Jamais 2 sans 3“.
Alors comment vous a traité 2016? Pas trop mal, j’espère? Bon l’année a été bizarre sur certains aspects, mais quelle année ne l’est pas? Parlons maintenant de ZeMarmot! Pour rappel, notre réalisatrice, Aryeom Han, s’était fait une entorse au pouce mais hormis lors d’usage trop constraignant ou prolongé de la main, elle peut désormais dessiner. Elle remercie d’ailleurs chaleureusement ceux qui nous suivent pour les gentils messages reçus.
Rappel du projet
Avant de rentrer dans le gros du compte-rendu, je souhaite rappeler — comme il est de coutume en fin d’année — que ZeMarmot est un projet entièrement financé par les bonnes volontés de particuliers et sociétés donatrices, dont l’action est à 2 niveaux: art et logiciel.
Je suis un des développeurs de GIMP, second plus gros contributeur en terme de nombre de commits depuis 4 ans; je développe aussi un plugin pour l’animation 2D avec GIMP, qu’Aryeom utilise sur ZeMarmot. Ce plugin devrait faire partie de GIMP 2.10.
Aryeom utilise le logiciel pour animer, dessiner et peindre un film, d’après une histoire originale: une marmotte qui voyage dans le monde! Et bien sûr, le film sera sous licence Creative Commons by-SA!
À ce jour, notre crowdfunding initial (~ 14 000 €) a permis de payer quelques mois de salaire à Aryeom. Je n’ai rien touché à ce jour (non que je ne veuille pas, mais le projet n’a pas les moyens). Il reste un peu de la somme initiale mais principalement gardée de côté pour payer les musiciens.
Maintenant nous nous reposons surtout sur un crowdfunding mensuel grâce aux plateformes Patreon (financement USD) et Tipeee (financement EUR). À ce jour, cela monte à 180 € par mois, soit à peine plus d’un jour de salaire (et avec les charges salariales et patronales, ce qui revient à l’artiste en net est très faible). 1 jour par mois pour faire un film, c’est pas assez, on est d’accord!
Mon rêve? Nous pourrions un jour être un studio qui emploie de nombreux artistes, produisant des films libres pour le cinéma (oui dans mon rêve fou, les films libres ont leur place sur le grand écran!), ainsi que des développeurs qui améliorent des logiciels libres pour le multimédia pour un écosystème logiciel libre, riche et pour tous!
À ce jour, avec ce financement, c’est encore juste un projet expérimental principalement fait bénévolement. Mais c’est le but.
Vous aimez mon rêve? Voulez-vous m’aider à le réaliser? C’est possible en donnant pour le projet! Que ce soit la pièce symbolique ou une donation plus généreuse, toute aide est un coup de pouce dans la bonne direction.
Pas encore sûr? Prenez votre temps, lisez davantage et n’hésitez pas à revenir voir nos pages de financement si vous aimez ce que vous voyez!
Notez bien qu’en plus du financement, le nombre de contributeur est aussi important car cela remonte le moral de se sentir soutenu par plus de monde. En outre de gros chiffres nous donneront du poids lorsque nous chercherons de plus gros financements auprès d’organismes privés ou publics, mais aussi auprès de producteurs potentiels avec la possibilité de ne pas compromettre sur les aspects idéalistes du projet.
L’animation
Voici 2 vidéos pour illustrer le travail d’Aryeom. Dans cette première vidéo, elle explique quelques plans de la Marmotte:
Cette seconde vidéo examine des plans montrant un second personnage, l’aigle royal, grand prédateur de la marmotte:
Des pages entières sur l’art de l’animation pourraient être écrites à partir de ces quelques extraits mais je m’en tiendrai aux bases. Peut-être détaillerais-je dans de futurs articles.
Animer = donner la vie
Aryeom l’évoque et plusieurs extraits de la vidéo en sont l’exemple. Quand un personnage se déplace d’un point A à un point B, il ne s’agit pas de “bouger” celui-ci. Vous devez donner l’impression qu’il agit de son propre accord, en être vivant et pensant, en un mot, qu’il est “animé“.
Ce n’est pas étonnant qu’un des livres de référence du métier se nomme “L’illusion de la Vie” (de Frank Thomas et Ollie Johnston), aussi livre de chevet d’Aryeom. Cela a de nombreuses conséquences sur le travail de l’animateur.
Crédible plutôt que réaliste
Avant d’aller plus loin, je souhaite mettre un point au clair: bien que l’animation “réaliste” existe (Disney vient à l’esprit), une bonne animation est avant tout une animation “crédible”.
Il est tout à fait acceptable et même habituel d’exagérer des mouvements pour une raison ou une autre (effet comique parfois, mais même parfois il n’est pas impossible qu’un geste exagéré paraisse plus crédible qu’un geste réaliste), ou l’inverse (se débarrasser de détails trop anatomiquement corrects). Il n’y a pas de mauvais choix, seulement des décisions pour obtenir un style désiré.
Maintenant que tout est clair, continuons.
“Bouger un bras” n’est pas possible
L’exemple classique donné aux débutants: “lève ton bras droit”. C’est fait? As-tu vraiment bougé seulement le bras? Non, vois-tu, pour garder l’équilibre, ton corps s’est déplacé sensiblement à gauche en contrepoids, ton épaule droite s’est soulevée alors que la gauche s’est abaissée pour rester dans l’axe, maintenant oblique… Probablement tes pieds et jambes même se sont adaptés pour compenser le déplacement du centre de gravité.
Le corps entier s’est mis en mouvement pour ce qu’on aurait pu croire une simple action. En conséquence, on ne bouge pas “un bras”, mais un “corps” entier (dans une nouvelle configuration où le bras se trouve à la place souhaitée).
C’est la principale raison pour laquelle un animateur redessinera le corps entier à chaque image et ne peut se contenter de récupérer des bouts d’images en modifiant seulement certaines parties du corps. Quitte à simuler la vie, autant le faire proprement.
Note: le terme “animation” dans l’esprit d’un développeur fait en général une connexion neuronale avec “interpolation“, le processus mathématique qui consiste en le calcul automatique de positions intermédiaires. La conséquence de mon explication précédente est qu’en réalité cela sera rarement utile en animation traditionnelle, même numérique. En vectoriel et 3D, c’est bien plus fréquent mais même là, le rôle d’un bon animateur ne doit absolument pas être minimisé. En 3D/vecteur, l’interpolation remplace tout au plus l’assistant qui dessinait les entre-deux (les images entre 2 images clés) de l’animation traditionnelle.
Timing, silence et accélération
On l’entend souvent dire de la bouche de poètes ou danseurs: le silence est aussi important que l’action. J’ajouterais aussi l’accélération et la décélération.
On le voit bien dans le premier exemple de la vidéo 1 (à 0’41). Aryeom était mécontente de la marmotte qui court dont la vitesse est presque linéaire. Il y a bien une petite décélération sur la fin, mais trop peu. Sa version finale montre donc Marmotte arriver plus vite avec un ralentissement bien plus visible, rendant le mouvement plus crédible dans son entier.
Dans la vidéo 2 (à 1’09), l’envol de l’aigle est encore un bon exemple de timing difficile. D’abord l’aigle semblait lourd et pataud (“malade” dit-elle dans la vidéo). Puis au contraire trop léger, presque à l’image d’un moineau. Il lui fallut 8 versions pour obtenir un envol qui lui plaise. Regardez notamment la toute fin quand il se met à planer… Ce genre de détails de quelques centièmes de seconde peut passer inaperçu au public et pourtant occuper longtemps un animateur.
Images fixes vivantes (a.k.a. “line boil“)
Un effet assez usuel dans l’animation est cette sorte d’image tremblotante lors du plan présentant l’aigle fier sur sa montagne (vidéo 2 à 0’33). Parfois vous voulez une situation fixe mais une image statique contredit l’attente du cerveau: dans la vie, l’absence totale de mouvement n’existe pas. Essayez de ne pas bouger plusieurs secondes devant une caméra pour voir! Ça tombe bien, dessinez deux fois exactement les mêmes lignes relève de la gageur, donc l’animateur rusé redessine la même image plusieurs fois et boucle. Nous avons maintenant une image fixe … qui vit!
Éviter les cycles
Les boucles sont un outil habituel de l’animation et il n’est pas rare de voir un étudiant s’entraîner sur des “cycles de marche”. Pourtant plus on cherche à monter en qualité, moins les boucles sont acceptables. De même que l’immobilisme n’existe pas dans la vie, on ne répète jamais 2 fois exactement le même mouvement. Si votre caractère fait plusieurs pas, vous préférerez peut-être les redessiner à chaque fois, et vous ne réutilisez pas les images précédentes.
Bien sûr, c’est à vous de placer la limite. Peut-être que cette nuée d’oiseaux dans le lointain ira bien avec des boucles (et même du copier-coller pour multiplier les oiseaux). Tout est question de choix, temps et d’argent passé à payer un animateur sur cela, bien entendu.
Animer, c’est dessiner… beaucoup
Concluons donc en disant que ce métier consiste à dessiner et redessiner énormément!
À tel point qu’on en perd le nord. L’anecdote du pigeon dans la vidéo 2 est vraie et c’est moi qui ai proposé à Aryeom de la rentrer dans la vidéo tellement c’est drôle. Un jour, Aryeom vient me voir et me montre ce plan sur lequel elle travaille depuis des jours. Elle me demande: “tu trouves pas qu’on dirait plutôt un pigeon?”
Je ne l’aurai pas arrêtée, elle était partie pour recommencer de zéro.
Mais après tout, un art où on redessine tout, même pour exprimer l’immobilisme et où on s’interdit les raccourcis (boucles), c’est peut-être déjà un peu pour les fous, non? 😉
Plus sérieusement: il existe plusieurs écoles et beaucoup sont pour se simplifier la vie et autorisent la réutilisation d’images. Au Japon — même si le studio Ghibli est un contre-exemple connu qui se complique la vie, comme nous — le reste de l’industrie du cinéma d’animation a su nous prouver à maintes reprises qu’il est possible d’afficher une image statique pendant 30 secondes, de rajouter des sons et des voix, puis d’appeler cela une animation!
Parfois c’est un choix artistique aussi, ou un focus. Par exemple Les Simpsons ne sont pas un chef-d’œuvre graphique animée (ils font régulièrement des blagues de mise-en-abîme où ils se moquent de la qualité de leur propre animation d’ailleurs), mais ils ont les scripts les plus extraordinaires; et c’est clairement ce qui fut leur succès.
Au final, il n’y a pas de mauvais choix. Chacun suit sa voie.
C’est celle de ZeMarmot!
Musique
Courte note: nous avons commencé à travailler avec les musiciens de l’AMMD, à distance et en rencontre physique le 1er décembre. Nous avons quelques extraits de “premières idées”, mais les diffuser ne ferait nullement honneur au travail des musiciens. Il vaudra donc mieux attendre et s’en tenir à cela pour le moment!
Logiciel
Ai-je perdu mes lecteurs après ce long chapitre “animation”? Pour ceux qui sont encore là, un petit compte rendu de mes activités de dév.
GIMP
Je fais ma part sur GIMP, pour l’améliorer de manière générale et rapprocher la sortie de la version 2.10. Je compte donc 259 commits en tant qu’auteur en 2016 (60 dans les 3 derniers mois) + 48 en tant que relecteur/responsable. J’ai commenté sur 352 rapports de bug en 2016, faisant une habitude de faire le plus possible de revues de patch.
J’ai beaucoup de projets pour GIMP, certains ambitieux comme un système de gestion des plugins (installation/désinstallation/mise-à-jour… directement depuis un dialogue dans GIMP) ainsi que sur l’évolution de l’interface graphique (cela devra être discuté en détail sujet par sujet dans d’autres articles).
J’expérimente aussi avec Flatpak pour que GIMP puisse fournir un paquet officiel. Pendant des années, notre position de sortie fut: un installeur Windows, un paquet OSX et GNU/Linux… ben attrape le code source et compile quoi! Ou bien utilise la vieille version de ton gestionnaire de paquet…
Je pense que cette situation pourra s’améliorer avec Flatpak et des technologies similaires.
Animation dans GIMP
Il s’agit donc d’un plugin, pas une fonctionnalité native. Cependant c’est presque aussi puissant, même si certaines fonctionnalités manquent (comme le lien non-bidirectionnel entre GIMP et les plugins: un plugin n’est pas notifié de changements sur les images notamment; fonctionnalité sur laquelle je prévois de travailler).
Le plugin d’animation a 2 vues:
Vue “storyboard”
GIMP’s animation plug-in: storyboard view
Cela correspond à la logique très basique 1 calque = 1 image, habituelle par exemple pour les créateurs d’animation GIF (ou MNG/WebP maintenant), excepté qu’il y a maintenant une jolie interface pour paramétrer la durée d’affichage de chaque image (plutôt que “taguer” les noms de calque, très mauvais choix d’interface, ce qui explique d’ailleurs que la fonctionnalité est quasi cachée, et trouvable sur de vieux tutoriaux seulement), faire de la composition de base et même commenter chaque vignette si besoin est. Le tout avec une bonne prévisualisation de l’animation.
Vue “x-sheet”
GIMP’s Animation plug-in: cel-animation view
Vue plus puissante où vous pouvez composer chaque image à partir de plusieurs calques, souvent au moins un décor et un personnage. L’exemple ci-dessus compose 3 images à chaque position: le décor, l’aigle et la marmotte.
Vous connaissez peut-être plus les vues de type “ligne de temps”, ce qui est en gros la même chose mais horizontal plutôt que vertical. J’ai essayé aussi mais suis rapidement revenu vers un design plus classique dans le monde de l’animation, appelé x-sheet (feuille d’exposition). Je le trouve plus pratique, mieux pour commenter, facile à scroller, et plus organisé. On voit peu de choses dans cette capture, mais le plugin cible vraiment une animation professionnelle et organisée. En particulier, avec des calques convenablement nommés, vous pouvez créer des cycles d’animation de dizaines d’images en juste quelques clics.
Je travaille aussi sur le keyframing d’effets (opérations GEGL animées) et les mouvements de caméra.
Beaucoup fut fait, mais bien plus reste à faire. Je posterai des articles plus détaillés et surtout pousserai le code publiquement sur une branche du dépôt de GIMP bientôt (probablement avant la prochaine réunion Libre Graphics Meeting en avril).
That’s all, folks!
Et voici donc notre compte-rendu de fin d’années de l’équipe ZeMarmot! J’espère que cela vous a plu. Et si vous n’avez pas tout dépensé en cadeaux de Noël, je rappelle que le projet accepte toute l’aide possible sur les liens donnés plus haut. Certains donnent juste 1 € par mois, d’autres 15 € par mois… il n’y a pas de limites. Au final, nous donnons vie à ZeMarmot tous ensemble! 🙂
Coucou!
À ce jour, notre crowdfunding initial (~ 14 000 €) a permis de payer quelques mois de salaire à Aryeom. Je n’ai rien touché à ce jour (non que je ne veuille pas, mais le projet n’a pas les moyens). Il reste un peu de la somme initiale mais principalement gardée de côté pour payer les musiciens.
Maintenant nous nous reposons surtout sur un crowdfunding mensuel grâce aux plateformes 
