Tutoriel/Créer une animation

De WikiPlee.

Les animations font passer un niveau statique, froid et figé à un niveau vivant. Elles sont par conséquent des éléments importants pour l'expérience du joueur. Cependant, leur réalisation peut être assez fastidieuse. Ce tutoriel vise à faciliter le travail des dessinateurs en les guidant dans les différentes étapes qui parsèment cette réalisation.

La situation amenant à la production de l'animation est illustrée par la capture d'écran ci-contre. On y voit une bûche poussée par Plee, restant en équilibre à moitié dans le vide. Pour éviter au joueur de se retrouver devant cela, le concepteur du niveau a ajouté un mouvement forcé qui va propulser la bûche dans le vide lorsqu'elle y sera à moitié. Cependant, le joueur a alors l'impression que celle-ci part toute seule. Pour crédibiliser le mouvement, le dessinateur va animer un objet qui aura l'air d'entraîner la bûche dans le vide.

La réalisation de l'animation commence par le dessin de l'objet de manière figée, en séparant les parties fixes des parties en mouvement. Ces dernières sont ensuite copiées et modifiés, ou simplement redessinées, pour construire les différentes frames. Quand les éléments de toutes les frames sont prêts, l'image est dupliquée et passée à l'échelle finale. Les différentes frames sont mises côte à côte dans une seconde image et un fichier .spritepos est créé ; le tout sera utilisé dans l'éditeur d'animations.

La construction de l'image finale peut être grandement simplifiée par l'utilisation d'un script Scheme.

Sommaire 1 Réalisation de l'image initiale 1.1 Image de base 1.2 Dessin de la roue dentée 1.3 Dessin des tiges 2 Animation des éléments 3 Construction de l'image des frames 3.1 Création du fichier .spritepos 4 Création et utilisation de l'animation

[modifier] Réalisation de l'image initiale

[modifier] Image de base

1. Le croquis initial.

2.a. Aplats de couleurs.

2.b. Calques des différents éléments.

La première étape consiste en un croquis rapide sur papier pour avoir une idée de la forme finale désirée (image 1). Ici, l'objet sera une roue dentée accrochée au mur par deux barres en bois et entrainée par un câble. Après avoir numérisé le croquis et importé dans Gimp, les formes des différents éléments sont tracés par aplats de couleurs (images 2.a et 2.b). Chaque élément a son calque (l'intérieur de la roue, le câble, les dents et les tiges en bois).

[modifier] Dessin de la roue dentée

3. Coloriage de l'intérieur de la roue.

4. Coloriage des dents.

Les éléments sont ensuite coloriés. La couleur de base de la roue est ici modifiée par le menu Couleurs/Colorier…. Pour le centre de la roue (image 3), le volume est exprimé en traçant de grandes ombres avec l'aérographe en taille 50. Le cercle et le centre sont tracés au pinceau avec une variation de la couleur principale, puis les petites marques circulaires sont ajoutées avec un pinceau fin. Enfin, l'éclairage est finalisé en traçant au pinceau les formes triangulaires en haut à gauche et en bas à droite. L'image obtenue est fignolée avec l'outil Barbouiller pour adoucir certaines marques et effacer les petits défauts.

Les dents sont ensuite coloriées par un processus similaire (image 4). De grosses traces noires sont ajoutées au pinceau aux endroits au contact par le câble.

5.a. Éclairage appliqué au dents.

5.b. Calques utilisés pour obtenir l'effet.

6. Résultat du changement de mode des calques.

L'éclairage global des dents est séparé des dents elles-mêmes de pouvoir l'utiliser sur plusieurs frames. Deux calques sont ajoutés au dessus des dents. L'un contient un arc de cercle clair, l'autre un arc de cercle foncé ; tous deux dessinés au pinceau et étalés avec l'outil Barbouiller (images 5.a et 5.b). L'opacité de ces calques est réduite puis leur mode est changé respectivement en Éclaircir et Assombrir (image 6). L'intérêt de cet effet est que l'application d'une rotation à la roue dentée ne va pas tourner l'éclairage. Celui-ci restera constant sur l'ensemble des rotations.

[modifier] Dessin des tiges

7. Tiges coloriées.

8. Effets de rainures.

9. Des éclats dans l'écorce (ou le vernis).

