0

Currently I'm applying a mask to an image to create a puzzle piece of that image.

Puzzle Image + puzzle piece mask = puzzle piece

In shortened obj-c code

CGImageRef mask = CGImageMaskCreate(...);
CGImageRef puzzlePiece = CGImageCreateWithMask([puzzle CGImage], mask);

I want to now create jigsaw puzzle pieces that have sense of depth to them. Something like described in this article. Basically it uses two Core Image filters, CIHeightFromMask and CIShadedMaterial to generate a 2D bevel image. Unfortunately these filters are either not available to iOS, or only in iOS 6 devices.

Are there any other ways I can create jigsaw puzzle piece with a sense of depth for user selected images? i.e. images not bundled with the app.

Thanks, Al.

ajmccall
  • 2,024
  • 23
  • 42
  • Your linked documentation details how the effects are implemented. You might search for some third party libraries that can do similar things, but it shouldn't be too hard to write the effects yourself, which you might have to. An alternative approach, if you really want to avoid messing with pixels is to use OpenGL, automatically generate a 3d object from the mask including the bevel, then apply the image as a texture. Both approaches have their difficulties. You could simplify the height field effect given the constraints of your puzzle piece (no holes). – Matt Oct 30 '12 at 16:00
  • Thanks @Matt, any links you can suggest to go the OpenGL route? To answer you're other question, no, I've not tried to implement this myself. Too lazy to reinvent the wheel and running on a tight schedule (as always) – ajmccall Oct 30 '12 at 18:06
  • OpenGL has a steep learning curve, and that approach is probably overkill for what you need. It would actually still require evaluating the mask pixel by pixel, and then doing some complicated things that data in order to create the vertices for the 3d object (Then there's lighting, shading, viewing matrices, the list goes on). Instead, given your time constraints, I would say writing the effect would be faster and easier (Provided you've exhausted any chance of finding third party code). I might be able to post some pseudo code later if you need to be pointed in the right direction. – Matt Oct 31 '12 at 17:24
  • http://stackoverflow.com/q/5757386/1059705 and [Creating an Image Mask using Quartz 2D](https://developer.apple.com/library/ios/documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_images/dq_images.html#//apple_ref/doc/uid/TP30001066-CH212-CJBDIJEE) – Bala Nov 17 '12 at 11:48
  • Unless I've got your comment wrong, I am already successfully using an Image Mask to create a puzzle piece. What I want to do is create a bevel around the edges of the pieces. See linked article. – ajmccall Nov 19 '12 at 17:03

0 Answers0