Bienvenue, Invité! Merci de vous connecter ou de vous inscrire.

Inscris-toi sur le Forum Manga sans Frontieres !

Publie ta bande dessinee
Participe aux concours et gagne des cadeaux
Accede au tchat de manga sans frontieres
Ouvre gratuitement un blog de manga sur Manga sans Frontieres
Participe aux livestream des membres

Auteur Sujet: [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages  (Lu 934 fois)

Sora

  • Membre Héroique
  • *
  • Points de coopération: +15/-0
  • Messages: 1.293
  • 私はソラです ^^ !!!
Après une discussion avec Aki, j'ai vu que certain membres était intéressé par le pixel art du coup je me suis décider à en faire un petit pour commencer. Si il plait ou qu'il a une réelle utilité pour les membres je pourrais en faire la suite.

Avant de commencer :

Ce tuto ne concerne pas les techniques de dessins traditionnel, il est question ici de pixel art, image dessiner pixel par pixel couramment utiliser dans les jeux 2D ( Sonic, Megaman, Castlevania, Mario,... ).

Avec ce tuto, vous pourrez avoir des petites bases qui peuvent être utilisées dans l'animation 2D traditionnel ^^ !

Sur ce, commençons !


Le Pixel Art, Petit travail d'animation
Les Personnages

INTRODUCTION :

Qu'est ce que le Pixel Art ?

Le pixel art est un travail numérique aux couleurs limitées et où chaque pixel à une importance dans l’œuvre qui résulte de cette technique. A son apparition il s'agissait de matrices ( tableaux ) de pixels aux tailles et couleur limité et prédéfinis, dont l'utilité était de représenter même avec très peu de détails les graphismes d'un jeux vidéo ( Pong est l'un des premiers à utiliser des pixels de couleur et non des graphisme analogiques pour son jeu ). (En technique, la mosaïque peut être vu comme l'un des précurseur au pixel art)

Avec les systèmes de l'époque on est "affranchi" de ces limites.
Ce qui fait d'un pixel art un pixel art c'est :
          - Chaque pixel à une importance
          - Le fait de choisir soit même les couleurs utilisées et ne pas laisser décider la virgule flottante du calcul de couleur comme on le fait généralement en colo numérique ( avis à moitié subjectif ici ^^' ).

Les sprites des personnages de Blazblue sont un parfait exemple pour montrer la pertes de limites de tailles. Ils n'en demeurent pas moins d'excellent pixel art

Petits conseils avant de commencer :

            - Commencer par définir une palette de couleurs, ça évite de créer toujours des couleurs lors du dessin et donc d'avoir une palette de couleur de extensible au lieu d'une qui est fixe ( si réel besoin, vous pourrez la modifier plus tard )
            - Pour débuter ne pas faire des sprites ni trop grand ni trop petit car c'est les plus dur à gérer à mon avis
            - Les petits détails, sur des petits et sprites de tailles moyenne, on le représente pas, on laisse aux visionneurs de l’œuvre le soin de ce l'imaginer.
            - L'abus de ctrl+z est fortement recommander afin de trouver le bon enchainement de pixels ( profitez-en, le PC n'as pas de limites au ctrl+z ^^ )
            - Le travail sur une feuille de sprites est très long suivant le nombre et la qualité des détail, je recommande à tous de ne pas tous faire directement et de prendre des pauses de quelques heures voir 1-2 jours quand vous commencer à en avoir un peu marre ou que vous êtes fatigué de faire toujours la même chose
            - ( IMPORTANT ) NE JAMAIS ENREGISTRER VOTRE TRAVAIL EN JPG ( le format introduit du " bruit " lors de la compression ) ENREGISTRER PLUTÔT EN PNG, GIF OU XCF QUI SONT PLUS SÛR


Le Commencement :

La première étape avant de vous lancer dans l'animation de votre personnage c'est de le créer, le connaître et le maîtriser ( comme quand on fait de la bd ou de l'animation en général ). Cette étape est indispensable et elle ce fait sur feuille ( ou tablette ) de la même façon que vos chara design habituel ( car c'en est un ^^ ). C'est ici que vous allez créer votre personnage, savoir quels accessoires il porte, mais c'est aussi ici que vous allez faire différents essaie de style pour choisir quel style conviendra le mieux au graphismes du jeu ( on parle ici de cohérence graphique ).
Voici un petit exemple ( le personnage qui va nous suivre le long de ce tuto ) :

[/url]

Comme vous pouvez le voir il y a tous les détails important du personnage ( bracelets, ceinture, chaussures, habits,... ) ainsi que 2 essaies qui vont servir au choix du style graphique à employer lors de la création des sprites. Un est très simple et au design enfantin, l'autre aura plus de travail sur le détail.


Votre Premier Pixel Art :

Ici je vais exposer 3 techniques qui me sont souvent utiles dans la création de sprites et qui dépendent de la taille de celui-ci. Ces méthodes ne sont que des exemples, vous êtes libres de faire comme vous le sentez, et si vous avez d'autres techniques vous pouvez les faire partager ^^ !

Première technique : Un "line" ( sprites de taille moyenne ).

1-Définir votre palette de couleur :

[/url]

Au début elle n'est que provisoire mais je conseil de la modifier seulement à la toute fin du premier sprite. La palette de couleur des cheveux est en 2 parties assez distincte car les cheveux sont en 2 parties un peu comme Gurren de Tenkai Knights
Vous devez vous inscrire sur le forum pour visualiser le contenu de ce spoiler.

2-Commencez à former un visage sans détails

[/url]

Un visage sans détails est plus simple à modifier et prend moins de temps à ce créer, ça vous évite de perdre du temps si vous devez modifier ou effacer des trucs.

3-Dessiner les cheveux

[/url]

Le lasseau peut facilement être utilisé ici car la surface n'est pas trop petite, ça évite de perdre du temps à faire une forme compliqué pixel par pixel, ici vous dessiner la forme à main lever ( même paint à cet outil ^^ )

Exemple de l'efficacité du lasseau :

[/url]

3-Une fois finis et satisfait, placez les détails finaux du visage,

[/url]

Le visage est fini, c'est ici que tout va commencer pour le reste ^^ !

4-Définir la taille du corps ( anatomie ^^ ! )

[/url]

Comme en dessin traditionnel, le personnage à une taille relative à son âge et si vous voulez faire de lui un chibi ou pas, la mesure qu'on prend le plus souvent c'est le nombre de tête, ici c'est pareil, c'est le nombre de tête qui va vous aider à définir la taille et l'âge que vous voulez faire ressortir de votre personnage

[/url]

Remplir le rectangle formé par les têtes avec une couleur dont vous êtes sur de ne jamais vous servir dans votre pixel art, ça évite les confusion ^^ .

5-Faites le "line" du corps

[/url]

Cette base doit avoir le maximum de précision ( comme quand vous dessiner avant une colo ) même si vous pouvez le modifier plus tard ( mais pas trop tard non plus )

6-Remplir ce "line" avec une couleur

[/url]

Remplir le personnage avec une couleur, je conseil celle de la peau qui à mon avis est plus logique

7-Faire le "line" des vêtements et le remplir

[/url]

Au même titre que le line du corps, faire celui de vêtement et le remplir avec les couleurs correspondante

8-Finission du sprite sans les bras

[/url]

C'est à cette finissions que je vous conseil de rectifier la palette de couleur si besoin

[/url]

9-Copie de la base et placement des bras

[/url]

Gardez une copie de la base et ajouter les bras et les ombres qui vont avec afin de finir votre sprite.

[/url]

Garder une base vierge permet de pouvoir la modifier en toute simplicité sans avoir à effacer puis redessiner par dessus.

Voilà c'est la fin de la première technique ^^ !

Seconde Technique : Bloc à Bloc pratique pour les sprites fins et petits

Considérer chaque objet du corps comme un bloc et les dessiner un à un

[/url]

1-Dessinez le visage

[/url]

Bon ça ce voit pas trop que c'est un visage mais attendez un peu ^^ !

2-Faire les cheveux

[/url]

Le lasseau ne sera pas d'une grande aide ici vu la taille ( il est préférable de l'utiliser pour des moyennes et grandes zones ). Comme vous le voyez le visage est trop petit pour placer la bouche et les yeux, c'est à celui qui voit l’œuvre de ce les imaginer, si le sprite est bien fait il arrivera à reconnaître que c'est un visage

