Cette page est dediee a tous ceux qui souhaitent se lancer dans la creation de graphismes, et plus particulierment de sprites, sur Amstrad CPC. Elle brosse ainsi les techniques de base en matiere de Pixel-Art, avant de se concentrer sur un exemple concret. Bien evidemment, en autodidact, je n'ai absolument pas la pretention de detenir "LA" methode universelle pour realiser cet exercice... Je vais donc plutot aborder le sujet par le prisme de mon experience personnelle. Bienvenu dans le monde de l'astuce, de la contrainte et l'infiniment petit !

Avant de nous lancer corps et ame dans la creation d'un sprite, brossons rapidement et succintement les techniques de base a connaitre en matiere de pixel-art.

1) Le tramage (dithering) ...ou le remede aux palettes peu genereuses !

A l’instar de celle couramment employee dans l’imprimerie, cette technique permet de simuler des couleurs non disponibles grace a la juxtaposition de pixels de couleurs differentes. Le tramage existe sous la forme de nombreuses combinaisons de motifs, comme on peut le voir sur l'echantillon ci-dessous : Cela dit, elle se traduit le plus frequemment par un agencement regulier de pixels formant un damier uniforme que l’oeil humain percoit alors comme une nouvelle teinte : Meme s'il est aussi parfois employe avec le MODE 0, ce procede est plus particulierement utilise avec le MODE 1 et le MODE 2 qui ne disposent que d’une palette de couleurs reduite. Voyons un exemple concret. Ci-dessous, nous pouvons voir un majestueux tigre dessine en MODE 1, 4 couleurs : Si je vous dis que, bien qu'on la voit tres clairement sur le sol et le pellage du fauve, il n'y a en realite aucune couleur rose dans cette image ! En effet, cette impression de teinte rose est tout simplement obtenue par un tramage regulier de pixels de couleur orange et blanche, dont voici une extraction zoomee : Autre exemple, cette fois-ci en MODE 0 : un ecran tire du jeu Wild Streets qui regorge egalement de tramage : Si le tramage peut ainsi parfois s'averer judicieux lorsque la palette fait defaut, je preconise toutefois de l'utiliser avec parcimonie et sur des zones reduites lorsqu'il s'agit de sprites. En effet, leur relative petite taille implique souvent, lorsque la richesse de la palette le permet, de preferer des surfaces de couleurs unies, quitte a renforcer le contraste avec du noir. Voici quelques exemples de sprites utilisant plus ou moins de tramage :

2) L'Antialiasing

Arrive plus tardivement sur les moniteurs de nos cheres machines 8 bits, l’Antialiasing s’exprime plutot bien sur l’Amstrad CPC qui a l’avantage, rare a l’epoque, d’offrir une palette etendue de 27 couleurs (dont 16 affichables simultanement en MODE 0). Son concept repose sur la diminution de l’effet d’escalier engendre par la silhouette angulaire inherente aux pixels. S’il semble, a premiere vue, simplement reposer sur l’introduction d’un pixel de couleur et de luminosite intermediaires entre deux autres, il est, en realite, un veritable calcul mathematique visant a ponderer une couleur en fonction des informations qu'elle represente. Il peut meme faire quasiment disparaitre certains pixels du trait d'origine afin d’ameliorer son aspect courbe ou lisse. Mais treve de theorie pompeuse, passons plutot a la pratique avec les deux cercles en MODE 0 ci-dessous : Lorsqu'on les compare, on voit que celui de gauche affiche des escaliers tres prononces sur ses contours, tandis que celui de droite exhibe des courbes plus douces, moins anguleuses et limite floues : le cercle de droite s'integre clairement mieux dans ce fond noir ! Ces deux cercles sont pourtant identiques en taille, forme et couleur. La seule chose qui les differentie, c'est l'application de quelques pixels supplementaires plus sombres sur celui de droite. Pour mieux comprendre le phenomene, realisons un petit zoom comparatif de deux portions identiques de chacun des cercles : A la lumiere de ces details, on comprend que l'astuce est d'ajouter judicieusement quelques pixels de couleurs intermediaires qui feront une transitions plus douce entre le jaune vif du cercle et le noir profond du fond. Bien evidemment, lorsque le fond est clair, le sens du degrade s'inverse, comme on peut le voir sur l'exemple suivant : En 1, nous avons l'illustration complete (realisee par l'artiste Barjack) en MODE 1. En 2, il s'agit d'un zoom sur le regard du personnage. On voit que seulement 4 couleurs sont utilisees (un noir, un blanc et deux verts). En 3, nous avons l'oeil seul : on peut voir que son contour possede quelques pixels vert clair permettant une transition douce entre l'iris et la cornee : C'est l'antialiasing ! En 4, il s'agit d'un zoom extreme sur l'antialiasing : on voit que le pixels vert clair est bien la couleur intermediaire entre le pixel noir et le pixel vert fonce. Ce zoom progressif sur l'oeil de la creature montre bien a quel point les pixels de couleur vert clair arrivent a adoucir les aretes des pixels noirs et verts fonces. Ainsi, malgre le fait que cet oeil soit concu a partir de formes aux angles saillants (les pixels), l’ensemble donne finalement, avec du recul, un aspect courbe tres reussi ! Concretement, sur un sprite, l'antialiasing va donc se traduire par l'attenuation des angles saillants et un lissage des couleurs :   Poussee a l'extreme, cette technique, combinee a un peu de retouche, peut aboutir a des resultats epoustouflants... ... a condition que la palette de la machine le permette !

