| Avant de commencer à raler, sachez que certaines images de ce tutoriel peuvent être agrandies en faisant un clic gauche sur celles-ci, pour dézoommer, veuillez faire [CTRL]+clic gauche. |  |
Évitez de vous ruiner les yeux !!
Ha oui, si vous ne voyez pas les images sous Internet Explorer, c'est que ce "navigateur" est pourri, prenez firefox pour plus de confort !
* Il faut avoir de solides bases en dessin, anatomie, perspective, savoir maîtriser les couleurs (petit rappel pour les un, découverte (rapide) pour les autres.), vous devrez aussi maîtriser les textures, naturellement tout autres expériences dans le domaine du graphisme pourrait vous être utile.
* Il vous faut savoir aussi que le PixelArt nécessite un investissement de temps non négligeable. Si vous n'y prenez pas plaisir, arrêtez-vous, sortez prendre l'air, en gros aérez-vous la tête. Voici donc mon conseil, Si au cours de l'une de vos réalisation vous vous appercevez que celle-ci ne vous convient pas, retravaillez la, mais n'hésitez pas àfaire une (longue) pause si vous n'arrivez à rien, il vous suffira de reprendre votre travail, quand les conditions vous seront favorables (quand vous serez au calme par exemple).
* Si vous ne possédez malheureusement aucune des bases requises, je vous conseille d'y remédier, le plus simple étant de vous mettre au dessin classique, une feuille (ou même un bloc àdessin), des crayons de bois (Hb, 2B.. enfin toute la gamme si vous voulez vraiment vous y mettre, sinon un simple Hb suffit), des doigts, un modèle àreproduire et si vous avez la possibilité de vous acheter une "méthode" (un ouvrage ayant la prétention de vous apprendre à dessiner) ou même d'en emprunter une à la bibliothèque du coin, n'hésitez pas. Quand vous vous serez familliarisé avec le dessin classique, il vous "suffira" d'éduquer à nouveau votre oeil en étudiant les centaines de millier de sprites et de tiles qui composent les univers graphiques des jeux "2D", et bien sur de regarder pleinement ce tutoriel par la suite.
* Plusieurs choix s'offrent à vous aussi bien parmi les graticiels (freeware) que les payants (logiciel commerciaux). Si vous êtes sous une plateforme Windows par défaut, vous aurez sur votre ordinateur Paint (©Microsoft), ce logiciel est devenu bien obselète, face à d'autres logiciels tel que GraphicGale (Graticiel, ©Humanbalance), ou même Pro Motion (Payant, ©Cosmigo) ou même encore le sacro-saint Photoshop (préférez-lui ImageReady, pluis adapté au pixelart quand même) (Payants, ©Adobe), Gimp (Graticiel, ©) ou PaintShopPro (Payant, ©)...
* Alors, que choisir ? et bien parmi cette plétore de logiciels, je n'en retiendrai que deux, ainsi Graphicgale (disposnible à l'adresse suivante : humanbalance.net ) et Promotion ( cosmigo.com ) sont mes favoris. Ces deux logiciels ont toutes les fonctions qui vous seront réelement utiles, sans tomber dans les "usines à gaz" que sont photoshop and Co. De plus, ces deux logiciels sont très peu gourmand en resource système, ils fonctionnent donc parfaitement même sur de "vieux" ordinateurs, j'ai fait l'essai avec Graphicgale sur un Pentium 100Mhz équipé de 32 Mo de ram, et malgrè de très haute résolution (1024*768), je n'ai constaté aucun ralentissement.
* Bien, que votre choix se soit porté sur GraphicsGale© ou ProMotion©, vous allez pouvoir créer votre tout premier sprite ! Néanmoins, il y a quelques "astuces" à connaître et certaines règles à respecter. Tout d'abord il vous faut impérativement savoir sur quelle plateforme est destinée votre création, quelles sont les résolutions possibles pour vos sprites, et bien entendu le nombre de couleurs maximum. Et oui, tous les supports ne sont pas capable d'afficher 32768 couleurs, vous serez parfois amené a bosser en 1 bit (soit 2 couleurs), j'en vois déjà deux qui pleurent dans le fond, mais souvenez vous de vos jeux de portable, des vieilles borne d'arcades ou même du célébrissime pong !
* Une annecdote marrante que m'a raconté un pote, dans sa boîte ils avaient prit un stagiaire "graphiste" de son état, celui-ci devait travailler sur le Gameboy de Nintendo. On lui donne un impératif, pas plus de 4 couleurs (qui sont en fait des niveaux de gris), et celui-ci, tout fier, présente ses créations en tenez vous bien, 256 couleurs ! (atteration générale du groupe chargé du dévellopement du jeu, et hilarité nerveuse au sein de l'équipe), il est inutile de vous dire que ce dernier s'est très vite retrouvé à la place du stagiaire de "base", à savoir la photocopieuse. Bien évidement les graphismes réalisés étaient innutilisables, que cette histoire vous serve de leçon.
* Oui, Bon ne sachant pas sur quel support est déstiné votre sprite, je pendrai un exemple, je voudrais donc un sprite de 32*32 px avec un maximum de 16 couleurs (mais 15 "visibles", puisque l'une de ces couleurs me servira a définir la transparence). Et bien sur ne sachant pas ce que vous devez réaliser, j'vais me faire...une cafetière :D.
* Donc la marche à suivre, création d'un nouveau fichier, résolution 32 px (des pixels, vous vous en souvenez) de haut et de large, sur une "pronfondeur" de 4 bits (soit 16 couleurs), en premier lieu je vais définir la première couleur de ma palette (c'est celle qui définie la transparence), alors vous avez le choix soit vous prenez une couleur bien flash, genre un bon violet (R:255, G:000, B:255), ou vert qui tape (R:000, G:255, B: 255). Pour plus de commodité (l'œil est un organe formidable, mais fragile, inutile de le malmener si vous avez des problèmes de vue, deplus si vous bosser sans cesse avec des fonds violet ou vert, (enfin une couleur qui flashe..), la fatigue occulaire viendra bien vite vous gâcher l'existence (flou, voilage partiel, ou "bavures" de la couleur de prédominance); la solution est toute simple prennez un gris "neutre" (R:128, G:128, B: 128), ainsi vous pourrez éviter ces désagréments.
* Ensuite, je défini la couleur de mon trait (encore appelé "lineart" par nos collègues anglophone), un simple noir suffit (R:000, G:000, B:000).
* Je peux (enfin) faire mon "lineart", pour ce qui est de la suite, le choix de la couleur, des zones d'ombres et de lumière, l'éducation que vous aurez (avez) fait de votre œil en étudiant le dessin vous servira, nous allons donc faire une colorisation "primaire", ensuite nous étayons notre sprite avec les zones éclairées et sombres. Si on schématise un objet d'une seule couleur, (ou teinte, et celà sans ce soucier de sa "texture") il se voit attribué deux couleurs supplémentaires, une pour la(les) zone(s) éclairée(s) et l'autre pour la()les zone(s) sombre(s) ce qui nous donnerait ceci :
* Oui, la lumière me vient de la gauche, bon vous vous doutez bien que celà ne va pas rester comme ça, j'ai encore 11 couleurs à ma disposition, ça serait vraiment dommage de laisser mon sprite tel quel !
* Bon, un peu d'ajout de niveau de gris plus tard, j'arrive à treize couleur utilisée (moins une, soit douze en fait, ma première couleur de palette ne compte pas..), alors comment j'ai fait ? j'ai défini au préalable un dégradé allant d'un gris clair (RGB : 222) à un gris foncé (RGB: 095), j'ai ensuite avisé en allant progressivement des teintes les plus claires (les zones éclairées donc) aux plus sombres, comme vous pourrez le constater en aggrandissant mon sprite j'ai "enlevé" mon trait et maintenant certaines de mes teintes délimitent mon tracé, celà s'apprend avec le temps, j'aurais très bien pu conserver mon trait (celà aurait donné un aspect un peu "toonesque", ça peut être sympa pour donner un style, de même, un contour contrasté aide beaucoup pour la "lisibilité").
* On peux se permettre toute les fantaisies possible en bossant en niveau de gris! Pour la colorisation, suivant le logiciel que vous utilisez, un simple dégradé des tons correspondants suffirat !
| (1) Un sprite de 8*8 | | (2) Un sprite de 16*32 | | |||
 |
 |
 |
 |
 |
* En voilà un !
* Prenez le cercle noir, mettez le en bas de l'image, sur le fond blanc, il est visible. Faîtes de même avec le cercle gris, il est toujours visible, mais quand vient l'heure de mettre le cercle banc...problème, celui-ci disparaît, la solution consiste donc à lui mettre un contour.
* Primo, je ne suis pas gros, et ensuite il vous suffira de faire évoluer votre sprite sur un fond uni, vous pourrez agrémenter votre fond (de jeu,hein..) tout de même, il vous suffira de vous arranger pour que le sprite et ce même fond ne puisse pas se rencontrer..
* Mon tuto, il est pas long et il est loin d'être fini, alors voici quelques "gestes techniques" à retenir, quand vous tracez un lineart, il y a de bon tracés et de mauvais tracés (un peu comme les chasseurs, ou les père-noël ;)), une image étant bien plus parlante que des mots...
* Hum, il y a tant à dire.. Un p'tit dogme : "un carré est un cercle, un cercle est un carré !", ayé, vous pensez que j'ai claqué une case, genre : "bon, et bien, il est bon pour la casse le Lestat, il a complétement shunté ses premiers mois d'existance avec le p'tit jouet là, où faut mettre un carré dans un trou carré, et un disque dans un trou cylindrique", bah ouais, mais un pixel est un point lumineux qui est shématisé à l'écran par un carré, et pourtant si je fait une image de 1 pixel², et bien mon point à l'écran peut être aussi bien un cercle qu'un carré, d'où le dogme. Bon blague pourrie mise à part, voici un petit exemple de ce qui se fait pour créer des cercles de différents diamètres..
* Bon passons à la couleur, normalement vous devez, avec vos dessins, vous être interressé à la couleur. Si ce n'est pas le cas, je vous invite à ratrapper cette erreur ! vous devriez connaître la synthèse additive de la couleur et bien sur la synthèse soustractive, savoir si telle ou telle couleur appartient aux tons chauds (ou froid), savoir quelle sont les couleurs qui se marrient le mieux. Pour faire court la synthèse additive des couleurs c'est le RVB ou RGB (rouge, vert, bleu ou encore Red,Green,Blue) c'est ce qu'utilise votre écran cathodique pour reproduire les longueurs d'onde des couleurs. Quand c'est trois couleurs sont à leurs valeurs maximales (à savoir 255 ou FF en base de 16) vous obtenez du blanc, à contrario quand vous mettez ces valeurs à zéro, vous obtiendrez du noir. Bon vous vous doutez que dans la réalité ça ne fonctionne pas comme "ça", dans la réalité c'est la synthèse soustractive de la couleur, par exemple quand vous imprimez un document, votre format de sortie n'est plus l'écran, c'est une simple feuille, ainsi vous aurez besoin de 4 couleurs pour reproduire ce que vous voyez à l'écran, le Cyan, le Magenta, le Jaune et le Noir. il est impossible de reproduire avec exactitude un rouge vif (R:255, G:000 ,B:000) sur un imprimé, pour faire court et en résumé, on a un peu plus de choix question couleurs en RVB qu'en CMJN.
(Plus d'informations concernant la couleur ici.)
Le dithering est une technique que l'on a vu apparaître (du moins pour ma part, si d'autres on des exemples plus anciens, ça m'interresse aussi..) dans les jeux de Nes, par exemple Gremlins2™, les graphistes ne disposant que de cinq couleurs étaient vachement ennuyés pour faire toutes les variations de lumière qu'il y avait dans le poil de Gizmo©, mais pas découragés pour deux sous, ceux-ci ont "simplement" fait varier les pixels d'une couleur sur un fond d'une autre... Bon prenons un exemple basé sur le monde de l'édition, comment fait l'imprimante pour vous sortir un dégradé quelconque sur une feuille ?, vous savez pas ?, je vous explique, des goutes d'encre tombent à une distance équidistante les une des autres, admettons que ça soit du noir, et l'on veuille un dégradé qui débute par un noir et qui fini par du blanc, donc je vais utiliser que l'encre noire, les goutes qui composent mon noir du début devront être "chargées" (comprendre qu'il faudra une bonne grosse goutte d'encre) afin que celles-ci puisse couvrir toute la surface du début de ma feuille, en tombant la goutte s'étale et j'obtiens un bon gros applat noir ! et pour la "ligne" suivante, les gouttes sont toujours disposées de manière équidistante, mais elle sont moins "chargées", de ce fait elle ne couvriront pas toute la surface de la feuille, donc le blanc sera beaucoup plus visible, l'oeil aura l'impression de voir du gris ! Idem pour les gouttes qui suivent, sont encore moins "chargées", moins d'encre, moins de surface recouverte par elle, le gris devient plus clair. Plus d'encre ? reste la couleur du papier qui est le blanc (bon évidement si vous avez été assez bête pour utiliser une feuille de couleur...ça marche moins bien..)
| Du dégradé avec
2 couleurs !
* Tenez, voici deux jeux qui utilisent le dithering :
 |
|
 |
Vous l'aurez sans doute remarqué, faire un lineart dans des faibles résolutions ça fait toujours un effet un peu "escalier" cet effet peut être dérangeant, c'est pourquoi on a inventé, l'anti-escalier, heu...non c'est pas ça :] Le principe est on ne peut plus simple, il vous suffit de trouver des tons entre la couleur de votre trait et celui de votre fond (non, je ne parle pas de la première couleur de votre palette), bon un exemple est toujours plus parlant, mais rassurez vous, il y a des méthodes..et de temps à autres des calculs (fuiyez pas !!)
Bon même avec ces exemples, vous ne saurez pas faire d'anti-aliasing en "observant" simplement ces traits/formes, il vous sera utile de savoir quelques "trucs",
Les arrêtes de ce dernier ne sont travaillés que sur le haut et sur le bas de celui-ci, j'ai pris deux gris l'un à 90, (RVB, mais je pense que vous aurez compris qu'en ayant les trois valeurs identique vous obtenez un niveau de gris.) et l'autre à 171.
je commence par faire mon tracé en blanc sur fond noir (ici un trait ayant un angle de 30°), puis je le refait à l'identique un peu plus bas, je ferme mon tracé.
le gris le plus sombre (90) doit être le premier point (sur l'arrête du haut), puis le gris clair (171) est mis à sa droite, je réitère l'opération (en montant d'un 1y pour 2x) jusque la fin du tracé.
Pour le bas, il faut faire la même opération en inversant les deux couleurs (d'abord le gris clair, puis le sombre.), et voilà, je n'ai plus qu'a remplir mon tracé en blanc et j'ai un joli losange (oui, c'est plus un parallèpipéde.)
Nous allons voir ici différentes technique d'AA (comprendre anti-aliasing), nous commmençons par le cas |2'|.
Après avoir fait mon trait (30°), j'utilise un gris clair (171).
Cas |2'|, pour ce type de trait, je place un point (171) à chaque"cassures".
Cas |2"|, je coupe perpendiculairement mon trait à gauche et je monte d'un pixel, je me décale de 1 x et je recommence jusqu'à la fin du tracé.
Cas |2"'|, voici un "mix" des deux méthodes précédentes, la seule différence se situe dans la couleur du point qui est plus sombre (90,au lieu du 171 de la méthode |2'|).
| Cas |3'| : Hum, observez le détail, ci dessous, je commence par mettre ma couleur la plus claire (en bleu ici), puis je "dégrade" (en jaune), et enfin je redégrade (rouge) dans la teinte la plus sombre. | Cas |3"| : Regardez encore une fois le détail des opérations :
Bleu : gris 192 |
 |
 |
* Derniers conseils pour la route :
* When you tiling, when you tilling !
* Oui, merci :D, heu, non, revenons à nos moutons, justement en parlant de mouton, on va s'en faire un (dessiner hein, pas autre chose), bon maintenant il lui faut une heu, étable ? bergerie, bon comme vous le savez, si vous voulez faire du "pixelart" dans le but de faire des jeux vidéo vous remarquez souvent que vous avez besoin de l'espace en rom, cet espace est bien précieux, et comme tous ce qui est précieux, faut l'économiser (et oui, maintenant on va chercher son pain à pied :D). Donc nous allons tiler ! (keskidi ?) alors un tile c'est quoi ? Bah c'est comme un sprite, sauf que ça étanche pas ta soif. *Silence gené*, hurm, bon j'arrête de déconner, un tile est un élément de base d'une image, une petite brique si vous voulez. Le but avoué des tiles et de nous faire gagner de la place en rom, car si le support vous le permet avec le même tile, vous pouvez : le retourner horizontalement et/ou verticalement. Ce genre de fonction est bien utile pour encore gagner un peu de place, car en agençant intelligeamment vos décors en tiles et en repérant les tiles qui peuvent être symèrique, on gagne encore en place. Bon, tout ce que vous avez appris ci-dessus peut vous servir pour faire des tiles, essayez encore une fois de vous entrainer, prennez une photographie d'un paysage quelconque, reproduisez le en pixelart et découpez le en carré (8*8,16*16,32*32, en tiles quoi). Ensuite repérez les tiles qui sont unique, puis ceux qui ont une symétrie.
/!\ Il faut savoir que même la typographie des jeux que vous ferez sont des tiles, entraînez vous !
* Voici votre mouton (je sais il a un bouc..), faîtes lui la bergerie qui va avec. ha j'oubliais pour les dimensions du décors, vous travaillerez en 240 * 160, la résolution du GameboyAdvance™©.
|
* Hum, voici déjà 10 tiles pour le sol et le ciel, faîte le reste :)
* Bon bah voici l'heure de l'entraînement, Prêts ?
* Oui, vous pouvez reprendre une activitée normale !
