Fluidité, performance et contrôle : les clés de l’animation.

Dans le cadre d’un projet de jeu WebGL, on avait à animer des personnages en 2D. En utilisant l’éditeur d’animation Rive, on a créé des animations relativement complexes en appliquant un squelette aux personnages.

Pour l’intégration finale, on aurait pu utiliser la librairie web de Rive, mais elle n’offrait pas une grande marge de manœuvre : nos animations devaient être intégrées dans une scène existante Threejs. C’est tout ce qu’il nous fallait pour qu’on décide de mettre en place un player de spritesheets.

Spritesheets, mais encore?

Une spritesheet est une image composée de plusieurs images plus petites (sprites) qui décomposent une animation. Le fait d’avoir plusieurs petites images en une seule grande image améliore les performances, réduit l'utilisation de la mémoire et le temps de chargement initial de l’appli, du site ou du jeu, ainsi que le nombre d’appels serveur.

Il existe plusieurs logiciels qui permettent de créer facilement des spritesheets tels que TexturePacker ou la version équivalente gratuite Free Texture Packer. Ces logiciels peuvent exporter le fichier image final avec un fichier JSON qui dresse les positions, rotations et dimension de chaque image dans la spritesheet. Ce sont des données cruciales pour le player, qui saura positionner la texture au bon endroit.

Bonjour, WebGLSpritesheetPlayer

Le player hérite de la classe Sprite de ThreeJS pour que l’animation fasse toujours face à la caméra. Pour obtenir un outil flexible qui répondait à de multiples utilisations, on a intégré les propriétés ci-dessous.

Le player conserve les bonnes dimensions de la texture pour ne pas déformer l’animation. Il supporte plusieurs options de formats : séquence d’images, et un ou plusieurs spritesheets avec leurs fichiers JSON associés. On a également ajouté quelques paramètres de lecture pour répondre à des cas spécifiques d’animation ( plus de détails dans la suite de l’article).

La magie du offset et du repeat

Pour afficher la bonne zone de la texture, on a joué sur les propriétés offset et repeat de la texture. Ça nous a permis d’isoler une image précise dans notre spritesheet et de l’afficher sur notre sprite.

Quelques fonctionnalités

Penchons-nous sur quelques fonctionnalités intéressantes du player :

Plusieurs spritesheets

Si on souhaite regrouper toutes les images en une seule, les dimensions de la texture à gérer par le navigateur risquent d’être énormes. En regardant le rapport webgl, la taille maximale d’une texture est de 16384px sur ordinateur, alors qu’elle est de 4096px sur un appareil mobile.

Dans ce cas-ci, l’animation est relativement courte avec une durée de moins de deux secondes. Imaginons une animation plus longue avec une résolution plus haute : on se retrouverait à devoir gérer une texture très lourde, ce qui pourrait poser un problème de performance sur certains appareils.

Le player permet de diviser l’animation en plusieurs spritesheets. Ici, on n’en a que huit, mais cette capacité peut s’avérer fort utile sur une animation divisée en 20 spritesheets.

FPS, loop & wait

On peut évidemment faire jouer l’animation en boucle, mais aussi définir une cadence précise pour obtenir un effet plus saccadé ou plus fluide.

On a aussi l’option d’attendre entre chaque boucle d’animation, à condition que la lecture en boucle soit activée. La valeur est d’ailleurs mesurée en termes d’unité de cadence : si votre application tourne à 60 images par seconde, une valeur d’attente de 30 équivaut à une demi-seconde.

Aller plus loin avec le défilement

C’est là que le player prend une tout autre dimension en liant la position de lecture au défilement.

Celle qui nous intéresse particulièrement est seek, qui permet d’arrêter l’animation sur une image précise. Le paramètre qu’elle utilise est une valeur qui se situe entre 0 (le début) et 1 (la fin). Si on synchronise cette valeur avec un ratio de défilement (la progression du défilement sur la longueur disponible), on arrive à obtenir un scroll super fluide sur une vidéo.

Video originale : https://www.youtube.com/watch?v=Ve9z_ofFTn4&ab_channel=KevinPerez

Nous avons aussi mis en place une possibilité d’avoir un scroll infini, que la vidéo revienne au début et qu’elle puisse être jouée en boucle en utilisant seulement le scroll.

Les spritesheets sont vos amies

Gérer des animations 2D dans un environnement 3D est non seulement possible, mais facile à exécuter avec un player de spritesheets. Cette méthode offre de nombreuses possibilités comme la liaison avec du scroll pour ajouter encore plus d’interactivité ou encore la mise en place d’une couche d’effet avec un shader personnalisé.

Liens

Threejs(v.152) : Moteur de rendu WebGL offrant de nombreuses fonctionnalités, une foule d’exemples et qui rassemble une très grosse communauté.

WebGL Report: Rapport WebGL listant ce qui est supporté sur votre navigateur.

Rive: Logiciel pour créer des animations interactives. Facile à utiliser, il offre de nombreuses fonctionnalités intéressantes.

Free Texture Packer: Logiciel de création de spritesheets.