3) L'eclairage, l'ombrage, les volumes et les reliefs

Tout comme dans la realite, lorsqu'un sujet est eclaire par une source lumineuse, celle-ci met en evidence son orientation, mais aussi ses reliefs et ses volumes. Il convient alors de definir, en premier lieu, la position theorique de la source lumineuse afin de rester toujours coherent dans les reflets et autres effets de luminosite et d'ombrage. Par exemple, dans l'ecran ci-dessous, la source lumineuse a ete fixee en haut, a gauche : Cela implique donc de privilegier des couleurs vives a gauche et des couleurs plus sombres a droite (ou siege l'obscurite). C'est la meme chose avec un sprite : sa luminosite doit etre coherente en fonction de ce qui est expose ou non a la lumiere : Dans l'exemple en MODE 0 ci-dessous, le "blob" de reference en haut subit, en-dessous, differents eclairages qui se traduisent par des degrades de couleur bleue qui changent de position en fonction de la position de la source lumineuse : Sur un sprite, les eclats de luminosite se materialisent le plus souvent par l'ajout de quelques pixels tres clairs qui vont jusqu'a simuler une proeminence. Voici un exemple concret, avec un sprite en MODE 0 : A gauche nous avons le sprite d'origne et, a droite, le sprite auquel on a simplement applique quelques pixels tres clairs pour simuler reliefs et volumes sur les cheveux, la poitrine, la peau et les bottes. Il suffit ainsi parfois d'un seul pixel vif bien place pour donner une consitance a un objet. Voici un autre exemple avec des portes : Les versions de droites semblent avoir plus de volumes que celles de gauche. La pierre affiche des reliefs plus marques, tandis que le metal revet sa veritable matiere. Un autre exemple avec la carrosserie de ces deux voitures qui retrouve son eclat : Le processus est identique pour les matieres organiques telles que les muscles par exemple. On peut notamment le voir sur le celebre ecran-titre de Gryzor : Ou meme sur ses sprites : Bref, un "point" a ne vraiment pas negliger ! A present que nous connaissons quelques techniques de base, je vous propose de passer au processus de creation d'un sprite.

4) Dessine-moi un SPRITE !

Personnellement, j'ai pour habitude de toujours commencer par dessiner la silhouette du sprite que je desire. Pour cela, j'utilise la couleur noir afin de tracer les contours, comme on le ferait avec un crayon a papier. Commencons donc a esquisser grossierement un personnage qui adopte une posture simple : Ensuite, affectons des couleurs aux differentes zones du sprite. Ici, cheveux bruns, peau rose, pantalons bleus et chaussures vertes : A ce stade, nous pouvons commencer a mettre en application les quelques regles de Pixel-Art que nous avons vu plus haut, a savoir : l'antialiasing, les ombrages, le tramage et realiser, si necessaire, quelques retouches (comme par exemple ici au niveau de la tete rendue plus expressive) : Lorsque le sprite est enfin termine (generalement apres quelques retouches supplementaires), nous pouvons mettre la touche finale en placant quelques pixels vifs aux endroits stategiques du sprite afin de creer les effets de luminosite : Et voila ! Notre sprite est termine ! A noter que les contours noirs ne sont absolument pas obligatoires : ils servent surtout a donner ici un petit cote cartoon au personnage, tout en lui octroyant une meilleure visibilite dans l'eventuel decor bigarre d'un jeu. En effet, selon ses besoins et aspirations artistiques, ces contours peuvent aussi etre partiels : ou meme carrement inexistants : Reste a present a decliner le sprite dans toutes les positions pour obtenir les animations necessaires a son exploitation dans un jeu CPC comme, par exemple, le personnage ci-dessous : J'espere que ce petit tuto vous aidera un peu dans vos envolees creatives sur Amstrad CPC. Bons graphs ! :)

End of File.