3-Définir la taille du premier bloc ( le buste )

[/url]

Le buste est le premier bloc du corps

4-Faire directement le buste avec les détails

[/url]

Le problème des petits/fins sprites c'est qu'on peut pas facilement tracer les contours avant de dessiner, c'est pour ça qu'il faut le dessiner d'un bloc, n'hésitez pas à réellement abuser de ctrl+z ici ^^ !

5-Définir la taille des jambes

[/url]

Vu qu'on a fait le buste autant s'en servir ^^ , la taille des jambes fait environ 2 fois celle du buste

6-Dessiner les jambes avec les détails directement pour les même raison que le dessin du buste

[/url]

7-Vous pouvez faire les petits détails et les rectifications qui vont avec

[/url]

8-Copier la base et ajoutez les bras

[/url]

Fin de la deuxième technique ^^ !

Troisième Technique : Abus du lasseau pour les grand sprites

1-Dessinez un visage comme vous en avez "l'habitude"

[/url]

Faites un visage avec une forme habituel, sans y mettre trop de détails

2-Faire les cheveux sans détails

[/url]

Vous pouvez les faire au lasseau, je vous le conseil même

3-Faire les détails du visage

[/url]

C'est à partir d'ici que les choses deviennent un peu plus difficiles

4-Définir la taille du corps

