La gestion des acteurs dans Wintermute pour The Coral Cave, par l'Atelier Sentô

Comme chaque mois, nous retrouvons avec plaisir l'Atelier Sentô qui nous présente un aspect de la création de leur The Coral Cave, un point'n click réalisé à l'aquarelle. Si vous avez loupé la série de news, la première se trouve sur cette page et vous pourrez trouver un sommaire en bas d'article ! Aujourd'hui, après avoir survolé l'interface de leur logiciel de création, le duo aborde le sujet de l'animation des personnages, et plus précisément de leur héroïne Mizuka ! Nous leur laissons la parole :

Le mois dernier, nous avons survolé l'interface générale de Wintermute (WME), le moteur de jeu utilisé pour The Coral Cave. Aujourd'hui nous allons étudier de manière approfondie la création des acteurs dans ce logiciel. Un acteur est un personnage clé du jeu, doté d'animations de marche et susceptible d'apparaître dans plusieurs décors. Il y a très peu d'acteurs dans un jeu, car la plupart des personnages secondaires n'apparaissent que dans un seul écran et ne possèdent qu'un nombre limité d'animations. Il n'est pas nécessaire de créer un acteur pour ces personnages : ils sont intégrés directement dans le décor où ils apparaissent.

A l'heure actuelle, il n'y a que deux acteurs dans The Coral Cave : Mizuka, notre héroïne, et le chat blanc qui l'accompagne dans ses aventures.

LA CREATION D'UN ACTEUR

Créer un nouvel acteur est chose aisée dans WME puisqu'il suffit de cliquer droit sur le dossier « actors », faire « Add actor... » et lui donner un nom. On obtient un dossier de ce type :

Ce dossier contient :

- 8 sous dossiers correspondant aux 8 directions dans lesquelles l'acteur pourra être orienté (face, dos, droite, gauche, ¾ face droite, ¾ face gauche, ¾ dos droite et ¾ dos gauche.). Il faudra dessiner et animer notre personnage dans toutes ces orientations !

- mizuka.script : une feuille de script dans laquelle on pourra coder des comportements spécifiques de l'acteur. C'est utile pour une utilisation avancée mais il est possible de s'en passer au début.

- mizuka.actor : Un simple fichier texte qui rassemble toutes les informations importantes à son sujet. Voici en partie ce qu'il contient :

NAME : le nom de l'acteur.

CAPTION : le nom qui s'affiche en survolant l'acteur avec la souris pendant le jeu.

SCALABLE : indique si la taille de l'acteur est fixe ou varie en fonction de l'éloignement.

INTERACTIVE : indique si on peut sélectionner l'acteur avec la souris (pour utiliser un objet sur lui, par exemple). Dans The Coral Cave, cette fonction est désactivée.

X et Y : les coordonnées par défaut de la position de l'acteur dans chaque scène.

SCRIPT : L'emplacement de la feuille de script liée à l'acteur.
FONT : La police de caractère liée à l'acteur (dialogues, etc...).

ANIMATION : il s'agit de sets d'animations pour chacune des 8 orientations dans l'espace. Chaque orientation est liée à un fichier .sprite contenant une animation.

Il est possible de créer autant de sets d'animations qu'on le souhaite (marcher, courir, parler, …) et ensuite de pouvoir les lancer simplement. Si je veux faire parler mon personnage et que j'ignore s'il est de face, de dos ou de profil, j'appelle le set « talk » qui jouera l'animation dans la position appropriée. Pratique, n'est-ce pas ?

L'EDITEUR DE SPRITE

Nous l'avons vu, le fichier de définition d'un acteur a pour principal but de collecter l'emplacement des différents sprites qui le composent. Pour créer ceux-ci, WME propose un éditeur de sprite simple d'accès et aux multiples possibilités.

Il y a plein d'options, de cases à cocher et ça peut faire peur au premier abord. Mais en y regardant de plus près, on y voit tout de suite plus clair :

1 – Looping : Ici on peut jouer l'animation en appuyant sur lecture. La case « Looping » permet de mettre une animation en boucle (indispensable quand l'acteur marche).

2 – Frame : Ici on peut ajouter une nouvelle frame au sprite. Une frame correspond à l'une des images qui composent une animation.

3 – La liste des frames du sprite : Dans notre exemple, il n'y a pas d'animation donc il n'y a qu'une seule frame.

4 – Delay : la durée de chaque frame.

5 – Move by : Cela permet de déplacer une frame par rapport à la précédente. Une fonction très importante pour l'animation de marche.

6 – Sound : on peut lier un son à une frame (exemple : un bruit de pas). Le son sera joué en même temps que la frame.

7 – Event : on peut lancer un événement en même temps que la frame est jouée et le lier à une instruction dans le script. En gros, c'est un signal qui dit « quand cette frame apparaît, il se passe cela ».

8 – Mirror X et Y : ça permet une symétrie horizontale ou verticale de la frame. Si votre personnage est symétrique, vous dessinez seulement le profil droit, par exemple, et en cliquant sur Mirror X, vous obtenez automatique le profil gauche. Au lieu de 8 positions à dessiner, il n'y en a plus que 5 ! Vous gagnez du temps et votre jeu sera plus léger. Bon, dans la réalité, personne n'est vraiment symétrique... c'est pourquoi nous n'utilisons pas cette fonction.

