The Last Blog – Comment créer une animation de skill ?

Published: Category:Dev BlogWritten by: bruno

Salut les survivants !

Des nouvelles du front !

Nous espérons que vous allez bien ! Ici, c’est l’été, donc on essaie d’en profiter, malgré… à peu près tout ce que 2020 nous a apporté ! Mais on essaie de rester positifs. 😉

Le Steam Game Festival s’est terminé il y a un mois, et nous sommes très heureux de la manière dont il s’est déroulé ! C’est pourquoi nous avions décidé de la rendre disponible pour une semaine de plus, afin que plus de joueurs puissent l’essayer et nous donner de précieux retours !

Un écran très connu des joueurs de la démo !

Nombreux parmi vous souhaitaient que la démo soit encore disponible, et encore plus de joueurs ont hâte que le jeu soit disponible. Nous partageons le sentiment !

Comme nous l’avons dit précédemment, nous avons encore de nombreux mois de développement devant nous, donc nous n’annoncerons pas la date de sortie pour le moment… Mais ne vous inquiétez pas, nous travaillons dur sur le jeu et nous nous approchons doucement de la sortie de The Last Spell !

Bien que nous ne parlerons pas d’une nouvelle feature aujourd’hui, nous avons pensé que c’était quand même l’occasion de parler de la partie artistique du jeu ! Ainsi, nous allons discuter de l’une des features préférées de nos joueurs dans The Last Spel : les effets visuels que nous avons créés pour les nombreuses skills du jeu !

En revanche, je ne suis que le Community Manager, et… vous n’avez pas envie de voir mes compétences artistiques ! Pour cela, Adrien va aujourd’hui m’aider pour ce blogpost !

Adrien est notre talentueux artiste FX pour The Last Spell !

Notez d’ailleurs que pendant le reste du blogpost, nous utiliserons “FX” quand on veut parler des “effets spéciaux visuels”.

Une petite présentation !

Salut les survivants ! C’est la première fois que j’écris un blogpost, mais je suis heureux de pouvoir partager avec vous mon travail ! 😊

Donc, je m’appelle Adrien, j’ai commencé à travailler sur The Last Spell en Mars 2020 ! Avant de travailler à CCCP j’ai étudié le Games Art à l’école Emile Cohl à Lyon et j’ai effectué des stages à PassTeach Games et à Piece of Cake Studios.

Quelques uns des travaux d’Adrien ! Vous pouvez également visiter son Instagram https://www.instagram.com/adrien_feugere/

J’ai toujours aimé travailler avec le pixel-art, donc j’étais vraiment heureux de travailler sur The Last Spell !

Au départ, Jacques et Manon s’occupaient des FX de The Last Spell par eux-mêmes, mais puisqu’il y en a BEAUCOUP à faire pour le jeu, je suis arrivé dans l’équipe pour leur donner un coup de main !

Mais assez parlé de moi, parlons d’une composante très importante dans un jeu : les animations ! Même si The Last Spell reste un jeu indépendant, Jacques et Matthieu (le directeur créatif) souhaitaient que les attaques soient “cool” et “puissantes”. L’un des tous premiers pilliers du jeu était d’avoir cette équipe de héros, qui n’avaient peut-être pas le meilleur équipement au départ, mais qui savaient lancer de puissantes attaques impressionnantes ! Et les animations jouent un rôle très important pour ça !

La compétence “assassinate” dans The Last Spell

Une règle très cruciale dans l’animation est la question du timing. Par exemple, pour un tir (d’un fusil), vous aurez besoin d’une grande anticipation suivie par une action très rapide. Si je prends la compétence “assassinate” du fusil dans The Last Spell, on a un long moment de chargement du fusil, mais le tir ne dure que quelques frames ! Pour une explosion, l’impact sera très rapide, cela signifie que l’explosion se répandra très rapidement (en 2/3 frames), mais ensuite la fumée et les débris mettront plus longtemps à se dissiper… C’est le timing qui nous permet d’avoir une animation dynamique, globalement.

Voilà un petit spreadsheet de l’animation du fusil que je vous ai montré avant 🙂

Mais assez de théorie ! Je suis sûr que vous voulez un autre exemple de The Last Spell, n’est-ce pas ? 🙂

Comment créer une animation d’attaque dans The Last Spell ?

Je vais vous détailler un exemple de FX sur lequel j’ai travaillé il y a quelques mois : la compétence “Entangle” que vous pouvez lancer avec un druidic staff !

