"Jigsaw Puzzle" Sample

    puzle_gif.gif

    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.

    Puzzle_1.jpg

    • 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

    Puzzle_Drag_n_drop.jpg

    • 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:

    Puzzle_countdown.jpg

    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.