Animer un personnage 2D dans Rive
#20 - Ou comment rendre un design animable par le code
Bonjour !
Bienvenue dans cette 20e édition de Founder Naked.
Cette semaine, je te propose d’animer ma mascotte licorne sur Rive, une techno qui te permet de « programmer » un fichier vectoriel (type .svg) pour qu’il puisse répondre à des inputs qui seront ensuite envoyés par ton app, pour que “ça marche tout seul”.
Le rendu final ressemble à ça : je joue les émotions via des variables, puis les visèmes (les formes de bouche associées à chaque son quand on parle) 👇
Si ce n’est pas déjà le cas, tu peux aussi :
Me suivre sur Linkedin, où je publie des posts complémentaires,
Découvrir les services que je propose, notamment dans le secteur de la finance…
… mais pas encore découvrir Licorn, ma nouvelle boîte.
Allez, c’est parti !
Au programme
Construire un personnage 2D avec l’IA
Découper son design pour le rendre exploitable
Assembler son personnage dans un format adapté
Établir un plan d’animation pour un agent IA
Utiliser le MCP Rive pour créer le fichier final
Construire un personnage 2D sur Recraft
Pour ma part, j’ai choisi de bosser sur Recraft pour les générations d’images, après avoir essayé pas mal d’outils au début de Licorn, quand je devais créer mes premiers designs. Depuis, l’interface a pas mal évolué ; il y a aussi tout un volet vidéo qui s’est ajouté, mais que je n’utilise pas (j’ai créé ma propre app basée sur l’API Runway).
Je ne vais pas détailler ici tout le process de création du personnage. Il faudra peut-être que j’en fasse une newsletter dédiée. Mais en gros, on fait pas mal d’itérations pour arriver à choisir le personnage que l’on apprécie. Après, on lui crée différentes postures et une character sheet qui le met dans au moins trois positions : de face, de profil, et de dos, et qui permet de figer son apparence.
Rendre son personnage “exploitable”
Je lui ai également créé différentes positions que j’utilise notamment dans mes vidéos culinaires sur les réseaux sociaux (cf. TikTok, Instagram ou YouTube). Mais si on se concentre ici sur l’exploitation dans Rive, moi, ce que j’ai voulu, c’est faire un POC1 dans un premier temps avec des animations relativement simples. C’est-à-dire que le corps reste figé. J’ai juste créé une petite respiration, mais sinon c’est surtout la tête qui est animée avec différentes émotions.
A chaque fois dans Recraft, j’ai donc demandé à un modèle, Nano Banana (2 ou Pro) ou GPT-image-2, de me créer des variantes de mon personnage avec des émotions différentes. Ci-dessous voici les 7 émotions que j’ai retenues pour commencer :
Puis j’ai également généré les 15 visemes qui correspondent au mouvement et à la forme de la bouche lorsque l’on parle, quelle que soit la langue. C’est lié aux sons qui sont prononcés par la bouche.
Ce qui est fou, c’est qu’au début, je pensais que j’allais devoir générer chaque visème indépendamment. Mais avec GPT-image-2, qui est un modèle d’image qui « réfléchit » avant de générer une image, j’ai pu lui dire que je voulais faire des visèmes. Je lui ai même donné la référence du package GitHub que je souhaitais utiliser pour les visèmes, et à partir de là, il a été capable de me générer des planches avec les 15 visèmes. J’ai généré plusieurs planches et j’ai choisi celle que je préférais 👇
Je n’explique pas ici en détail ce que sont les visèmes et à quoi elles correspondent. Je ferai une édition dédiée, parce que c’est un sujet qui demande pas mal d’explications.
Assembler le personnage sur Affinity
Ensuite, il faut assembler le tout. Pour ça, j’ai utilisé Affinity. C’est un logiciel qui a été racheté par Canva et qui est désormais disponible gratuitement. La seule option payante, c’est si on veut utiliser les fonctionnalités IA du logiciel. À ce moment-là, on est obligé d’avoir un abonnement Canva payant pour obtenir des crédits IA.
Pour ma part, je l’utilise comme j’utilisais avant Photoshop, Illustrator ou autre de la suite Adobe. Ça permet de faire des trucs vraiment cool gratuitement, pour un truc que je trouve qualitatif. En effet, l’interface est vraiment qualitative — plus qualitative que certains logiciels open source où on est souvent sur un truc un peu fourre-tout en termes d’UI.
Pour en revenir à nos moutons, il faut donc ensuite assembler le personnage. Ça consiste à affiner les exports vectoriels de Recraft des différentes parties du visage qui constituent les émotions et les visèmes.
Pour ça, c’est important d’avoir la bonne ancre sur la bouche, parce qu’il faut bien penser à un visage humain où la mâchoire descend quand on parle. Donc, là, c’est la même idée : il ne faut pas centrer les bouches du personnage. Il faut bien que la mâchoire descende quand il parle, pour qu’on ait l’impression que c’est un humain qui parle. En effet, on se raccroche toujours à ça quand on regarde quelqu’un qui parle, même un personnage fictif : on se raccroche à l’image d’un humain qui parle. Donc il faut que les ancrages de la mâchoire soient similaires.
Une fois qu’on a assemblé la totalité des parties du visage et du personnage, on exporte le tout dans un SVG commun qui présente une bonne hiérarchie des différentes parties. Cela permet qu’elles soient, d’une part, facilement compréhensibles par un agent IA qui s’occupera du design et, d’autre part, suffisamment bien hiérarchisées pour que les animations puissent se faire facilement.
En effet, souvent, pour simplifier le travail, on joue des animations sur des groupes d’objets et pas sur les objets individuellement. Il faut donc que les objets soient regroupés intelligemment en fonction des animations que l’on prévoit de faire.
Établir un plan d’animation
Tout ce travail (depuis le début), je l’ai réfléchi en parallèle dans un chat Claude, où j’ai établi ce dont j’avais besoin pour animer mon personnage pour ce POC, et où j’ai itéré au fil de mes avancées.
Une des contraintes que j’ai établie dès le début, c’est que, comme je n’étais ni designer ni animateur, il fallait que j’arrive à faire un maximum de choses dans Recraft avec l’IA et à faire aussi un maximum de choses dans Cursor avec le MCP Rive.
J’ai itéré avec Claude Opus 4.8 sur les animations. Je lui ai fait explorer mon SVG. J’ai itéré avec lui sur la structure même du SVG pour qu’elle soit compatible. Derrière, il m’a créé un plan d’animation, une sorte de PRD / de TO DO que j’ai mis en .md dans Cursor après pour pouvoir utiliser le MCP Rive avec un agent IA.
Je te passe ici le fichier si tu veux aller explorer à quoi ça ressemble.
Utiliser le MCP Rive pour créer le fichier final
Enfin, dernière étape : depuis Cursor, j’ai utilisé Claude Sonnet 4.6 pour construire les animations dans Rive. À part pour uploader le SVG, je n’ai littéralement pas touché à Rive. J’ai uploadé le SVG, j’ai tout fait avec le MCP Rive dans Cursor, puis j’ai testé via les variables d’entrée créees dans Rive, pour vérifier que le design répondait bien.
J’ai quand même dû faire quelques allers-retours et je suis passé à la fin sur Opus 4.8 pour affiner le rendu. Cela a permis de détecter différents bugs et d’aller un peu plus loin sur les types d’animation et l’easing.
Et au final, j’ai obtenu un fichier un peu moche au premier abord — parce que par défaut, toutes les parties du visage sont superposées — mais quand l’animation fonctionne, tout est nickel. Une fois que c’est joué, qu’on change les variables d’entrée, on a bien des choses qui s’affichent proprement (cf. ma vidéo en intro).
Le mot de la fin
Voilà comment, en à peu près une journée de travail, j’ai créé le design et l’animation du personnage dans Rive, avec 7 émotions et 15 visèmes qui permettent l’animation lip sync de ma mascotte.
J’en détaillerai un peu plus sur les visèmes dans une prochaine édition et je te montrerai aussi le rendu animé du personnage dans l’app, très bientôt.
Bonne semaine.
Yoann
POC = Proof Of Concept, c’est-à-dire un premier jet qui permet de prouver que ce qu’on a imaginé, fonctionne.