Nom du tutoriel : Pixart Charset

Auteur : MirainoHikari

Notre objectif : Créer un personnage 100% personnalisé à partir du néant. Ces personnages seront plus ou moins jolie selon vos talents en pixel art.

Outils pour le tutoriel : Personnellement, j'utilise PaintShop Pro, mais libre à vous d'utiliser l'outil qui vous plaira. Cependant, votre outil doit comporter les éléments suivant : Support d'enregistrement PNG, support de la transparence par ALPHA-Channel, la possibilité de choisir entre 16-million et 256 couleurs.


Préambule :

Bon, me voilà lancé dans un tutoriel de charset. Où s'en va la vie? Je vous le demande.

Bon. Comme il s'agit d'un personnage 100% personnalisé, nous n'utiliseront pas le RTP comme base. Toutefois si vous êtes moins à l'aise, le site de famitsu permet de donner des base préexistante qui peuvent servirent vos besoins en modifiant légèrement. Pour la recolorisation, je vous suggère fortement d'aller jetez un coup d'oeil aux cours d'Elezia.

Ceci étant dit, commençons le tutoriel.

Tutoriel :

Tout d'abord, je vous suggère fortement de vous basé sur un modèle. Vous pouvez soit le dessiner sur un bout de papier ou utiliser une image existante. Pour les besoin de la cause, nous prendrons des images existantes. Nous créerons donc deux personnages ensemble: un humanoïde et un extra-terrestre.

Voici donc les deux images de base :



La première est une "sorcière" en bêta test que j'avais fait il y a quelque temps (et qui m'avait servit d'avatar pendant un temps), la seconde est une image quelconque trouver sur le web représentant notre extra-terrestre.

Avant de commencer, il est important de savoir comment RMVX considère les fichiers de personnages. Pour les personnages uniques (avec le $ devant le fichier), VX prends le fichier, le divise en 3 colonnes et 4 lignes. Les colonnes sont, de gauche à droite, le pas de droite, centré, le pas de gauche. Les quatre lignes, de haut en bas, sont bas, gauche, droite, haut. Dans un set, il y a 4 personnages de large par 2 de haut pour un total de 8 personnages.

Par défaut, le style VX fait des personnages dont les sprites ont exactement 32x32 pixels, mais cette proportion n'est pas obligatoire comme nous le verrons pour l'extra-terrestre. Cependant, pensez toujours à regroupez des personnages de dimension similaires dans un set. Il est d'ailleur préférable de faire un set plutôt que des personnages individuels pour une économie d'espace. Cependant, c'est une convention facultative.

