LoL : animer un champion

Le blog de développement nous explique le travail qui se cache derrière les animations de vos champions. Comment font-t-il, avec quoi et qui ? Le conception de votre personnage préféré n'aura plus de secrets pour vous !

Tout d'abord, l'équipe nous informe qu'il existe deux techniques d'animation :

• à la main : l'animateur dessine chaque image. C'est long mais ça permet un contrôle totale de ce que l'on veut faire.
• par motion capture : on place des tas de capteurs sur un acteur et on enregistre les données.

LoL fait tout à la main afin de garantir une animation fluide collant parfaitement au gameplay et aux exigences en vigueur (comme la possibilité d'étirer des formes)

Afin de mieux vous expliquer l'animation, deux exemples sont décortiqués : l'ultime de Yasuo et la conception de Braum.

Yasuo : fluidité, agilité, puissance

C'est sur ces trois mots en tête que l'ultime de Yasuo a été créé. Dernier Soupir doit en une seconde (soit 30 frames) donner cette impression.
La première idée qui vient à l'équipe est un coup tranchant ascendant durant une seconde. Après quelques tests non concluants, une autre animation fut proposée : que Yasuo bondisse et frappe trois fois. L'idée plaisait et vit le jour. Trois poses ont été créées et il a fallu les lier entre elles de manière fluide et les animer.

L'animation faite, il y a encore des détails à régler ! Il faut accorder les cheveux et cordes de Yasuo aux mouvements.
L'équipe dispose pour ça d'une nouvelle technologie appelé "Jiggle Tech". Elle permet d'animer certains éléments qui suivent alors les mouvements. Les développeurs vérifient quand même que tout fonctionne bien et procèdent à quelques retouches. Enfin, on apporte la touche finale en ajoutant des frames intermédiaires déformées afin de rendre l'effet plus saisissant. On voit ici l'inspiration des dessins animés japonais.

Braum : un bouclier qui prend de la place

Si l'idée de se servir d'une porte comme bouclier pour Braum semblait géniale, l'équipe a dû ensuite bien cogiter pour gérer ce bouclier lors des différentes animations !

Incassable peut être utilisé lorsque Braum se déplace ou utilise d'autres compétences. Il était alors nécéssaire de mélanger plusieurs animations pour créer un mouvement.
Tout débute par la pose défensive : Braum est stationnaire et plante son bouclier au sol d'une main et a son autre poing libre pour l'attaque.
Pour Incassable, l'animation devrait représenter les déplacements de Braum, protégeant ses alliés et bloquant les attaques ennemies.  L'équipe de développement a alors changé la manière dont il tient son bouclier quand il se déplace : il le tient à deux mains. La démarche devait être conçue de façon multidirectionnelle. Quatre animations ont été créées pour chaque direction. On mélange le tout dans le système paramétrique et on obtient des animations de mouvement à 360 degrés.

Les animations de Braum et mouvement ou pas pour Incassables faites, il fallait ensuite se pencher sur les animations d'attaque avec son E. Les développeurs essaient d'utiliser à nouveau le système paramétrique mais le résultat n'est pas bon. Au final, neuf animations d'attaque sont créées séparément avec un mélange minime des animations.
On passe ça au Jiggle Tech pour parfaire le résultat, animant le collier et la corde de Braum.

Retrouvez sur le blog des développeurs l'intégralité de leur billet illustré de plusieurs vidéos.

Vous voyez donc qu'il se cache un énorme travail pour animer vos champions ! La prochaine fois que vous jouerez, vous regarderez peut-être votre écran d'un œil différent.