# How do I break an image into 6 or 8 pieces of different shapes?

I am working on puzzle game, where the player can select an image from iPhone photo gallery. The selected image will save in puzzle page and after 3 second wait the selected image will be broken into 6 or 8 parts of different shapes. Then player will arrange these broken parts of images to make the original image.

I am not getting idea how to break the image and merged so that player arrange the broken part. I want to break image like this below frame. I am developing this game in cocos2d.

• Ah, that makes more sense. Does the breaking need to be random every time or can you have a large predetermined set of breaks?
– House
Apr 18 '12 at 21:57
• no i have 3 breaking frame like above image, i want to break image in 6,7 and 8 pieces and this breaking frame will appear according to the player age. Apr 18 '12 at 22:09
• OK. I was asking if you could have a large set of pre-made break patterns. Or if you needed the breaking to occur randomly. You would have multiple break patterns for each number of pieces you wanted.
– House
Apr 18 '12 at 22:14
• No, i have 3 set of pre-made break patterns. Apr 18 '12 at 22:18

Since you have pre-made break patterns. All you really need to do is collect a sub-image for each one to show.

This would likely be easiest to do with a rectangle for each shape. The rectangle should encompass the entire shape. Now break the image up into these rectangles. There will be overlap. Now apply an alpha mask to each rectangle to hide everything but the shape it's encompassing.

For example some of the rectangles would look like this:

Then, for example, the texture for the black rectangle would be the portion of the image that is contained by the black rectangle. Then when that is masked out, only the shape portion of the image would remain.

• Hi i am new in cocos2d i dont know method to break the image, will you please give some code for breaking image in pre-made break patterns so that i get idea and i start my game. Apr 18 '12 at 23:02
• No, sorry, I don't know cocos2D. The answer I gave is code agnostic.
– House
Apr 19 '12 at 0:41
• @Anilgupta The answer given by Byte56 is exactly what you should do. To obtain these textures, have a look at the Quartz 2D API, especially image masking. So basically use Quartz 2D to generate the needed textures (scale photo and mask parts) and apply them to CCSprites in Cocos2D. Apr 19 '12 at 7:40
• @Byte56 I wouldn't use those rectanlges. I don't think 8 copies of full image can cause memory problem, so I'd just applied alpha mask to whole image 8 times. Apr 19 '12 at 9:25
• @bummzack Thanks for the domain specific addition. Gajet, you wouldn't need to copy the image 8 times, once the image is loaded as a texture, you can just apply it 8 times. I assume beyond that you're saying you'd just use screen size rectangles that are alpha masked? Yep, that works too.
– House
Apr 19 '12 at 13:41