Rendre le fond d’un sprite transparent pour Mugen

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 on va vous expliquer comment faire, sachant que deux procédés s’offres à vous : Soit en éditant les palettes de couleurs de l’image, soit en "détourant" l’image pour récupérer un fond transparent.

I- Utiliser les palettes de couleurs

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 !

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.

II- Détourer une image

Pour créer un portrait d’un personnage, ou pour les besoins d’un screenpack on a souvent besoin d’une image "détourée", c’est à dire d’une image avec un fond transparent...

Voici donc comment détoure proprement une image :

1) Il nous faut un logiciel de dessin style photoshop ou gimp (encore une fois je vous conseille gimp, qui est gratuit !), pour ce tuto j’utiliserai gimp !

2) D’une image avec un fond non transparent, nous allons partir de celle ci : (ça se voit pas trop mais le fond est blanc !)

Pour le choix de l’image je vous conseille une image avec un fond de couleur différent du contour du personnage : ici fond blanc et contour noir !

Ensuite on ouvre notre image dans gimp, puis on va dans :
Calque ---> transparence ---> ajouter un canal alpha (s'il n'existe pas déjà!)
Puis on sélectionne l’outil : "sélection contigue" .

Et on sélectionne avec cet outil le fond blanc de notre image.
Il faut ensuite faire varier le seuil de sélection :

Jusqu’à sélectionner le plus possible de couleur proche du blanc (sans dépasser sur notre image), pour voir ça on se sert du zoom (avant et arrière) :

Là ce n’est pas assez :

Là c’est trop :

et là c’est bon :

Une fois qu’on a bien sélectionner tous le fond blanc (sans rien sélectionner de notre image), on appuie sur suppr (plusieurs fois même) pour supprimer le fond blanc et notre image devient :

Il ne nous reste plus qu’à la redimensionner ou la couper à la taille voulue !

Conseils :
Si vous souhaitez garder votre image une fois détourée, sauvegardez-la en png ou au format par défaut de gimp pour pouvoir garder le fond transparent !

Quand vous faites varier le seuil de sélection, vérifiez bien avant de supprimer que vous n’avez pas sélectionné une partie de votre image ! (ça arrive parfois !)