"Jigsaw Puzzle" Sample
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
- When visible puzzle piece X is dropped on top of its hidden duplicate - i.e. when it is properly placed - then:
- 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:
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.