L'objectif est maintenant de donner un effet de volume aux tiges. Pour cela, elles sont coloriées en utilisant l'aérographe avec des couleurs de plus en plus sombres au fur et à mesure que l'on est proche des bords de la tige. Les couleurs utilisées sont ici de l'orange, du marron, du marron foncé et un marron presque noir utilisé finement sur le bord (image 7).

De légères rainures sont ajoutées en créant un calque peint en gris 50 % au dessus des tiges. Sur ce calque est appliqué un bruit (menu Filtres/Bruit/Brouillage RVB) d'intensité égale à 0.07 et en décochant les cases Bruit associé et RVB indépendants. Un flou cinétique linéaire (menu Filtres/Flou/Flou cinétique) de longueur 50 est ensuite utilisé avec un angle à 0. Enfin, l'effet est accentué en augmentant les contrastes (menu Filtres/Amélioration/Augmenter les contrastes…) d'un niveau égal à 40. Le mode du calque est changé en Extraction de grain. Le même procédé est réalisé pour l'autre tige, en adaptant l'angle du flou cinétique. Les parties hors de la tige sont finalement supprimées, de manière à ce que chaque calque ne s'applique que sur la tige qu'il concerne (image 8).

Enfin, des petits éclats sont appliqués aux tiges pour les rendre moins synthétiques (image 9). Pour cela, des petites partie sont sélectionnées au lasso, puis leur luminosité est augmentée d'un niveau égal à 87 (menu Couleurs/Luminosité-Contraste…). La sélection est ôtée puis l'outil d'éclaircissement et d'assombrissement est utilisé pour assombrir les contours des marques, en s'étalant dans la longueur de la tige.

[modifier] Animation des éléments

Maintenant que l'image de basse est totalement faite, l'animation va être plus facile à produire. L'animation finale tiendra sur quatre frames pendant lesquelles la roue fera un quart de tour et le câble se détendra et se retendra. Remarquons qu'après une rotation d'un quart de tour de la roue, les dents se retrouvent superposées avec la situation initiale. Le calque des dents est copié trois fois pour obtenir les calques dents_1 à dents_4, puis une rotation est appliquée à chaque copie, respectivement de 22,5 degrés, 45 degrés et 67,5 degrés. Le calque du centre de la roue est copié deux fois pour obtenir les calques centre_1 à centre_3. Le premier et le troisième sont tournés respectivement de -10 degrés et 10 degrés. Enfin, deux autres câbles sont dessinés, moyennement détendu et complètement détendu. Les calques des câbles sont nommés câble_1 à câble_3.

Avant de créer effectivement les frames de l'animation, il faut supprimer l'espace autour du dessin. Pour cela, tous les calques doivent être visibles, sauf le croquis. L'outil de sélection par couleur est activé, avec les cases Sélectionne des régions transparentes et Échantillonner sur tous les calques cochées, puis une région transparente est cliquée dans un calque au moins aussi grand que l'image. Il faut ensuite inverser la sélection (menu Sélection/Inverser) puis découper l'image (menu Image/Découper la sélection).

10. Des pixels quasiment transparents gênent le découpage de l'image.

11. Mise à l'échelle de l'animation.

Durant cette étape, il faut faire attention à ne pas avoir de pixels quasiment transparents qui vont occuper de l'espace inutile autour de l'image. Par exemple, en appliquant tel quel le processus, on obtient le résultat de l'image 10, où le bord de l'image ne correspond pas au bords des éléments visibles. Cela est dû au fait que la rotation des dents a produit de légères traces transparentes. Le mieux est donc de nettoyer ces calques avant le découpage en leur appliquant une sélection par couleur dans la région transparente, en jouant sur le seuil pour avoir tout ce qui a l'air totalement transparent, puis supprimer le contenu de la sélection.

Pour calculer la taille de l'animation dans le jeu, une copie fusionnée de l'image est produite (menu Édition/Copier visible puis Édition/Coller comme/Nouvelle image), avec tous les calques visibles sauf le croquis. Un autre calque est ajouté à cette copie, avec des éléments du jeu à l'échelle finale (image 11). L'outil de mise à l'échelle est appliqué au calque copié pour trouver une taille acceptable (ce sera ici 80 pixels sur 93).

[modifier] Construction de l'image des frames

Le fichier Gimp de l'animation est maintenant prêt pour construire l'image des frames. La première étape consiste à faire, pour chaque frame, une copies fusionnée des éléments la concernant. Ces copies sont obtenues en utilisant le menu Édition/Copier visible, avec la visibilité des calques activée uniquement pour ceux des éléments de la frame concernée. Ces éléments sont ceux listés ci-dessous pour le cas de ce tutoriel.

