Graphismes 2D pour les programmeurs

Animation de personnages

Réalisez des animations pour vos jeux avec Inkscape.

Commentez

Article lu fois.

Les deux auteur et traducteur

Chris Hildenbrand

Traducteur : Alexandre Laurent

L'article

Publié le 20 novembre 2014

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

I. Animation de personnages▲

Je devrais signaler que cette méthode n'est qu'une façon de faire des animations. Elle est très proche de la vieille technique de découpage des animations. Elle n'est pas aussi fluide qu'une animation dessinée à la main ou un travail en 3D, mais elle est immédiate et, en quelque sorte, facile à suivre. Elle fonctionne bien avec les petits sprites.

II. Créer l'homme des cavernes à animer▲

C'est à peu près équivalent à la troisième partie de ce tutoriel avec toutefois un peu plus de complexité dans le visage.

Commençons avec quelques cercles pour la forme principale du visage et des yeux.	Groupez l'œil et dupliquez-le, puis retournez-le. Réduisez-le et positionnez le petit œil sur le bord droit du visage.	Ajoutez un autre cercle, modifiez le nœud de droite pour former l'oreille.
Utilisez l'outil de lignes pour dessiner une forme de flèche avec quatre lignes que vous convertissez en courbes pour les modifier.	Ajoutez deux cercles pour surligner les oreilles et deux carrés pour d'épais sourcils.	Ajoutez un cercle pour le cou et un autre pour le nez. Utilisez un dégradé sur le nez et courbez les nœuds.
Un cercle en bas de la pile forme la base pour les cheveux, avec un triangle pour la racine des cheveux et deux autres par-dessus pour dessiner la barbe.	Déformez les cheveux et ajoutez un dégradé pour donner une impression de profondeur. Deux cercles supplémentaires formeront la bouche et les dents.	Ainsi que trois autres pour la queue de cheval (placée derrière toutes les autres formes avec Page précédente) accompagnée de quelques formes transparentes pour les reflets.

Modifiez un autre cercle pour la jambe…
… et créez un duplicata plus petit pour la partie inférieure. Créez le genou en ajoutant une courbure.
Le pied est fait à partir d'un cercle déformé et de deux copies retournées. Groupez ces objets et définissez le point de pivot sur la cheville	Les bras et les mains ne sont que des cercles modifiés. Dupliquez les membres et assombrissez-les légèrement pour ajouter de la profondeur.	Groupez la tête et ajustez les points de pivot des différents objets afin d'obtenir le personnage de base.

J'ai effectué une symétrie sur les jambes et les bras dans l'image ci-dessus pour montrer la configuration du corps en « éclaté ». Il n'y a aucun besoin de cela lorsque vous utilisez les éléments pour une seule vue sur le côté (les deux pieds doivent pointer dans la même direction).

Arrangez les objets sur une disposition de base.	Calques Jusqu'à présent nous n'avons travaillé que sur un seul calque. Pour les animations nous utiliserons les fonctionnalités des calques d'Inkscape. La création d'une nouvelle disposition sera facilitée en gardant les objets sur différents calques et en copiant les changements de disposition au fur et à mesure de leur création.	Affichez le panneau des calques avec Calque/Calques ou Ctrl + Maj + L.
L'homme des cavernes est actuellement sur le premier calque – en cliquant sur l'icône avec l'œil, il sera caché.	L'icône de verrou bloque les objets sur le calque empêchant leur sélection ou édition.	L'opacité permet de définir la transparence des calques.
Créez un nouveau calque en utilisant l'icône plus. Dans la boîte de dialogue « Ajouter un calque », nommez le calque et sélectionnez l'option « Au-dessus du calque actuel ».	Cliquez sur le Calque 1 dans le panneau des calques, sélectionnez tous les objets (Ctrl + A) et copiez-les (Édition/Copier ou Ctrl + C).	Sélectionnez le Calque 2 et collez les objets sur place (Édition/Coller sur place ou Ctrl + Alt + V).

Définissez l'opacité du premier calque à 25 % et verrouillez-le.	Sélectionnez le Calque 2 et déplacez un objet (par exemple, la tête).	La configuration du calque vous permet de travailler sur les animations tout en gardant un aperçu des images précédentes.
Après avoir modifié la pose, copiez-la sur le prochain calque, verrouillez le précédent et réduisez son opacité.	Activez et désactivez la visibilité du calque courant pour tester les étapes de votre animation .	Note : lorsque vous exportez un fichier bitmap, assurez-vous de sélectionner les objets uniquement dans un seul calque.
Après avoir mis en place la partie technique, attaquons-nous aux animations.

