Graphismes 2D pour les programmeurs

Animation de personnages

Réalisez des animations pour vos jeux avec Inkscape.

Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

Image non disponible
Image non disponible


Commençons avec quelques cercles pour la forme principale du visage et des yeux. Image non disponible Image non disponible

Image non disponible


Groupez l'œil et dupliquez-le, puis retournez-le. Réduisez-le et positionnez le petit œil sur le bord droit du visage.

Image non disponible


Ajoutez un autre cercle, modifiez le nœud de droite pour former l'oreille. Image non disponible Image non disponible

Image non disponible


Utilisez l'outil de lignes Image non disponible pour dessiner une forme de flèche avec quatre lignes que vous convertissez en courbes pour les modifier. Image non disponible

Image non disponible


Ajoutez deux cercles pour surligner les oreilles et deux carrés pour d'épais sourcils.

Image non disponible


Ajoutez un cercle pour le cou Image non disponible et un autre pour le nez. Utilisez un dégradé Image non disponible sur le nez et courbez les nœuds. Image non disponible

Image non disponible


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.

Image non disponible


Déformez les cheveux Image non disponible et ajoutez un dégradé pour donner une impression de profondeur. Image non disponible Deux cercles supplémentaires formeront la bouche et les dents.

Image non disponible


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.

Image non disponible
Image non disponible
Image non disponible


Modifiez un autre cercle pour la jambe… Image non disponible

Image non disponible
Image non disponible


… et créez un duplicata plus petit pour la partie inférieure. Créez le genou en ajoutant une courbure. Image non disponible

Image non disponible

Le pied est fait à partir d'un cercle déformé et de deux copies retournées. Image non disponible Groupez ces objets et définissez le point de pivot sur la cheville Image non disponible

Les bras et les mains ne sont que des cercles modifiés. Image non disponible 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.

Image non disponible

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).

Image non disponible
Image non disponible


Arrangez les objets sur une disposition de base. Image non disponible

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.

Image non disponible


Affichez le panneau des calques avec Calque/Calques ou Ctrl + Maj + L.

Image non disponible


L'homme des cavernes est actuellement sur le premier calque – en cliquant sur l'icône avec l'œil, il sera caché. Image non disponible

Image non disponible


L'icône de verrou Image non disponible bloque les objets sur le calque empêchant leur sélection ou édition.

Image non disponible


L'opacité permet de définir la transparence des calques.

Image non disponible


Créez un nouveau calque en utilisant l'icône plus. Image non disponible
Dans la boîte de dialogue « Ajouter un calque », nommez le calque et sélectionnez l'option « Au-dessus du calque actuel ».

Image non disponible


Cliquez sur le Calque 1 dans le panneau des calques, sélectionnez tous les objets Image non disponible (Ctrl + A) et copiez-les (Édition/Copier ou Ctrl + C).

Image non disponible


Sélectionnez le Calque 2 et collez les objets sur place (Édition/Coller sur place ou Ctrl + Alt + V).

Image non disponible
Image non disponible
Image non disponible


Définissez l'opacité du premier calque à 25 % et verrouillez-le. Image non disponible Image non disponible

Image non disponible


Sélectionnez le Calque 2 et déplacez un objet (par exemple, la tête).

Image non disponible


La configuration du calque vous permet de travailler sur les animations tout en gardant un aperçu des images précédentes.

Image non disponible


Après avoir modifié la pose, copiez-la sur le prochain calque, verrouillez le précédent et réduisez son opacité.

Image non disponible


Activez et désactivez la visibilité du calque courant pour tester les étapes de votre animation Image non disponible.

Image non disponible


Note :
lorsque vous exportez un fichier bitmap, assurez-vous de sélectionner les objets uniquement dans un seul calque.

Image non disponible


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)

Image non disponible
Image non disponible


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…

Image non disponible


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)… Image non disponible

Image non disponible


… et démarrez la rotation du pied le plus haut pour faire le pas. Tournez la jambe du bas et mettez-la en place. Image non disponible

Image non disponible


Puis les bras – démarrez avec une rotation de la partie supérieure du bras et ajustez sa partie inférieure en conséquence. Image non disponible

Image non disponible


C'est l'image de début, mais aussi la neuvième dans l'animation, car nous souhaitons qu'elles bouclent...

Image non disponible


Copiez les objets dans un nouveau calque, verrouillez l'ancien et réduisez son opacité.

Image non disponible


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.

Image non disponible


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.

Image non disponible


Encore une fois, nous copions les objets dans un nouveau calque, verrouillons l'ancien et continuons l’animation avec les éléments copiés.

Image non disponible
Image non disponible
Image non disponible


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. Image non disponible

Image non disponible


Le genou de derrière guide le mouvement des jambes – devenant ainsi visible alors que les membres de devant disparaissent.

Image non disponible


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.

Image non disponible


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é.

Image non disponible

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.

Image non disponible


Maintenant, nous passons le Calque 2 comme référence et nous réarrangeons les bras et les jambes pour inverser la pose.

Image non disponible


De même avec la septième image, qui correspond à la troisième,

Image non disponible


la huitième image, qui est la même pose de la quatrième image sauf que les bras et jambes sont inversés.

Image non disponible

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

Image non disponible

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 : Viadeo Twitter Facebook Share on Google+   

  

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 et 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.