Home
Hello, everyone. I'm going to show you how I jigsaw my images when needed. I'd like you to keep in mind this is how I do it, and there may be different ways. Now you may ask why jigsawing is necessary, well personally, I use it to avoid color loss on large images with many different colors. Due to mugen's 256 color limit.
What's needed for this:
- Gimp/Photoshop whichever you use.
- The image you're jigsawing.
In this tutorial I'll be using Gimp.
STEP 1: FIND YOUR IMAGE
In this tutorial I'll be using this background:
When indexed as one large sprite, you'll see some splotches of unwanted color loss.
STEP 2: OPEN IT IN YOUR PROGRAM AND MAKE NECESSARY EDITS
Necessary edits being color change, cropping, contrasting, etc. After you're done editing, we'll move on to the next step. If you don't need editing, just move on.
STEP 3: BEGIN JIGSAWING
Okay, for this you need to be very very careful. This is how I go about it:
Keep your original image opened on it's own tab in the program, then create a new image the same dimensions as your original image and add your 0/trans color to it. Pink/Green/etc.
Then you'll begin by starting in the top left corner of your image and cutting it out (make sure this is done on the original image) make sure your pieces are together correctly. Example:
Now remember, your cuts can and should be smaller than this, this is just an example.
You're going to cut the top left hand side not missing even a single pixel on your original image, then you're going to place it in the same position on the image you created (trans image pink/green) Like so:
Now at this point you make your own decision: index this one image and save as .pcx format creating your first sky sprite OR make the sky sprite its own layer and add the rest in layers (this is what I do)
Some examples:
Your original image should look something like this again keep in mind your cuts can and should be smaller (two cuts):
You want to keep the cuts even and symmetrical going from left to right on each row, the length should always be the same for each row, the width can vary. Again, it's very important you do not miss a single edge/pixel. So use zooming and concentrate.
Like I said, I use layering. So when I place my images on the pink background, I don't anchor the layers. That's a big no-no, you'll lose your piece this way. I have each cut pasted on its own layer in the exact spot it should be placed. Example:
First cut/paste.
Second cut/paste.
Now like i said many times already, I do this in layers. The reason being that I can make my other cuts visible while placing my new cut on the image, this way I can confirm I'm not missing any spots or leaving blank spots etc.
You're going to continue cutting this way until your image is complete. Then you'll make each layer it's own sprite. While editing each layer you should dither them to avoid more color loss, since mugen has issues with some colors. DO NOT CHANGE THE SIZE!!!! Leave all this pink in until it's placed in Fighter Factory.
After all of your sprites are created you're going to place them in Fighter Factory all grouped together. The X and Y values should be figured out like so:
My original image dimensions are: 1095 X 485.
How to figure out X value: 1095 - 640 = 455. This is your X value in FF.
Y value: 485 - 480 = 5. This is your Y value.
Make sure all the pieces are still the same size (original image size with all the pink in still)
Placing them in FF with your subtracted values will place them in Mugen for you. You will manually crop out all the pink/green using the crop/crop all tool on your sprites (it will remove it for you this way.)
Your image should be jigsawed now!
I hope this helped.
What's needed for this:
- Gimp/Photoshop whichever you use.
- The image you're jigsawing.
In this tutorial I'll be using Gimp.
STEP 1: FIND YOUR IMAGE
In this tutorial I'll be using this background:
- Spoiler:
When indexed as one large sprite, you'll see some splotches of unwanted color loss.
STEP 2: OPEN IT IN YOUR PROGRAM AND MAKE NECESSARY EDITS
Necessary edits being color change, cropping, contrasting, etc. After you're done editing, we'll move on to the next step. If you don't need editing, just move on.
STEP 3: BEGIN JIGSAWING
Okay, for this you need to be very very careful. This is how I go about it:
Keep your original image opened on it's own tab in the program, then create a new image the same dimensions as your original image and add your 0/trans color to it. Pink/Green/etc.
Then you'll begin by starting in the top left corner of your image and cutting it out (make sure this is done on the original image) make sure your pieces are together correctly. Example:
Now remember, your cuts can and should be smaller than this, this is just an example.
You're going to cut the top left hand side not missing even a single pixel on your original image, then you're going to place it in the same position on the image you created (trans image pink/green) Like so:
- Spoiler:
Now at this point you make your own decision: index this one image and save as .pcx format creating your first sky sprite OR make the sky sprite its own layer and add the rest in layers (this is what I do)
Some examples:
Your original image should look something like this again keep in mind your cuts can and should be smaller (two cuts):
- Spoiler:
You want to keep the cuts even and symmetrical going from left to right on each row, the length should always be the same for each row, the width can vary. Again, it's very important you do not miss a single edge/pixel. So use zooming and concentrate.
Like I said, I use layering. So when I place my images on the pink background, I don't anchor the layers. That's a big no-no, you'll lose your piece this way. I have each cut pasted on its own layer in the exact spot it should be placed. Example:
First cut/paste.
- Spoiler:
Second cut/paste.
- Spoiler:
Now like i said many times already, I do this in layers. The reason being that I can make my other cuts visible while placing my new cut on the image, this way I can confirm I'm not missing any spots or leaving blank spots etc.
You're going to continue cutting this way until your image is complete. Then you'll make each layer it's own sprite. While editing each layer you should dither them to avoid more color loss, since mugen has issues with some colors. DO NOT CHANGE THE SIZE!!!! Leave all this pink in until it's placed in Fighter Factory.
After all of your sprites are created you're going to place them in Fighter Factory all grouped together. The X and Y values should be figured out like so:
My original image dimensions are: 1095 X 485.
How to figure out X value: 1095 - 640 = 455. This is your X value in FF.
Y value: 485 - 480 = 5. This is your Y value.
Make sure all the pieces are still the same size (original image size with all the pink in still)
Placing them in FF with your subtracted values will place them in Mugen for you. You will manually crop out all the pink/green using the crop/crop all tool on your sprites (it will remove it for you this way.)
Your image should be jigsawed now!
I hope this helped.
