Devenez un personnage du jeu

Aujourd'hui, c'est vous qui travaillez !

L'une des originalités de Rose in the Woods, c'est que vous pouvez rencontrer d'autres campeurs qui vous viennent en aide tout au long de votre aventure. Et ces campeurs, c'est vous : les lubiens et les donateurs Ulule qui ont souhaité figurer dans le jeu.

Cet article va tout vous expliquer : quelles animations vous devez fournir, sous quel format les envoyer et, pour les plus courageux d'entre vous, comment les animer avec Flash !

Vous devez aussi me fournir une illustration de votre personnage, de la tête aux pieds, pour le moment où on le découvre dans la forêt dans le mini-jeu des lucioles (taille de l'image : entre 200 et 500 px de haut). N'hésitez pas à lui donner un air apeuré ou surpris : après tout, il était perdu dans la forêt !

Tous vos personnages sont à m'envoyer via ce formulaire, jusqu'au 29 Septembre dernier délai. Attention néanmoins, car vous êtes plus d'une centaine à avoir demandé à figurer dans le jeu. Si vous m'envoyez tous vos personnages au dernier moment, je ne pourrai humainement pas tous les intégrer. Je traiterai donc en priorité ceux qui me seront adressés le plus tôt !

Quelle animation pour mon personnage ?

Les alliés (lubiens et donateurs Ulule) peuvent être classés en quatre catégories selon leur type de pouvoir et les animations qu'il va demander.

Certains pouvoirs sont plus faciles à réaliser que d'autres. Si vous sentez que c'est trop difficile pour vous, ne restez pas bloqués, parlez-en et nous vous trouverons un pouvoir plus facile à réaliser. A l'inverse, si vous avez un pouvoir simple à réaliser et que vous souhaitez plus de challenge, signalez-le et nous vous monterons en grade !

Tous les pouvoirs sont résumés dans ce document. Un merci tout particulier à Lother qui a proposé énormément d'idées, et grâce à qui tout le monde a désormais son pouvoir bien à lui !

Etat permanent

Difficulté : très facile

Nombre de positions : 1

Technique : animation Flash ou image .png

Ce premier type de pouvoir concerne tous les alliés qui ont un effet permanent sur le jeu, qui prend fin à leur mort. Par exemple, les costauds qui servent de protection ou ceux qui boostent une capacité du héros ou des alliés.

Ils vous allez donc réaliser une seule posture pour votre personnage, de préférence en rapport avec son pouvoir (par exemple, Stroff a le pouvoir "Joueur de flûte : attire les ennemis vers lui" : il faudrait le voir jouer de la flûte).

Quelques exemples de postures

Vous pouvez animer votre personnage si vous le souhaitez, mais ce n'est pas obligatoire.

Pouvoir activable

Difficulté : facile

Nombre de positions : 2 (activé / désactivé)

Technique : animation Flash ou image .png

Ce second type de pouvoir concerne tous ceux qui activent leur pouvoir pendant un petit moment, puis sont au repos le temps du cooldown (rechargement). Par exemple, ceux qui soignent le héros.

Il faut donc deux postures, pour que le joueur sache quand le pouvoir est actif et quand il ne l'est pas. La première posture correspond à une posture de repos : le personnage ne fait rien. La seconde correspond au moment où il lance son pouvoir / sort / attaque.

Exemple de postures

Dans la plupart des cas, une animation Flash n'est pas indispensable, mais toujours bienvenue !


Attaque à distance

Difficulté : difficile

Nombre de positions : 3 (face, dos, profil)

Technique : animation Flash ou image .png

Ce troisième type de pouvoir concerne ceux qui vont tirer à distance sur les ennemis. Comme leur cible peut se trouver n'importe où autour d'eux, il faut qu'ils se tournent pour leur tirer dessus. Il faut donc trois positions : de face, de dos et de profil (que l'on pourra utiliser en miroir pour la gauche et la droite).

Vous pouvez, au choix, faire une animation pour le tir (recommandé) ou, si votre pouvoir le permet, vous contenter d'une image fixe.

Vous devrez également joindre une image (fixe) de vos projectiles.

Deux exemples de postures (le premier statique, le deuxième animé)

Attaque au corps à corps

Difficulté : difficile

Nombre de positions : 2 (repos / attaque)

Technique : animation Flash obligatoire

