How to turn real photos into Mugen sprites

Last update: 5-15-2006

This is an addendum to the Mugen character creation guide because turning real life photo's into sprites for the game is a little different than pixel hacking players from scratch (And ripping sprites from other games as well). We're not Photoshop experts so if you see something that could be done easier or better let us know and we'll update the tutorial. Also, most of these steps only apply to the very first image you will do, see the 'Photoshop Shortcuts' at the end of this page for more.

Now, read the first half of page 1 of the Mugen tutorial.

Now that you've read the first half of page 1 of the Mugen tutorial, here is how apply your new knowledge to your photo's you've taken of yourself or someone else. First, erase all of the background from your photo so it's just your players body. Now, with Adobe Photoshop 7 at least, the tutorial doesn't quite get the procedure correct to convert your image to 'Indexed Color'. First, convert to 'Indexed Color' but since you can't choose 'Exact Color' just choose the default that comes up. Now, go back and change your photo back to RGB. And lastly, change it back again to 'Indexed Color'. This time you can choose 'Exact Color'. I don't know why it works like that...

Save your work at this point! Now, open the color chart aka palette of this picture.

Most likely position zero (Lower right hand corner) has a color in it already. Set your current color to a pure color like "#00ff00" for pure green. Now put that color in position zero of your palette. Yes, likely your picture now has green spots dotting it all over (If you're lucky there wont be any). If the green dots are manageable and there's not to many to manually eradicate then click ok. However, if it totally hoses up the photo then you'll have to do something else, see "Quick-n-Dirty Hacks" at the bottom. Remember, you'll only be doing this on the very first image with this 'trick'.

[If you have green dots to remove]
Ok, now go through with the pencil tool or equivalent and make the green dots become another color that IS on your palette (Use the eye dropper tool to get a pre-used color).

Ok, now you can finally use the paint bucket tool and splash that background with your pure color (#00ff00 in our case). Check your palette again. Pixel 0 should be the only place where #00ff00 shows up. If you have a bunch of other pixels in the palette that are #00ff00 or varying shades of #00ff00, then something is wrong. However, it may be usable, you'll need to test it.

If only position zero has your pure green, then everything is swell. Before closing the color chart you need to save your palette to a file for Mugen to use. Click "Save" and stick it in your characters directory (Will have an extension of .act). Now you need to reduce your image to the correct size. Experimentation will be needed with the Mugen Character Maker, but usually correctly sized characters are around 150 pixels tall or so.

Now save this file you've edited. You may wish to save it as a different name from photo with removed background, if there are problems you can redo your work easier. Also you can use the 'hi-res' bluescreened pictures for other things like adding weapons and such after the fact, then re-size them down as a new set of moves.
 

Testing

Open MCM (Mugen Character Maker) and click "SFF" at the top, then click "New". Import the resized image you just edited with a pure color background. Make sure the button "Transparency" is checked and then see that your first frame has an invisible background. If the button is checked and you can still see the pure color in your background around your image then you have a problem. See "Quick-n-Dirty Hacks". If you don't see your green background you have done it right and you can move on to "Photoshop shortcuts" below.

 

Photoshop shortcuts

Editing all these frigging pictures is hard enough without having to mess with the color table on each one. Here is how to bypass this part of the process for the rest of your photos:

1.) Do your first image as described above.
2.) Save a copy with the background set to a pure color but without being resized down.
3.) Make a backup of this file.
#####
4.) Take your next picture and erase the background, but that's all.
5.) Copy this image and paste it into your first image.
6.) Use the paint bucket tool to make the background the same pure color as your first image.
7.) Resize it down at the same percentage as your first "finished" image.
8.) Save this as a new file.
9.) Close your first image WITHOUT saving it. Re-open it again.
10.) Repeat from step 4 for every image you have left to do.

 

Quick-n-Dirty Hacks

So, you just can't fix your images so the background is transparent. There is a tool from the makers of Mugen called "PCX Clean". Get a copy of this and run your final re-sized images through it. This has solved this problem for me before I fully understood what I was doing wrong. The drawback is that you are likely loosing some colors because of the problem this solves. If it works, that's great you can move ahead. But if you have time going back through and figuring out what is really wrong can make your frames look smoother/nicer/pretty. Lastly, if pcxclean doesn't fix your problems then you'll have to start over from scratch and do it properly until it works.

 

More Info