Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

enter image description here

share|improve this question
Ah, that makes more sense. Does the breaking need to be random every time or can you have a large predetermined set of breaks? – Byte56 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. – Anil gupta 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. – Byte56 Apr 18 '12 at 22:14
No, i have 3 set of pre-made break patterns. – Anil gupta Apr 18 '12 at 22:18
up vote 5 down vote accepted

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:

ops original image with rectangles around shapes

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.

share|improve this answer
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. – Anil gupta Apr 18 '12 at 23:02
No, sorry, I don't know cocos2D. The answer I gave is code agnostic. – Byte56 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. – bummzack 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. – Ali.S 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. – Byte56 Apr 19 '12 at 13:41

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.