[/url]

5-Faites le lasseau du buste

[/url]

Essayer de le faire de la façon dont vous le dessineriez à la main, tant que la forme n'est pas la plus précise possible je vous déconseille de continuer car ça pourrait ce répercuter ensuite sur les autres éléments du sprite

6-Faites le lasseau des jambes

[/url]

Les faire séparément avec 2 couleur différentes pour mieux les dissocier.

7-Faites le lasseau des vêtements de la même façon que vous avez le buste et les jambes

[/url]

8-Redessinez les contours

[/url]

Cette étape est vraiment longue, vous allez devoir repasser les contours des vêtement et de la peau en rectifiant les petits détails indésirable dû à une sélection faite au lasseau.

Le "line" est apparu, mais il est un peu grand pour être fait pixel par pixel comme dans le 1er exemple.

9-Placement des ombres et lumières

[/url]

10-Copie de la base et ajout des bras

[/url]


Comme vous avez pu le remarquer, ces astuces ce rejoigne toutes en certain point il doit exister bien d'autres méthodes mais personnellement je travail toujours comme ça du coup, si quelqu'un à d'autre méthode ça pourrait être sympa de les faire partager ^^ !

Une fois le 1er sprite terminer on peut commencer à créer des animations ^^ !!!




IP archivée
  • Partenaires

  • bot
