How it works

In this sample we use

• Pinboard collection containing 9 puzzle pieces whose "Container" property is set to Free so they can be manipulated. They are located in the upper right corner.
• A duplicate of the 9 puzzle pieces, hidden and with their "Container" property set to "Static" so they can't be manipulated. These 9 hidden pieces - identified as "zones" in the experience - are organized as the completed puzzle.

• Simple Counter interface asset, used to keep score. Every time a puzzle piece is properly seated, the counter is increased by one. When the counter reaches 9 - i.e. when the puzzle is successfully completed - it triggers the display of a "You Win!" message.
• Drag and drop feature so that when a puzzle piece is dropped on the correct zone, it will seat itself into place.
  • When visible puzzle piece X is dropped on top of its hidden duplicate - i.e. when it is properly placed - then:
    • Move visible X to the exact same position and orientation as duplicate X. This is done to create a little animation.
    • Add 1 to the Simple Counter interface asset. This is done to keep score. When the score reaches 9 - i.e. when the puzzle is successfully completed - the user wins.
    • Show duplicate X. This is done to give the effect that the piece has been put firmly in place.
    • Hide visible X

• Countdown interface asset set to one minute. The countdown begins when the first visible puzzle piece is manipulated. When the countdown reaches zero, it triggers the display of a "Time’s up!" message. You can easily delete this countdown or modify its value:

Changing the puzzle image

If you are in possession of an Adobe Photoshop license then we have a neat little trick to help you easily create puzzle pieces based on the image of your choice.
Watch the video below for guidance. (It is annotated; there is no audio.) You can download the Photoshop files here: Jigsaw_Puzzle_Mockup.zip

NOTE: It is important that you do NOT rename the Photoshop layers. If you do, the images will not be replaced correctly.

Adding Additional Pieces to the Puzzle

Looking to add more pieces to your puzzle? Well look no further for guidance! Just watch the video below! (It is annotated; there is no audio.)