Pour ceux qui ont raté la démo, voilà la compétence ingame !

C’est en réalité le travail combiné de Jacques (le directeur artistiques), les game designers et moi, et il y a BEAUCOUP de discussions pour chaque attaque dans The Last Spell, donc j’essaierai de les résumer du mieux que possible ! ^^

En fait, avant d’animer quoi que ce soit, on doit rassembler des informations : le nom de l’attaque, la zone d’effet (AOE), magique/pas magique…

Donc, pour cette attaque, nous savions qu’elle appartenait au druidic staff, qui est une arme fortement liée à la nature elle-même.

Aussi, grâce aux game designers, nous avions des informations très vitales, telles que la forme de l’attaque, s’il y avait un debuff avec l’attaque, les dégats… Si c’est une petite attaque, je créerai un FX très différent d’une attaque “OP” qui pourrait tuer 20 ennemis en un coup !

A ce stade, j’ai commencé à être inspiré par une attaque qui étranglerait les ennemis avec des ronces très épineuses.

Donc, j’ai cherché des références, dessiné quelques premiers croquis et j’avais une version trèèèèèès early de l’attaque dans mon cahier !

Une fois que j’avais une idée très brute du rendu de l’animation, j’ai été sur mon programme (j’utilise photoshop, mais il y en a de nombreux autres que vous pouvez utiliser : TVPaint, Krita, Flipbook, ToonBoom Harmony, Gimp…).

C’est une étape très importante, puisque vous devez dessiner le mouvement principal de votre FX. C’est encore à l’état d’ébauche, mais cela sera votre idée directrice pendant le reste du processus ! Mon conseil est de prendre votre temps pour trouver le bon timing et la bonne forme.

Une fois que c’est fait, vous avez besoin de “cleaner” votre animation ! Il n’y a pas grand’chose à dire sur cette étape en dehors du fait qu’elle doit être belle. Vous remarquerez que j’ai redessiné les ronces et que j’y ai ajouté des épines.

Enfin, la partie amusante ! Les détails !

En résumé, c’est l’étape qui la rendra exceptionnelle et pas juste sympathique à regarder ! A cette étape, vous pouvez y ajouter des particules, du glowing, des teintes et de la saturation, des couches pour changer la couleur de votre FX au cours du temps… Prenez garde en revanche, car cette étape peut vous prendre beaucoup de temps.

Pour le FX “entangle”, j’ai ajouté de la couleur, des particules de terre, et une frame blanche pour accentuer le moment où le coup arrive sur l’ennemi.

Et tadaaa ! Maintenant, elle est prête à être intégrée au jeu !

J’ai même fait un petit gif qui résume toutes ces étapes, pour que ce soit utile pour les artistes en herbe nous lisant ! 😉

Bonus time: la magie du code

Quelque chose que je n’ai pas inclus dans mon gif “Tutoriel”, mais qui peut être important à noter : dans le tout premier gif, vous remarquerez qu’il y a une toute petite partie du gif que je n’ai pas expliqué. La voici :

En fait, cette partie apparaît de manière aléatoire dans les zones frappées par l’attaque, mais à des moments différents de l’animation ! C’est fait grâce à nos mages connus sous le noms de “programmeurs” 😉

Maintenant, je dois filer, j’en ai encore plusieurs dizaines à animer… Souhaitez-moi bonne chance !

One last thing: The Last Haven

Merci Adrien ! Et voilà, c’est ainsi que l’on fait un FX dans The Last Spell.

Nous terminerons ce blogpost avec une petite annonce pour celles et ceux qui l’ont raté !

Nous sommes heureux d’annoncer que nous avons fait notre propre mini-jeu Discord, appelé “The Last Haven” !

C’est quelque chose que nous avons fait pour nos fans alors qu’ils attendent The Last Spell. Protégez la ville en tuant des ennemis, casser le sceau de magie, sauvez le Havre et devenez un vrai héros !

Donc, si vous voulez aider les autres joueurs sauver autant de Havres que possible (et peut-être avec une jolie surprise !), rejoignez notre serveur Discord !

Avez-vous une question pour Adrien, Jacques ou Manon (nos artistes sur The Last Spell !) ? Posez-les nous dans les commentaires ou rejoignez notre serveur Discord !

-The Last Team

Follow us!


Tip: You can quickly comment these blog post entries just by entering whatever email

Views:   1370  

Post your comment