I- Présentation générale
Vous avez réalisé vos propres sprites de personnages avec vos propres images et tout et tout mais vous ne savez pas comment faire pour que ces images apparaissent avec un fond transparent dans Mugen ?
Alors ce tutorial va vous expliquer comment faire, avec le logiciel Paint Shop Pro 9.
La première chose à comprendre, c’est qu’un sprite ou toutes images destinées à mugen doit être au format pcx, en 256 couleurs, soit 8 mbits.
Ainsi, votre image est composée de 256 couleurs. Ces 256 couleurs sont représentés dans ce qu’on appelle une palette de couleur, où chaque couleur est associé à un index allant 0 à 255.
Pour que votre fond soit transparent donc, il faut que la couleur de fond de votre image soit située à l’index 0 de votre palette. De ce fait, si votre couleur de fond se trouve sur l’index 0, elle sera automatiquement transparente dans Mugen.
Si la couleur de fond ne se trouve pas sur l’index 0, alors il vous faut intervertir deux index pour placer votre couleur de fond sur l’index 0.
Ca peut paraître compliqué et abstrait au premier abord, mais en fait c’est trés simple à faire et une fois que vous aurez vu comment faire avec Paint Shop Pro, tout s’éclairera pour vous !
II- Paint Shop Pro
1) Ouverture de la palette
Voici donc comment faire avec le logiciel Paint Shop Pro.
Lancez le logiciel et ouvrez votre image au format pcx.
J’ai pris pour exemple cette image de Slug.
En fonction de sa taille, je vous conseille de zoomer pour l’agrandir correctement.
Ensuite, allez dans le menu IMAGE > PALETTE > EDIT PALETTE
La palette de couleur s’ouvre dans une nouvelle fenêtre. Comme vous pouvez le constater, chaque case représente un index et donc une couleur utilisé dans votre image.
Dans le menu à droite de la palette, vous pouvez voir les caractéristiques de l’index sélectionné : Le numéro de l’index, les attributs (rouge, vert, bleu) et le code html de la couleur.
Placez vous donc sur la toute première case en haut à gauche, qui représente donc l’index 0.
Vous constatez donc que ce n’est pas la couleur de fond de l’image (blanc) qui se trouve sur l’index 0.
Pour trouver sur quel index se trouve la couleur de fond de l’image, en l’occurrence ici le blanc, il vous suffit de placer le curseur au dessus du fond de votre image et un petit carré apparait vous indiquant les attributs de la couleur et son numéro d’index.
C’est en fait le dernier index, le numéro 255 qui correspond à votre couleur de fond. Pour y accéder plus vite, vous pouvez tout aussi bien entrer le numéro 255 dans la menu "index" à droite.
2) Modification de la couleur de l’index 0
On va donc changer les couleurs de l’index 0 et celles de l’index 255.
On va commencer par changer la couleur de l’index 0. Tout d’abord, notez sur un papier le code html de la couleur de l’index 0 avant de la remplacer. Une fois fait, double-cliquez sur la première case et cet écran apparait :
Sélectionnez une couleur hyper voyante et flashie qui n’est pas déjà utilisé dans l’image.
Ici on choisit un vert fluo, en cliquant sur l’une des cases de couleurs au milieu de la fenêtre. Une fois la couleur choisie, vous la verrez s’afficher dans le cadre "current" à droite.
Cliquez sur ok pour valider.
Vous vous apercevez alors que la couleur verte à remplacer sur votre image les pixels où était la couleur d’origine.
Dans le cas de cette image de Slug, 3 ou 4 parcelles vertes apparaissent sur son corps. Ne paniquez pas, c’est normal vu que l’on a changé la couleur d’origine.
3) Modification de la couleur de l’index 255
Le fait d’avoir noté sur un papier le code html de la couleur originale porte ici tout son interêt.
On va à présent remplacer l’index 255 où se trouve la couleur de fond (blanc) par la couleur originale de l’index 0, celle que vous avez noté sur un papier.
Double-cliquez donc sur la case de l’index 255 et la même fenêtre de toute à l’heure apparait.
Entrez dans la case nommée "HTML" situé en bas de la fenêtre le code html de la couleur originale de l’index 0.
Une fois fait, cliquez sur ok. Vous voyez qu’a présent, le fond de l’image à changé et adopte cette nouvelle couleur. Fermez la palette de couleur.
4) Remplissage des pixels modifiés
Sélectionnez à présent le sceau de remplissage de paint shop pro et sélectionnez dans la fenêtre "materials" qui se trouve à droite de votre espace de travail, la couleur de l’index 255 (dernière case).
Zoomer autant que nécéssaire sur votre image pour faire apparaitre de manière évidente les pixels qui apparaissent en vert et remplissez les avec le "sceau" pour qu’ils retrouvent leur couleur originale.
5) Remplissage de la couleur de fond
Une fois votre image corrigée, il ne vous reste plus qu’a reprendre le "sceau de remplissage" et de sélectionner la couleur de l’index 0, à savoir ce superbe vert et de remplir le fond de votre image avec.
Et voila, votre image est prête ! Dans votre futur jeu Mugen, l’horrible fond vert n’apparaitra pas !