Enfin, terminons avec ceux qui ont prévu une attaque au corps-à-corps. Ces attaques dévastatrices ne doivent se déclencher que ponctuellement, il faut donc une posture de repos et une animation d'attaque.

Pour que l'attaque soit bien dynamique, il faudra donc une animation pour l'attaque !

Exemple de postures

Comment réaliser votre personnage ?

Pour vous aider, je vais réaliser pas à pas mon personnage, lou lubie. Un petit coup d’œil dans le Google Doc des pouvoirs de lubiens me rappelle mon pouvoir. C'est un état permanent, je n'ai donc besoin que d'une seule posture.

1/ Première chose à faire : prendre une feuille et un crayon et réfléchir à la posture que je vais réaliser.

J'essaye de trouver une idée qui soit cohérente avec mon pouvoir. "Le meilleur de vous-même : augmente les points de vie max de tous les lubiens sur le terrain." C'est un pouvoir de soutien. L'idée, c'est que j'encourage les lubiens et que je les rends plus forts : je pourrais donc agiter un drapeau pour les encourager !

Recherches pour une idée d'animation

2/ L'idée me plaît. Je peux maintenant réaliser un petit dessin du personnage qui va me servir de guide. Notez que le personnage n'a pas besoin d'être très détaillé, car il devra rentrer dans une case de 50 pixels sur 50 pixels - c'est tout petit !

Croquis du personnage

3/ Si je me contentais de faire un personnage statique, je pourrais m'arrêter à cette étape. Il suffirait de faire la mise en couleur et de redimensionner le dessin pour qu'il soit à l'échelle.

Mon personnage en version statique

Je pourrais alors envoyer mon dessin à l'échelle pour le jeu, au format .png et sur fond transparent, via ce formulaire. Pour être sûre qu'il ait un nom unique, je l'appellerais loulubie_statique.png.

Mais c'est un peu trop facile, non ? Allez, rajoutons du challenge : je vais plutôt animer mon personnage avec Flash. Ce ne sera pas très dur, car les personnages sont très statiques (ils ne courent pas, ne sautent pas...) donc il s'agit d'animations très simples.


La première chose à faire est de vous procurer Flash. Sauf que le logiciel coûte la bagatelle de 1.000 € environ. Vous n'avez pas gagné au Loto récemment ? Heureusement, vous pouvez profiter de sa version gratuite pendant un mois en le téléchargeant ici !

Ça y est, c'est installé ? Parfait, lançons-le et réalisons ensemble notre personnage animé ! Je ne vais pas vous réexpliquer tout le fonctionnement de Flash, parce que tout est déjà expliqué dans mon tutoriel d'animation Flash. Mais je vais vous montrer comment je l'applique à ce personnage.

4/ La première étape est de vectoriser mon personnage, comme l'a fait Balthazarn pour le héros. J'importe mon croquis avec Fichier > Importer... et je le place sur un calque, que je verrouille.

5/ Ensuite, je vais retracer les lignes de mon personnage avec la plume. J'ai déjà expliqué comment se servir de la plume, et vous trouverez tout plein d'autres astuces dans mon tutoriel Dessiner avec Flash.

Ce qui est vraiment important ici, c'est de dessiner séparément chaque élément qui doit être articulé sur un calque différent. Inutile, par exemple, de séparer la tête du corps puisqu'ils ne bougeront pas [en vert] ; en revanche, je vais donner du mouvement à la chevelure, je la place donc à part [en orange]. Je n'ai dessiné qu'un seul bras, car je vais le dupliquer pour en obtenir un deuxième identique sans me fatiguer.

Vectorisation de mon personnage

6/ Vous remarquez que j'ai fait plein de lignes qui ne devraient pas être là et qui se superposent. Par exemple, les jambes "rentrent dans" la robe. Je sélectionne l'ensemble de mes calques, je fais un clic droit > séparer (break apart) et toutes mes formes sont aplaties. Je peux alors supprimer les lignes en trop en cliquant dessus, et en appuyant sur la touche Suppr.

Je prends ensuite mon Pot de peinture, et je colorie chaque zone. C'est aussi le moment de réordonner mes calques, pour que les cheveux soient en-dessous de la tête par exemple.

Personnage nettoyé et colorisé