9 – Image : le lien vers l'image. Ça permet de changer l'image sans toucher à la frame (utile pour garder la configuration).

10 – Hot Spot : l'élément le plus important ! Par défaut, il est situé dans le coin supérieur gauche de l'image. C'est le point actif de l'image : si l'image est un curseur, le hot spot doit être placé dans la pointe, à l'endroit exact où on clique. Si l'image est un personnage, le hot spot doit être placé entre ses pieds. Quand on dit au personnage de marcher jusqu'à des coordonnées (X, Y) d'une scène, c'est le hot spot qui sera positionné en ce point. Un hot spot bien placé permettra une transition fluide entre les différentes orientations de l'acteur (face, profil, …) et entre ses différentes animations.

11 – Transparent : avant les images enregistrées en png, on utilisait des bitmap : un fond rose criard placé autour du personnage permettait de définir la zone de transparence. Cette fonction est devenue obsolète avec les png qui font la même chose avec plus de précision.

12 – Alpha color : permet de changer la teinte d'une image. Si on veut que Mizuka combatte son double infernal rouge vif, cette fonction le permet facilement.

13 – Opacity : permet de rendre le sprite plus ou moins transparent.

Voilà pour l'interface de l'éditeur de sprite. Un peu touffue de prime abord, on s'y fait vite et on se surprend à jouer avec tous ces éléments pour créer des animations riches et variées.

L'ANIMATION DE MARCHE

Dans l'exemple précédent, nous avions un acteur debout de profil et immobile. Maintenant, faisons-le marcher ! Pour cela, on superpose plusieurs images, comme s'il marchait sur place. Pour Mizuka, la marche est composée de 8 frames en boucle, chacune durant 90 ms.

Il n'y a pas de formule pour choisir le nombre de frames et leur durée. Il faut expérimenter en gardant en tête les limitations techniques : plus il y aura de frames et plus l'animation sera fluide mais lourde (sans compter que ça vous prendra un temps fou à animer). On a choisi 8 frames pour alléger notre charge de travail : on préfère créer une grande quantité d'animations un peu saccadées qu'une petite quantité fluide. Il ne faut pas oublier que Cécile s'occupe de tous les personnages à elle seule !

A notre avis, le plus important dans une animation de marche, pour le personnage principal, c'est qu'elle soit vive. On a joué à trop de jeux d'aventure dont les héros se traînent comme des escargots ! Une fois que notre personnage marche sur place, il faut le faire se déplacer dans le décor. Pour cela, il y a deux solutions.

La plus simple et la plus fréquemment utilisée est de faire glisser le sprite dans le décor selon une vitesse constante. Ainsi le sprite de déplacera de tant de pixels par secondes en même temps qu'il joue l'animation en boucle. En réglant, correctement la vitesse, on peut obtenir une quasi concordance entre le déplacement du sprite et l'animation de marche. Mais le joueur attentif aura l'impression que le personnage patine légèrement. Pour deux raisons :

- parce que le déplacement est continu alors que l'animation est discontinue. Donc le sprite poursuit son déplacement même dans la (très courte) durée où une frame est affichée.
- parce que la marche prend appui sur le sol et que notre vitesse de déplacement est irrégulière. Imposer une vitesse moyenne crée forcément un subtil décalage propre à gâcher le réalisme de l'animation.

WME permet une plus grande précision : grâce à la fonction Move By, on peut définir avec exactitude de combien de pixels sur l'échelle des X et des Y, le sprite se déplacera à chaque frame, par rapport à la précédente. On se sert donc de la position des pieds de l'acteur pour définir le déplacement, comme ceci :

Il en résulte un déplacement irrégulier au cours duquel Mizuka prend réellement appui sur le sol.

Voilà qui clôt notre explicatif sur les animations. Mais cet article sur les acteurs ne serait pas complet si on n'abordait pas le sujet de la « mini-Miz » !

WME permet de redimensionner en temps réel les acteurs en même temps qu'ils se déplacent dans la perspective du décor. Ils peuvent être très gros au premier plan et plus petits en arrière plan. Néanmoins un problème apparaît dans les vues très éloignées quand le personnage est vraiment tout petit : le trait de contour devient très fin, en escalier et ne s'intègre plus dans le décor.

Pour palier à ce défaut, nous avons dessiné une version miniature destinée à n'apparaître que dans les vues éloignées. Si dessous, à gauche, vous pouvez constater la différence de taille entre la Mizuka normale et sa version miniature :

Et à droite, le résultat, une fois redimensionné à la même taille dans un décor en vue éloignée. Le trait de contour de la Mizuka de grande taille est fortement distordu et ne coïncide pas avec le trait du décor. Au contraire, la mini-Miz s'intègre parfaitement.

La création d'un jeu vidéo à l'aquarelle demande parfois de trouver des solutions détournées pour renforcer la cohésion entre les différents éléments. WME fournit un large panel d'outils pour facilement retravailler et redimensionner chaque élément mais il parfois nécessaire de refuser cette simplicité et de le faire à la main, même si ça prend du temps : en dessinant une version miniature de notre personnage principal, nous cherchons à maintenir l'illusion d'un dessin animé interactif.