|Posted on March 6, 2010 at 6:50 AM|
1. Applying a palette to a sprite
Whether you rip your sprites from fighting games or other games, or whether you gather images from various sources on the Internet such as Deviantart, you'll get images in jpeg, bmp, gif or png format. Most of the time, these images will be in RGB Color format.
You must know that Mugen doesn't accept images of this type to go in the SFF (the file containing all the images of your stage). Mugen only accepts images in PCX format, with indexed colors. You should NOT include any other kind of image, or it will result in a black screen once in Mugen, or other strange effects. The old Fighter Factory allowed images in BMP format : DO NOT USE THIS OPTION ! This option doesn't work very well, and will ruin your work. Do things correctly, it's the aim of this tutorial anyway.
I will explain the process using Photoshop. The process is the same for The Gimp and almost the same for Paintshop Pro. This process is the one I use and I find it to be reliable. There are other methods, using PCXClean for example, and you'll learn to develop yours with time or as you read other topics.
- Open the image mario006.png with Photoshop.
- The image is in RGB format, we have to convert it to indexed colors and apply a palette to it. Click on Image -> Mode -> Indexed Colors...
- It will open a window. Now, click on the Palette scroll, and click on "Exact". Alternatively, if the image has too many colours (more than 256), click on "Local (Perceptual)". Then, click "OK". Note that if your image has too many colors, it will be subject to what we call colorloss, and will result in something ugly. There are ways to avoid this, and we will abord this in the chapter "Avoiding colorloss".
- The image is now in indexed colors, but with a bad palette. Let's open the palette. Click on Image -> Mode -> Color Table.
- You should now see your palette like this :
- Notice that the pink surrounding the image is supposed to be transparent in-game. The "transparency color" is set by the palette. In Photoshop and the Gimp, the transparent color is the last one of the palette, while in Paintshop Pro it's the first one. We now have to place this pink color at the last position. Here is how I proceed : click on the pink square corresponding to the transparent color.
- A "color picker" window appeared. At the bottom of this window, you can see the color reference of the pink square : ff00da. Copy this number with Ctrl+C, then press on the "Cancel" button. Now, press the last square of the palette (where my mouse is on the next screenshot), and you'll get something like this :
- Now, press Ctrl+V in the color reference zone in order to copy the pink reference, and press "OK". You should now have a palette like this one :
- However, we are not done yet. There are two occurences of the same color in the palette. Click on the other pink square to open the color picker window. Replace the pink color by another one which you are sure doesn't appear in the image. In this example, I chose a bright green, as shown in the screenshot :
- Now, click "OK". To return to the Color Table. The palette is done, but we will not apply it to the image. Click on "Save...", as pointed with my mouse.
- Choose a name and a directory for your palette (which has a .act extension) and click on "Save" :
- Back on the Color table, click "Cancel" (VERY IMPORTANT !). You will see the image return to its older palette if you had the Preview option checked. Now, convert the image back to RGB Colors : Image -> Mode -> RGB Color :
- We will then apply the palette we have just created. Convert the image back to indexed colors (Image -> Mode -> Indexed Color), but don't choose "Exact" this time, but choose "Custom" :
- Once on the Color Table, click on "Load" :
- Obviously, you have to browse to find the palette you've just created, "Peach.act" in our case. Select it, and press "Load".
- You can now see the palette in the Color Table window. Press "OK". Then, in the Indexed Color window, press "OK" again. The palette is applied to the image, we just have to save it.
- To do that, press File -> Save as...
- Choose a different name if you want, but most importantly, save the sprite in PCX format, the only one accepted by Mugen. Scroll on the PCX option, click on it, then press "Save".
- You may now want to check if your sprite has been correctly palettized (no doubt about it if you've followed this tutorial correctly :P). Close the sprite and open it with Photoshop. Then, "Click on Image -> Mode -> Color Table...". The pink color should be in the last one of the palette. Click on the eyedropper tool in the down right corner of the color table :
- Then, click on the last color of the palette with your mouse, and the pink background should become transparent. This proves that everything was done correctly, as the last color of the palette is the one defining background transparency. Click on "Cancel", you don't want to save this :
you now have to repeat this process for each image. Once you are at ease with this method, each sprite can be palettized in 30 seconds.
PART 2, soon