• frame 1 : roue_1, câble_1, shadows, lights, dents_1, effet de rainures, tiges ;
• frame 2 : roue_2, câble_2, shadows, lights, dents_2, effet de rainures, tiges ;
• frame 3 : roue_3, câble_3, shadows, lights, dents_3, effet de rainures, tiges ;
• frame 4 : roue_4, câble_2, shadows, lights, dents_4, effet de rainures, tiges.

Ces copies sont regroupées dans une autre image. Elle contiendra donc quatre calques pour le cas présent. Cette nouvelle image est mise à l'échelle finale (menu Image/Échelle et taille de l'image) en appliquant une interpolation cubique. Celle-ci permettra d'avoir des contours doux, plutôt que ceux pixélisés de l'animation affichée au début de cet article, où une interpolation linéaire a été utilisée.

Les calques doivent maintenant être mis côte à côte pour l'image finale. Pour cela, la taille du canevas est augmentée (menu Image/Taille du canevas) à 256 pixels sur 256. Une taille plus petite suffirait à contenir les calques, cependant le jeu charge les images plus rapidement si leurs dimensions sont des puissances de 2 (2, 4, 8, 16, 32, 64, 128, 256 et 512). On essaie néanmoins de minimiser l'espace inutilisé autours des frames, même s'il pourra toujours être utilisé pour ajouter d'autres éléments du jeu.

Une fois que l'image est à la bonne taille, les calques sont mis côte à côte avec l'outil de déplacement. Il ne reste alors qu'à l'enregistrer au format png dans le dossier des données du jeu, ici sous le nom data/gfx/forest/woodlog-thrower.png.

Remarquons que cette étape est à répéter dès que l'image originale est modifiée (par exemple parce que les couleurs initiales ne s'intègrent pas très bien au jeu), ce qui peut vite devenir ennuyeux. L'utilisation d'un script Scheme rendra cette étape anodine.

[modifier] Création du fichier .spritepos

Même si cette étape est facultative, elle est néanmoins fortement recommandée pour créer l'animation dans l'éditeur d'animations par la suite. Il s'agit d'écrire un fichier portant le même nom que l'image (data/gfx/forest/woodlog-thrower.spritepos ici) et listant les parties de l'image représentant les sprites de l'animation. Son contenu sera ici le suivant

frame 1:  0  0 80 93
frame 2: 80  0 80 93
frame 3:  0 93 80 93
frame 4: 80 93 80 93

Chaque ligne contient le nom de l'élément, suivi de deux points puis de l'abscisse, l'ordonnée, la largeur et la hauteur du sprite.

[modifier] Création et utilisation de l'animation

Le plus difficile est maintenant terminé, il ne reste qu'à créer l'animation avec l'éditeur d'animations. Il faut, pour commencer, créer les quatre frames. Dans le dialogue d'édition de frame, choisir l'image woodlog-thrower.png via la boîte de dialogue de sélection d'image. La liste déroulante située en haut de la fenêtre se remplit alors avec le contenu du fichier .spritepos. Il n'y a plus qu'à y choisir la donnée correspondant à la frame. La durée choisie est ici de 0,06 seconde.

Une fois que toutes les frames sont crées, il reste à régler les paramètres de lecture. Le nombre de boucles est sans limites (zéro) et la répétition concerne toute l'animation (First index égal à zéro et Last index égal à trois). La case loopback reste décochée et le reste des paramètres restent aux valeurs par défaut.

Enfin, il faut enregistrer l'animation dans le dossier du jeu, ici sous le nom data/animation/forest/woodlog-thrower.anim, et la compiler pour obtenir le fichier data/animation/forest/woodlog-thrower.canim.

Pour intégrer l'animation au niveau, il faut ouvrir celui de la forêt dans l'éditeur de niveaux. Un objet de type decorative_item est ajouté dans un calque de décoration et le fichier .canim obtenu ci-dessus sert à renseigner le champ item_with_decoration.animation. Puis le niveau est sauvegardé et compilé, et voilà :

L'objet animé dans le jeu, avant qu'il n'entraîne la bûche.

L'objet animé dans le jeu, après qu'il ait entraîné la bûche.

Liste des Tutoriels (m)

Liens physiques · Création d'une animation · Script Scheme