7/ On passe maintenant à une manipulation spécifique à Flash. Comme Balthazarn l'expliquait au sujet du personnage, je dois moi aussi convertir tous ces éléments en movieClips.


Je commence par créer un gros movieClip global qui va contenir le personnage en entier. Dans mon onglet Bibliothèque (Library), je clique sur le petit bouton Nouveau en bas à gauche et je crée un movieClip que j'appelle loulubie_perso.

Je me retrouve alors avec un espace de travail complètement vierge. Pas de panique, c'est juste que je suis à l'"intérieur" du movieClip. Je reviens sur la scène principale en cliquant sur Scene 1 (en haut à gauche) et revoilà mon dessin. Je sélectionne l'ensemble de mes calques (Shift enfoncé) et je fais Clic droit > Copier les images (Copy frames). Je reviens ensuite dans mon movieClip loulubie_perso (dans la bibliothèque), je fais un clic droit sur sa timeline, et je colle les images (paste frames). Voilà, j'ai transposé mon travail dans un movieClip.

Nommez proprement vos movieClips !

Pourquoi fallait-il faire cette manipulation ? Parce que, côté code, le programmeur va déplacer le movieClip tout entier, indépendamment de son animation. Il faut donc qu'il soit indépendant.

De même, pour que je puisse animer les éléments à l'intérieur de mon personnage (ses bras, ses yeux, ses cheveux, son drapeau...), il faut que je les convertisse en movieClip. C'est facile : je clique sur un calque non verrouillé pour sélectionner son contenu, je fais un clic droit dessus, et je choisis Convertir en symbole (Convert to symbol). Nommez proprement vos movieClips, c'est super important pour s'y retrouver ! Je vous conseille de les appeler nom_element (par exemple loulubie_corps, loulubie_cheveux...).

Ah, et c'est le moment de supprimer ou recolorier les traits fluos moches.

8/ Je vais maintenant déplacer les points de pivots de chaque élément pour les placer là où l'élément doit coulisser : par exemple, le point de pivot d'un bras doit se trouver au niveau de son épaule, et non en plein milieu (en savoir plus). J'en profite pour dupliquer le bras droit et en faire un bras gauche.

Emplacement des points de pivot des bras

9/ Tout est prêt, ça va être très facile d'animer !

Dans la bibliothèque, je duplique loulubie_perso en un deuxième movieClip appelé loulubie_statique. Comme ça, je garde une copie intacte au cas où.

Dans loulubie_statique, j'ai déjà ma position de départ (le drapeau à droite). Je rajoute donc des images-clé un peu plus loin sur la timeline (clic droit > ajouter des images-clé) et je change la position de mon personnage pour obtenir le drapeau à gauche.

Il faut aussi copier les images du début et les coller à la fin pour que l'animation boucle (la posture de début doit être la même que la posture de fin).

Enfin, je fais Clic droit > Créer une interpolation classique pour que le logiciel anime le passage d'une posture à l'autre.

Je peux tester en appuyant sur Ctrl + Entrée. Et là... aïe, aïe, ça ne va pas du tout, les bras partent en vrille !

10/ Et c'est, selon moi, le moment le plus intéressant. Celui où vous allez personnaliser l'animation, la corriger, lui donner une âme.

Moi, je vais bien sûr affiner le mouvement des bras. Mais aussi donner du mouvement aux cheveux et au drapeau, et faire cligner des yeux. Sans oublier une petite ombre au sol !

Bien sûr, en grand, le personnage paraît un peu simpliste. Mais n'oubliez pas qu'au final, il sera tout petit dans le jeu. Et en petit, une animation aussi simple est très suffisante, et bien plus sympa qu'une image fixe !

11/ Pour ceux qui doivent fournir plusieurs postures, reprenez ensuite à l'étape 9 en créant d'autres movieClips, un par animation (loulubie_attaque, loulubie_activation...). Et quand vous vous sentez prêt, envoyez-moi votre fichier .fla.

Attention, je travaille avec Flash CS6 (et non Flash CC, la version la plus récente). Si vous avez Flash CC, au moment de l'enregistrement, pensez bien à choisir Flash CS6 Document comme "type" pour votre fichier afin que nous soyons compatibles. Pour les autres (Flash CS5, Flash CS4, etc...) il n'y aura pas de problème.

Des questions, des soucis ? Expliquez-moi votre problème dans les commentaires !