Your question is a good one, definitely. Part 2 of that Community MX article is likely to give you considerably more guidance, because it steps through all the methods called by the buildPuzzle() method discussed in the first one. The drawAndApplyMask() method is responsible for “cutting” the image into rectangles, so you would skip that. Instead of attaching the same image repeatedly (then masking), as the current version does, you could attach a series of pre-cut images from the Library. It might help if you named your Library assets sequentially, so you could pull them with a for loop interator.

Go ahead an experiment with it! I try to make my Community MX articles as informative as they are fun. You might consider a free trial membership, so you can get Part 2 without charge (as well as a huge selection of other useful articles).

The rectangular pieces you see are innately a part of the CMXJigsawPuzzle class code. To replace those shapes with actual jigsaw puzzle pieces, you’d have to re-write the area that draws the rectangular masks (lines 130 – 148). It’s something I’m interested in figuring out myself, but haven’t yet taken the time to analyze. My hunch is that it would take longer to figure out a jigsaw shape algorithm than it would to figure out the rest of the code.

I had a good read through the drag-and-drop Jigsaw puzzle, very nicely done. Still getting my head around it.

just one question though - How would I be able to replace the squares with actual jigsaw puzzle pieces?

Regards
Alex