La mise en place des décors, par Coral Cave

Vous le savez, chaque mois, nous laissons la parole au studio Atelier Sentô afin qu'ils vous racontent les différentes étapes de création de leur jeu : The Coral Cave. Aujourd'hui, ils vont vous présenter leurs techniques d'animation de décors pour en faire des environnements crédibles grâce à quelques astuces pertinentes. Bonne lecture !

Il s'agit ici du 8ème article du studio. Si ce n'est pas déjà fait, nous vous recommandons chaudement de lire cette série depuis sa toute première page en suivant ce lien.

Dans l'article précédent, nous expliquions comment guider le personnage à travers les décors. Cette fois-ci nous verrons comment ces décors sont construits dans Wintermute (WME), le logiciel que nous utilisons pour The Coral Cave.

D'abord arrière plan immobile

Lorsqu'on crée une nouvelle scène dans un jeu en point & click 2D, on commence par importer l'image d'arrière-plan. On utilise pour cela SceneEdit, outil intégré à WME :

Vous remarquerez dans le menu de gauche que la création d'une scène se décompose en 2 catégories : les "layers" et les "nodes". Dans cet article nous nous intéresserons qu'aux nodes. Les nodes sont les éléments de la scène. Au début, il n'y a qu'un seul node : l'arrière-plan. Cet arrière-plan n'est qu'une image plane, privée d'informations. WME n'est pas capable de comprendre le paysage et de déterminer où le personnage peut marcher, de combien sa taille diminue au fur et à mesure qu'il s'éloigne... On ajoute donc un sol (floor), c'est-à-dire une zone dans laquelle le personnage peut se déplacer (en rouge sur l'image ci-dessous) et des barres horizontales vertes calculant la taille du personnage :

Dans la liste des nodes, le sol s'est ajouté en dessous de l'arrière plan. Le principe est simple : plus un node est haut dans la liste, plus il est caché derrière les autres, plus un node est bas, plus il est mis en avant. C'est pourquoi, en général, l'arrière-plan est tout en haut de la liste des nodes. Ici le sol est placé en seconde position donc le personnage qui y marche apparaît en premier plan, devant l'image de fond.

ANIMER UNE SCENE

Quand le moment vient d'animer une scène, il est important de penser à être aussi économe que possible pour que le jeu soit jouable sur un maximum d'ordinateurs. Chaque image affichée occupe une partie de la mémoire de l'ordinateur. Lors des animations, de nombreuses images s'affichent et, si la mémoire est saturée, le jeu risque de ralentir. La première scène se déroule en bord de mer et, pour être crédible, il faudrait beaucoup d'animations. Le ciel se reflète dans l'eau, des vaguelettes lèchent le sable, des poissons nagent entre les rochers... Néanmoins, en repartissant de seulement petites animations, ça et là dans le décor, on peut facilement donner vie à l'ensemble de la scène. Voici, par exemple, comment nous avons animé le rocher qui émerge de l'eau :

Une boucle de 4 petites images est suffisante pour donner l'illusion du mouvement de l'eau, en coordination avec d'autres courtes animations tel que le bord de mer (une boucle de 5 images) :

Ou encore le reflet du ciel dans l'eau (une boucle de 8 images) :

Pour cette animation, nous avons choisi de garder un fond transparent ce qui nous permet de la réutiliser dans plusieurs scènes, quelle que soit l'image d'arrière-plan. L'image ci-dessous montre la scène après intégration des animations (l'arrière-plan est masqué pour mieux les voir).

On en profite aussi pour ajouter les éléments interactifs tels ces petits coraux posés sur le sable que l'héroïne devra ramasser. Une fois la scène terminée, il est impossible de distinguer la limite entre l'image d'arrière-plan et les éléments que nous avons ajoutés :

Si vous observez la liste des nodes, à gauche, vous remarquerez que les éléments animés sont placés entre l'arrière-plan (background) et le sol (floor) de sorte que les animations apparaîtront forcément devant l'arrière-plan et derrière le personnage.

RENFORCER L'IMPRESSION DE PROFONDEUR

A ce stade de création de la scène, on a obtenu un arrière-plan animé et un personnage en premier plan. C'est déjà bien mais, pour une meilleure immersion, on souhaite créer un avant-plan qui masquera en partie le personnage : le grand corail en bas à droite de la scène.

On ajoute un nouveau sol (ici nommé « walkbehind », c'est-à-dire « marche derrière ») et une image détourée du corail avec fond transparent (walkbehind_coral01). La position de ces éléments dans la liste des nodes est très importante : plus un élément est haut dans la liste, plus il est en arrière. Donc il faut en premier l'arrière-plan (background), ensuite les éléments animés, puis le nouveau sol (walkbehind), l'image découpée du corail (walbehind_coral01) et, pour finir, tout en bas, le sol (floor). Ainsi, quand le personnage marche sur le sol (floor), il est devant le corail et quand il marche sur le nouveau sol (walkbehind), il est derrière le corail.

Et voilà, notre scène est terminée :

Cette image, en apparence toute simple, aura malgré tout demandé un certain travail pour passer du dessin plat et fixe à un environnement en profondeur et en mouvement. La scène finale est construite en strates superposées et en jouant avec la position des nodes les uns par rapport aux autres, on peut obtenir un résultat d'une grande richesse : par exemple, en ajoutant un poisson entre l'image d'arrière-plan et l'animation du reflet, on a réellement l'impression qu'il nage sous la surface de l'eau !

Il est amusant de constater que cette méthode n'est pas si éloignée de celle des films d'animations. Dans un dessin-animé, les personnages, les animations et les avants-plans sont peints sur des feuilles transparentes que l'on superpose à la peinture d'arrière-plan avant d'en capturer l'image sur pellicule. Néanmoins, à l'opposé du cinéma d'animation où les animations sont très détaillées et complexes,  le jeu vidéo est limité par la mémoire des ordinateurs. Il faut donc se montrer économe dans la création des scènes et, pour chaque animation, réduire au maximum sa taille et durée.

Nous cherchons constamment des astuces pour donner vie aux aquarelles en tenant compte des contraintes techniques. Un travail d'équilibriste où il nous reste encore beaucoup à apprendre.