Re : [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages
« Réponse #1 le: 25 février 2016, 02:55:01 pm »

Sora

  • Membre Héroique
  • *
  • Points de coopération: +15/-0
  • Messages: 1.293
  • 私はソラです ^^ !!!
Re : [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages
« Réponse #1 le: 25 février 2016, 02:55:01 pm »
Excusez le double poste mais j'ai du coupé car j'ai dépassé la limite des 20000 caractères ^^'

Animer votre personnage

Les animations de mouvements simples

Votre personnage ne vas pas rester fixe éternellement, il faut lui créer des animations pour qu'il puisse ce déplacer, sauter, et faire tout autres action ^^ !

On va commencer avec le sprite du premier exemple

[/url]

Comme vous pouvez le voir il est de léger 3/4, les animations de courses de 3/4 existe, regarder Megaman X, mais elles sont plus dur à gérer, pour ce tuto j'ai opter pour une animation de profil comme on peut en trouver dans Metroid ou d'autre jeux qui sont plus simple pour débuter ^^
Il faut donc commencer par remettre l'axe du personnage de profil :

[/url]

Une fois de profil, créer le buste sans les jambes ni les bras :

[/url]

Conserver le car il vous sera vraiment utile plus tard.
Copier la base du buste que vous avez créer précédemment et faites la première image de l'animation.

[/url]

Celle-ci est l'une des plus importante, c'est elle qui décidera du déroulement des suivantes, il faut donc choisir un moment clé de l'animation course.
Un exemple : Lors de la course, avec le pliement et le dépliement des jambes, notre corps donne l'impression de descendre et de monter tous le long, l'un des moment clé pourrait être le moment où le corps à monter au point maximum, ou là où le corps est descendu le minimum, qui donnerais des points de repère pour la suite.
Ici j'ai choisi le point ou le corps est le plus haut.
Ne faites pas de détails pour les jambes, choisissez juste un code couleur pour les différencier car c'est bien plus rapide de le faire sans détails et de le modifier si besoin est.

Une fois cette image terminée, copier là et changer ça couleur afin d'avoir une couleur que vous n'utilisez jamais dans votre pixel art, vous pouvez ainsi créer l'image suivante en prenant appuis sur la première :

[/url]

C'est un peu comme si vous faisiez une animation sur une table rétro-éclairée, vous poser une nouvelle feuille blanche et vous avez la vision de l'ancienne image à fin de créer la suivante, vous prenez appui sur elle pour créer l'autre et avoir une vision globale des deux images, voir si elle s'enchaine bien ou non.( C'est aussi un peu le même principe qu'un calque qu'on mettrait en semi-transparent en fond pour redessiner par dessus ).

Reprenez la base du buste, et créer le contour des jambes

[/url]

Remplir avec le code couleur choisi avant.

Les 2 premières images sont les plus simples car elle ne peuvent pas réellement avoir d'incohérence de vitesse entre elles car c'est justement les 2 premières qui fixent la vitesse de l'animation.
Suite à ça il faut arriver à créer les images suivantes en limitant au maximum les incohérences de vitesses.

[/url]

Vous ne devez pas hésiter à recommencer encore et encore afin de trouver la meilleur image suivante possible, pour les dessiner ça restera le même principe tout le temps ^^ !

[/url]

Pour le moment on obtient les images suivantes :

[/url]

Aperçu du début d'animation :

[/url] [/url]

Voilà ce que donne notre animation pour le moment.
Pour l'animation de course de profil il existe une petite astuce toute simple, l'avais vous trouver ? Un indice : Symétrie du corps ^^ !

Je vais vous montrer cette astuce ( qui n'est pas du tout obligatoire, vous pouvez continuer le même principe qu'au dessus )

Rajouter les détails sur chaque images du début d'animation que nous venons de créer, nous obtenons ceci :

[/url]

On obtient une animation comme ça :

[/url] [/url]

Si vous utilisez l'astuce que je vais vous dire, prenez une image de l'animation et faites les contours de la jambe arrière, puis remplissez-le. ( ça fonctionne même si vous avez commencer avec la jambe arrière )

[/url]

Ajoutez les ombres et autres détails :

[/url]

Il faut le faire avec toutes les images que nous avons déjà créer :

[/url]

On obtient donc ceci :

[/url]

Voici l'animation que ça donne pour le moment :

[/url] [/url]

Ici l'animation est fonctionnel mais il ne manquerai pas quelque chose ? D'ici je vois pas :P !
Mais si il manque les bras !!!

Comme pour une image fixe, je vous conseille de ne pas faire les bras et de conserver l'animation sans bras, ça permet de facilement modifier l'animation et de passer de ça :

[/url]

à ça :

[/url]

On utilise le même principe que pour les jambes, on créer une image par une image et faisant bien attention ici de ne pas faire d'incohérence avec le reste du corps, n'oubliez pas que la symétrie s'applique aussi sur les bras, avec un petit effet de perspective qui se rajoute pour donner plus de dynamisme au mouvement

Voici le rendu final avec les bras :

[/url]

Animé ça donne :

[/url] [/url]

Voilà, nous avons réussi à créer une animation simple ^^ !

Pour ceux qui ne font pas une animation de profil pour la course vous ne pourrez pas utilisez cette astuce, mais conserver le buste fonctionne, vous n'aurez qu'à redessiner les jambes. Pour ceux qui ferais une animation proche de celle de Megaman X pour la course, vu qu'il change constamment d'axe vous devrait à chaque fois tout redessiner mais ça reste la même technique.

2ème style d'animation que l'on peut rencontrer : les animation d'attaques, elle font aussi partit de l'ordre des animations simple pour la plus part.

On va se servir du 2ème exemple pour montrer

C'est exactement le même principe en fait, pas de nouveauté, vous créer la 1er image puis vous faites les autres en fonction :

[/url]

Ce qui donne en animation :

[/url] [/url]

A noté que vous pouvez jouer sur une légère rotation et inclinaison progressive du corps pour donner encore plus de dynamisme à l'animation.

Garder l'animation sans armes permet de redessiner simplement l'arme par dessus, un peu comme ça :

[/url]
[/url]

Par contre c'est pas avec cette animation que vous allez faire une clé ou un marteau ^^' ! Il faudra donc prévoir des catégories pour les animation ( exemple : armes lourde, armes légère, armes courtes, armes longues,... ).

Voilà, pour toutes les animations simples ça reste les même principes après ^^ !

Mais vous vous doutez bien que si je parles d'animation " simple " c'est qu'il existe des complexes ^^ ! Alors on enchaine avec celles-ci !

Les animations complexes

Bon le termes fais un peu bateau, j'ai juste voulu séparé des animations simple qui ne consiste qu'à redessiner par dessus, de certaine animations qui prendrait en compte un jeu de perspective ou de réelle rotation qui en plus de devoir redessiner par dessus nécessite aussi de maîtriser le mouvement.

Et en parlant de rotation, c'est justement de ça qu'on va parlait ici !

Au moins une fois dans votre vie vous avez du croisé des animations qui en plus d'être en mouvement prenaient en compte une rotation. Je suis sûr que vous en avez vu au moins une fois ^^ !

Exemple :

[/url]

Ces 2 coups de Ryu ont un effet de rotation en plus du mouvement !
Comment gérer une rotation. Voici une petite astuce qui vous sera peut-être utile :

Commencer par tracer une sphère qui contient votre personnage, le diamètre est d'environ la taille de votre personnage en prenant en compte les extrémités

[/url]

Fixer ensuite l'axe de rotation que doit avoir votre personnage, on va ici faire une rotation sur la verticale

[/url]

Ensuite placé des ellipses qui seront les repères de mouvement des parties importantes.
J'ai pris ici :
          - La main avec le bras tendu
          - La main avec le bras plié
          - Les pieds
          - Les différents piques de cheveux
Essayer au maximum de suivre ces ellipses avec les différents éléments pour garder une certaine cohérence lors de la rotation.

L'inclinaison et la largeur des ellipse varie en fonction de la perspective et de l'axe de rotation.

[/url]

Vous pouvez commencer à le faire tourner en le redessinant :

[/url]

[/url]

Au final on obtient un truc un peu comme ça :

[/url]

Une fois animé ça donne ça :

[/url] [/url]


Voilou ^^ ! Ceci clos le petit tuto sur l'animation d'un personnage. Avec ces astuces vous devriez pouvoir créer vos propres personnages en pixel Art, et si certain ont d'autres techniques n'hésitez pas à les poster ici afin d'aider ceux qui sont intéresser.

Comme je l'ai dit plus haut, si ça plait, qu'il est utile ou qu'il est jugé pertinent je pourrais en faire la suite plus tard ^^ !

PS : Excuser moi pour les fautes d'orthographes et surtout pour le lasseau au lieu de lasso, je m'en suis rendu compte trop tard ^^'
« Modifié: 25 février 2016, 02:57:50 pm par Sora »
IP archivée

ADMIN

  • Administrator
  • Membre Héroique
  • *****
  • Points de coopération: +15/-1
  • Messages: 1.161
Re : [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages
« Réponse #2 le: 25 février 2016, 07:19:59 pm »
Plein de détails, super complet, je vote pour qu'il soit mis sur le site ;)

FlyingCoyote

  • Membre Complet
  • ****
  • Points de coopération: +17/-0
  • Messages: 127
Re : [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages
« Réponse #3 le: 25 février 2016, 09:11:47 pm »
Ouaaah super taf, merci à toi !
J'ai souvent galéré à trouver des tuto sur la création de sprite, celui ci est un des plus complets que j'ai pu lire.

Sora

  • Membre Héroique
  • *
  • Points de coopération: +15/-0
  • Messages: 1.293
  • 私はソラです ^^ !!!
Re : [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages
« Réponse #4 le: 26 février 2016, 01:11:54 pm »
Merci à vous, ça fait vraiment plaisir de voir qu'il plait ^^ !
IP archivée

JaguarKamo

  • Membre Complet
  • ****
  • Points de coopération: +11/-0
  • Messages: 262
  • Beaucoup de cheveux.
    • WWW
Re : [HS-Le Pixel Art, Petit travail d'animation] Partie 1 - Les Personnages
« Réponse #5 le: 27 février 2016, 04:45:26 am »
Gg pour le tuto! :3
Faut vraiment que j'essaie le pixel-art ça me sera utile quand je bosserais dessus, merci! :D
IP archivée
[spoiler=Projets terminé]
 

Manga amateur SMF 2.0.8 | SMF © 2011, Simple Machines