Commençons donc par le plus simple. Nous commencerons par la sorcière. Si vous désirer une base rapide pour des humains, utilisez l'outil de famitsu et modifier ce fichier. Je supposerai que vous avez utilisez la base de famitsu féminine comme base. Personnellement, lorsque je travaille en pixart, j'aime voir ce que je fais. Donc, dans PaintShop, je zoom pour être le plus plein écran possible tout en voyant l'intégralité de l'image (ne pas avoir à scroller, sauf pour le travail de précision. Ensuite, dans le menu Affichage, j'affiche la grille et je lui donne la dimension du personnage, dans ce cas-ci, 32x32. Autre détail important, toujours travailler en 16 million de couleurs. Dans PaintShop, sous le menu Couleur > Augmenter > 16 million.

On édit le personnage, on lui mets les détail de cheveux et tatous, on recolore le maillot et voilà, un personnage vite fait. Non, pas tout à fait... Il faut tenir compte du mouvement. Encore une fois, si vous utilisez les base de famitsu, je vous suggère de prendre un style de coiffure qui vous demandera un travail minime de retouches. Toutefois, vous pouvez faire vos propre cheveux et accessoires. Pensez cependant aux mouvement. les cheveux ne reste pas en place en mouvement. Le pas à droite envoie les cheveux vers la droite, le pas à gauche les envoie vers la gauche. Le fait de faire un pas fait monter légèrement les cheveux, etc. Il faut beaucoup de pratique pour faire des cheveux convenables.

Personnellement, je préfère faire des personnages antisymétrique pour que les détails d'un côté et de l'autre soit plus facile à distinguer, mais c'est un choix personnel. Pour simplifier le travail, vous pouvez avoir un personnage symétrique et simplement faire copier, coller, miroir. Faites simplement attentions que les pas soit dans le même ordre. Toutefois, l'asymétrie permet des effets visuel intéressant : une queue de cheval sur le côté droit n'apparait pas sur le côté gauche, donne un air enfantin et fait changement des deux couettes. Une modification minueure qui lance des possibilité intéressante. Cependant, je ne le répèterai jamais assez, soyez cohérents dans vos sprites.

Une fois que le personnage est terminé, vous avez le choix entre garder le fichier en 16 million de couleur (ce qui génèrera un fichier plus volumineux) ou descendre à 16 ou 256 couleurs. Pour savoir lequel utilisez, dans le menu Couleur > Compter le nombre de couleur. Si le compte est inférieur à 16, prenez 16 couleurs, s'il est entre 16 et 256, prenez 256, s'il est supérieur à 256 (ce qui serait étonnant, mais sait-on jamais) utilisez 16 million. Si vous descendez le nombre de couleur, utilisez octree, ce qui conservera vos couleurs original si vous êtes un peu juste sur le nombre. Dans le cas où vous êtes à 16 ou 256, vous pouvez choisir une couleur transparente. Dans le menu Couleur > Définir une couleur de transparence. Choisissez votre fond et vérifier que vous n'utilisez pas cette couleur ailleurs, ce qui causerait une transparence indésirable. Dans ce cas, retournez à 16 million, modifier la couleur problématique et refaites le processus. Dans le cas du 16 milion, on doit définir l'alpha pour la transparence. Avec l'outil baguette, sélectionner tout ce qui doit être invisible puis dans le menu Masque > Nouveau > Masquer la sélection. Puis Masque > Enregistrer dans l'Alpha-Channel. Sauvegarder votre image. Voilà. N'oubliez pas, pour les personnages uniques, ils faut mettre $ devant le nom. Voici mon résultat pour la sorcière.



Bon, éditer des sprites, c'est facile me direz-vous. Je suis d'accord, mais pour plusieurs, c'est un passage obligatoire car le pixel art n'est pas toujours évident. Toutefois, pour la création de personnage plus personnels, les bases sont souvent limitatives. Donc voici un principe facile pour créer des personnage. Cette fois nous prendrons l'extraterrestre. Cette fois, promis, il y aura plus de screenshot.

L'idéal pour commencer, c'est de choisir la dimension que nous voulons. Pour cet extra-terrestre, je veux qu'il soit un peu plus grand que les personnage VX, mais pas trop grand. Sachant que les personnages VX sont 32x32, je crois que 32x40 serait une bonne grandeur. Prenez en considération que vos dimension doivent être un multiple de 4 pour être afficher sans risque par VX. Ce n'est pas obligatoire, mais suggéré fortement par Enterbrain, alors...

Donc, si on se rappelle la règle, mon fichier doit avoir 4x ma hauteur et 3x ma largeur... Donc mon fichier doit avoir 96x160. Créons alors ce nouveau fichier en 16 million de couleur et ajustons notre grille. Cette fois, cependant, comme il faudra aligner notre personnage, la grille devra faire la moitié de la largeur et le quart de la hauteur, donc affichez une grille de 16x10. Voici à quoi devrait ressembler votre canevas.



Fort probablement que votre couleur de fond ne correspond pas. C'est normal. Il est définit selon la dernière couleur d'arrière-plan utilisée. Toutefois, comme nous travaillons en 16 million de couleurs ça n'a pas d'importance, c'était simplement pour faire ressortir la grille. Nous allons travailler sur un canevas transparent ou sur une couche différente. Personnellement, je préfère l'idée de la couche, car l'affichage de la transparence est un peu étourdissante à mon goût sous PaintShop. C'est à votre goût. Dans un cas comme dans l'autre, afin que PaintShop active le mode transparent, vous devrez allez das menu Masques > Afficher tout. Pour afficher la transparence, sélectionner tout et appuyer sur la touche supprime. Sinon, faites simplement ajouter une nouvelle couche (layer) à votre canvas. Celui-ci sera transparent et vous permettra de travailler sur un fond de couleur moins énervant. N'oubliez pas d'activer le nouveau layer comme layer actif.

Avant de continuer, assurez-vous que l'option "Snap to Grid" est désactivé.

Première étape, dessiner la moitié de notre personnage. Pourquoi juste la moitié, bah, commencer par un personnage symétrique, c'est plus facile que de le dessiner directement asymétrique. Commençons par de face. Sur l'image, vous voyez différentes étapes, mais en fait, cette image se trouve à être dans la 2e colonne de la première ligne. Utilisez les guide pour vous aider. Si vous voulez être plus précis, modifier vos guide en conséquence. Donc regardons notre extra-terrestre de face...



À partir du personnage "de face", nous pouvons facilement faire celui de dos (notre personnage n'ayant pas de cheveux, c'est encore plus facile...) Amusez vous à recolorer en jouant avec les ombre. Gothor a fait un bon tutoriel de colorisation, je vous laisse donc faire mieux que moi. (Je vais ce personnage très rapidement, donc soyez indulgent. (Le dos étant facile à réaliser, vous ne le verrez pas ici en screenshot, mais vous le verrez dans les étapes suivantes.)

Bon, maintenant, le côté. Heureusement, nous avons fait un personnage symétrique, donc du coup, nous n'auront a faire cette étape qu'une seule fois... Vous devez penser à ce que ressemble votre personnage de profil. Nous reprenons notre image de face, en fait, nous reprenons que la moitié et c'est à partir de ce tronquage que nous travaillons. Remarquez que la tête est localisée au même endroit que sur les images précédente, mais que je déplace l'oeil et le nez de manière à ce que l'oeil soit au centre du mon repère central. On déplace ensuite le nez pour qu'il soit à l'extrémité du visage. Par la suite, on copie le coté opposé du vêtement qu'on ajuste afin de donner l'illusion du côté. On ajuste les détails et voilà. On copie de l'autre côté on fait la copie miroir et voilà, nous avons nos quatre position centrale.



Il faut maintenant le faire marcher... Là, c'est plus du tataouinage que d'autre chose. Vous devez donnez un mouvement d'avant en arrière, en recolorant ce qui est derrière en plus foncé pour l'effet d'ombre et de distance et en donnant l'illusion du déplacement en mettant de légère variation de pixels verticale. Je suggère fortement d'ajouter un autre layer plus foncé pour créer cet effet. Le nouveau layer devra être entre le fond et le visible. Je vous laisse faire vos expériences, car la technique change de l'un à l'autre mais voyez le résultat attendu globalement.



Cette dernière image a déjà la transparence. Je n'ai pas besoin de vous le ré-expliquer, c'est le même principe que la sorcière. Le résultat a été fait en 5 min. Si vous prenez un peu plus votre temps, vous devriez arriver à un résultat bien supérieur. Ma force est dans le 3d et l'édition de pixart, la création, ce n'est pas mon rayons. Cependant, vous avez ici les grand principes de base. Pour créer vos faceset correspondant, Je recomande fortement de prendre l'image vous ayant servie d'originale et de la redimensionner pour qu'elle soit dans le standard 96x96 ou en tant qu'image telle quelle.

Merci pour le tuto! Le truc de la grille c'est génial. Jme demande pourquoi j'y ai pas pensé :-\

merci beaucoup pour ce tuto, vraiment.
il va beaucoup me servir.