Après avoir longtemps travaillé avec CorelDraw, j'en suis venu à apprécier la configuration en pages multiples de ses documents. Au lieu d'utiliser des couches pour les animations, vous n'avez qu'à les placer sur des pages différentes et les passer rapidement pour vérifier votre progression. Le programme permet même d'exporter les pages vers un fichier bitmap avec calques tout en gardant les calques et les pages séparés.

III. Animation▲

Si vous débutez dans l'animation, il est pratique de commencer par quelques animations plus basiques – il n'y a rien de mauvais avec le mouvement « kung-fu-tigre-fou-360-rencontrant-le-dragon-dans-les-airs », mais cela peut être un peu frustrant de commencer par cela.

Pensez simple et créez quelque chose que vous pouvez utiliser dans votre jeu. De cette façon vous allez rester motivé et concentré.

C'est toujours utile de chercher des références, poses, animations et d'autres tutoriels. De nombreuses références vous montreront une configuration simplifiée rendant le travail plus facile que de tout faire de mémoire et en partant de vos propres expériences.

IV. Premier pas (au sens propre)▲

Nous allons commencer l'animation de marche avec la jambe de devant allant vers le sol et nous visons une animation de marche en huit images…	Comme le corps descend légèrement durant un pas, déplacez tous les objets mis à part le pied vers le bas (touches fléchées)…	… et démarrez la rotation du pied le plus haut pour faire le pas. Tournez la jambe du bas et mettez-la en place.
Puis les bras – démarrez avec une rotation de la partie supérieure du bras et ajustez sa partie inférieure en conséquence.	C'est l'image de début, mais aussi la neuvième dans l'animation, car nous souhaitons qu'elles bouclent...	Copiez les objets dans un nouveau calque, verrouillez l'ancien et réduisez son opacité.
Après la première image, la jambe du dessus ira vers le bas et la jambe de derrière remontera alors que les bras se balanceront légèrement pour revenir vers le centre.	La tête descend légèrement plus (pour atteindre son point le plus bas dans le cycle de marche). Pour la marche, il est essentiel de garder le niveau des pieds.	Encore une fois, nous copions les objets dans un nouveau calque, verrouillons l'ancien et continuons l’animation avec les éléments copiés.

Maintenant, nous déplaçons la tête pour qu'elle revienne un peu à sa place pendant que le pied de derrière va vers l'avant et le pied de devant vers l'arrière.	Le genou de derrière guide le mouvement des jambes – devenant ainsi visible alors que les membres de devant disparaissent.	C'est le moment d'ajouter un nouveau calque, de copier la troisième image dans ce nouveau calque et de verrouiller le précédent.
Ensuite arrive le point le plus haut dans le cycle de marche. Les jambes se lèvent et les bras se balancent dans le sens opposé.
	Après avoir fait quatre images, vous avez atteint la moitié de la marche. La prochaine image est très similaire à la première…	… avec les bras et les jambes « inversés ». Le bras de devant et la jambe de derrière sont maintenant devant.
Maintenant, nous passons le Calque 2 comme référence et nous réarrangeons les bras et les jambes pour inverser la pose.	De même avec la septième image, qui correspond à la troisième,	la huitième image, qui est la même pose de la quatrième image sauf que les bras et jambes sont inversés.

Voici une version rétrécie de ce à quoi le cycle de marche ressemble :

Cette configuration vous semblera très familière si vous utilisez Adobe Flash ou un autre outil basé sur la frise chronologique. Les groupes d'objets créés dans Inkscape sont similaires à des symboles, tels les « movieclips » ou « graphics » dans Flash. Tout ce que vous devez faire, c'est animer les morceaux que Flash gère pour vous avec l'outil « tweening ».

J'espère que vous avez apprécié ce supplément et que cela vous a donné quelques idées pour vous amuser avec les graphismes vectoriels.

V. Remerciements▲

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

VI. Commenter▲

Vous pouvez commenter cet article ou présenter vos réalisations sur le forum.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2014 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.