A Mugen community that specializes in stage, screenpack creation, and graphics.

You are not connected. Please login or register

Jigsawing Tutorial

Go down  Message [Page 1 of 1]

1 Jigsawing Tutorial on Sat Nov 24, 2012 4:24 pm



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.


In this tutorial I'll be using this background:

When indexed as one large sprite, you'll see some splotches of unwanted color loss.


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.


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.


2 Re: Jigsawing Tutorial on Sat Nov 24, 2012 4:30 pm



So that how its called that method eh?

Seems like a good idea.

now i supose that more crops i made less color loss i will have right?


3 Re: Jigsawing Tutorial on Sat Nov 24, 2012 4:31 pm



It can work out that way, the smaller your pieces are and using dithering the less colors there'll be when indexing, therefor meaning less color loss.


4 Re: Jigsawing Tutorial on Sat Nov 24, 2012 9:16 pm



Got it!

Thanks for the info Boss!


5 Re: Jigsawing Tutorial on Sat Nov 24, 2012 9:23 pm



No problem, glad i could help! Thumbs Up


6 Re: Jigsawing Tutorial on Sun Nov 25, 2012 6:01 am



Very nice tutorial dude!

Also, just a small tip. You can also do the Jigsaw method and RGB method at the same time, which will result to a beautiful quality image but might make your Mugen slow down a bit.

7 Re: Jigsawing Tutorial on Sun Jan 20, 2013 8:14 am


I have another way but i think this one is better, im gonna keep reading when i get home, Thanks GLB.

Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum