Graphismes 2D pour les programmeurs

Créer un personnage de jeu

Commençons par un personnage 2D simple. Il y a énormément de ressources et de tutoriels sur la création et l'animation d'un personnage - la plupart de ceux-ci sont écrits par et pour des artistes et des animateurs. Je vais essayer de décomposer ce tutoriel en éléments simples et en étapes faciles à suivre.

3 commentaires 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. Créer un personnage de jeu

Commençons par un personnage 2D simple. Il y a énormément de ressources et de tutoriels sur la création et l'animation d'un personnage - la plupart de ceux-ci sont écrits par et pour des artistes et des animateurs. Je vais essayer de décomposer ce tutoriel en éléments simples et en étapes faciles à suivre.

Certaines des techniques utilisées dans ce tutoriel ont été expliquées dans des tutoriels précédents. Ils devraient vous aider à parcourir ce tutoriel un peu plus complexe.

Image non disponible

Vous pouvez trouver des choses similaires à celles-ci en cherchant des exemples d'« animation de personnage en 2D ». Un corps simplifié montrant la tête, le corps et les membres dans un cycle d'animation (par exemple, la marche). L'intégration de ces exemples à un personnage de jeu est la partie difficile.

Image non disponible

Prenez un personnage et décomposez ses membres.
Il est composé de la tête, du corps, des parties haute et basse des bras, des mains, des parties haute et basse des jambes et finalement des pieds.

Les mêmes éléments (avec l'ajout du cou et d'ailes) transforment le personnage en une fée.

Image non disponible

Cette version nue d'un fameux plombier,

Image non disponible
Image non disponible

ce ninja,

ou ce petit personnage créé comme base pour un jeu mobile reposent tous sur le même principe de membres séparés.
En joignant les parties haute et basse des membres, vous réduisez le nombre de parties de votre personnage.

Image non disponible
Image non disponible

Lors de la création de votre personnage, gardez en tête l'espace disponible et les proportions,

Image non disponible

afin d'être sûr que le personnage corresponde aux besoins du jeu.

Sa vraie taille dans le jeu est le point de départ pour créer votre personnage.
La hauteur et la largeur disponibles déterminent les proportions du personnage et le niveau de détail.

Des membres longs et fins et un haut niveau de détail peuvent sembler beaux dans une illustration vectorielle, mais peuvent poser des problèmes lors du passage à une petite image bitmap.
La création et l'animation d'un personnage avec un haut niveau de détail

prennent plus de temps. Soyez certains que c'est visible.

Image non disponible

Il est temps de produire quelque chose. Nous commençons la construction du personnage à partir de rien, puis nous créons la tête, le corps et les membres avant de les assembler pour l'image finale.

Lorsque vous travaillez à partir d'un croquis, d'un gribouillis ou d'un concept, il est utile de l'importer dans un autre calque en dessous de votre pile et de travailler par-dessus (Calque/Ajouter un calque ou Ctrl + Maj + N). Créer le calque (Ctrl + Maj + N), sélectionnez celui du brouillon et importez l'image. Verrouillez-le et sélectionnez le calque de travail (par exemple : calque 1).

Image non disponible
Image non disponible


Commencez par quelques cercles. Image non disponible Convertissez le nez en un chemin et modifiez les nœuds pour former le nez. Image non disponible

Image non disponible


Créez un dégradé linéaire Image non disponible pour faire ressortir le nez et ajoutez quelques cercles supplémentaires. Dessinez les sourcils. Image non disponible

Image non disponible


Convertissez la tête en un chemin (Ctrl + Maj + C) et déformez-le pour former un menton.

Image non disponible


Ajoutez deux cercles pour un chapeau, Image non disponible

Image non disponible


modifiez Image non disponible les nœuds du cercle du dessus pour les connecter. Ajoutez un autre cercle et un carré avec quelques décorations. Image non disponible

Image non disponible


Modifiez le cercle pour former la base d'une plume. Utilisez l'outil de lignes droites Image non disponible pour créer quelques triangles.

Image non disponible


Utilisez la commande Chemin/Différence pour les « couper ». Sélectionnez les éléments du chapeau et tournez-les un peu.

Image non disponible


Ajoutez quelques cercles supplémentaires pour les cheveux et une oreille.

Image non disponible


Ensuite, descendez ou montez les objets (Page suivante & Page précédente) pour placer les cheveux et l'oreille en dessous du chapeau.

Image non disponible
Image non disponible
Image non disponible


Le corps est composé d'un cercle modifié. Image non disponible Image non disponible Un duplicata combiné avec (Chemin/Intersection).

Image non disponible


Le cercle plus sombre pour le pantalon. Ajoutez un rectangle Image non disponible pour la ceinture, un cercle et un triangle pour la chemise. Image non disponible

Image non disponible


Convertissez le rectangle en un chemin (Ctrl + Shift + C) et déformez-le pour obtenir une ceinture.

Image non disponible


Les bras sont faits de deux cercles supplémentaires et d'un rectangle avec des coins arrondis. Image non disponible Image non disponible

Image non disponible


Modifiez Image non disponible les nœuds après avoir converti les objets en chemins. Ajoutez des duplicatas et coloriez-les avec une couleur plus sombre.

Image non disponible


Commencez un autre cercle Image non disponible, convertissez-le en un chemin et modifiez-le Image non disponible pour obtenir la chaussure.

Image non disponible


Un duplicata de la forme permet d'obtenir la semelle et deux cercles ajoutent un peu de détails à la chaussure. Image non disponible

Image non disponible


Ajoutez un duplicata arrondi du bras pour la jambe. Groupez-la et créez un duplicata du groupe.

Image non disponible


Assemblez les objets et descendez ou montez-les (Page suivante & Page précédente) pour les organiser correctement.

Image non disponible

Afin de faciliter l'animation du personnage, les outils de groupage et l'attribution de points de pivot sont très pratiques. Au lieu d'avoir un objet comme le bras tournant autour de son centre, il est plus évident de le tourner au niveau de l'épaule. Afin de faire cela, sélectionnez les objets qui « sont » ensemble et déplacez le point de pivot.

Image non disponible
Image non disponible


Il est temps de changer le point de pivot afin de tourner les parties du corps correctement. Sélectionnez les objets du corps,

Image non disponible


groupez-les et double cliquez Image non disponible pour obtenir le point de pivot. Déplacez la croix vers le bas pour atteindre la zone de la hanche.

Image non disponible


Faites de même avec les bras. Après avoir changé le point de pivot pour les mains et les bras, changez le point de pivot du groupe.

Image non disponible

Groupez les objets de la chaussure et définissez le point de pivot à la cheville. Continuez avec les autres parties et ajustez les points de pivot pour qu'ils soient à « l'emplacement de jointure ».
Après cela, déplacez les groupes et tournez-les sur place.

Note :
certains programmes vectoriels (par exemple Corel Draw) permettent les hiérarchies de groupes. Vous pouvez combiner le groupe de la chaussure avec celui de la jambe et les déplacer ensemble, puis Ctrl & Clic sur le groupe de la chaussure puis tourner la chaussure à la nouvelle position.

 

Cela conclut le processus de création. Il est maintenant temps d'aller jouer avec les formes, créer des variations et obtenir le maximum des objets que nous avons créés jusqu'à présent.

Image non disponible
Image non disponible

Travaillons avec ce qui fait la force des graphismes vectoriels et obtenons rapidement des variations du personnage.

Image non disponible


Le chapeau peut par exemple être transformé en casque.

Image non disponible


Avec l'ajout de quelques cercles, Image non disponible vous formez un bouclier

Image non disponible


et une lance composée de quatre cercles modifiés. Image non disponible Le personnage se transforme en un garde royal.

Image non disponible


Une couleur différente pour la chaussure et deux carrés Image non disponible combinés avec une différence forment une boucle.

Image non disponible


Un long rectangle Image non disponible avec des coins arrondis et quelques cercles Image non disponible forment un sceptre pour le roi.

Image non disponible


Sa couronne est composée de la bande du chapeau et de la plume sur le dessus de la tête - dupliquée et coloriée.

Image non disponible
Image non disponible

Les silhouettes sont une autre modification rapide d'un personnage. Un nouvel ensemble d'yeux et de décorations complète cette transformation.

Image non disponible

Un changement dans la luminosité et la coloration (dans ce cas un décalage vers le jaune) ainsi qu'une désaturation et le personnage peut aussi changer d'aspect.

J'espère que vous avez aimé ce tutoriel. Amusez-vous avec les graphismes vectoriels.

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

III. À vous de jouer

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.