Jigsaw puzzle mechanism

Games
#1

Hi,

I’m investigating how to develop a small jigsaw puzzle game and I have a few questions. So hopefully I can get the answers here :slight_smile:

  • What is the best way for making the jigsaw pieces? Via bitmap masks?

  • What kind of mechanisms/solutions are possible to compare if the right jigsaw pieces are put together?
    And what is the best way or most commonly used?
    Via Physics (using sensors for each jigsaw piece)?
    Or is it better to put the pieces in an array and make ID’s for all sides of each jigsaw piece and go trough the array, comparing the ID’s?

Thanks for your time.

Ivo

ps. I have the jigsaw example from the code exchange but still have these questions.
[import]uid: 106768 topic_id: 29077 reply_id: 329077[/import]

#2

I’ve never coded a jigsaw puzzle, nor have I looked into it before, so I can’t comment about how it is normally achieved. Here’s what I would do though:

  • Add the different pieces into a table/array
  • Create a grid with set screen positions that will hold the placed pieces - another table
  • Add a property to each piece and grid position to describe their location (e.g. puzzlePieces[1].id = 1)
  • Create the code to move the puzzle pieces by touch
  • In the ‘ended’ phase of the touch, include some code to ‘snap’ the piece to the grid
  • Write a function to iterate through the grid table check the .id properties of the piece that’s just been placed
  • If it’s in the correct location then lock the piece and mark it as correct
  • If it’s incorrectly placed then move it back to it’s start position

Hope that helps get you started [import]uid: 74503 topic_id: 29077 reply_id: 116977[/import]

#3

I’ve built them for two different apps now. Here’s the basics.

The artist has a Photoshop plugin that makes the pieces.
I trim the transparent pixels.
I create an array of pieces that knows the X and Y of each piece, and an ID number for that piece (you can’t use the Array index because . . .)
Shuffle the array
At each X, Y for where the puzzle piece needs to go I create an invisible target, usually a rectangle and give it an ID that matches the piece’s ID that needs to land there.
Assign an touch handler to each piece and in the “move” phase of the event handler, use a simple non-physics detection method… See:

http://omnigeek.robmiracle.com/2011/12/14/collision-detection-without-physics/

If the piece’s rectangle is colliding with the target rectangle, then transition the piece into place remove it’s event handler.

I also set a count of the number of pieces that are in place. When that count >= #pieces the puzzle is done.
[import]uid: 19626 topic_id: 29077 reply_id: 116993[/import]

#4

ahh…now I understand. My ideas where more complicated :slight_smile:

Thanks to both of you for the explanation!
[import]uid: 106768 topic_id: 29077 reply_id: 117005[/import]

#5

I didn’t use collision detection for my latest jigsaw, but like rob said use an array with x and y coordinates where the piece should end up, then when the user moves the piece, calculate the difference between the current x/y and the x/y where the piece should be.

If the difference is less then xx pixels (you can define that yourself) i let the piece ‘snap’ into place, en lock it. Piece[xx].locked means you can’t move it anymore.

[import]uid: 50459 topic_id: 29077 reply_id: 117006[/import]

#6

It can be even easier than that, I export all the pieces in photoshop in place and then use texture packer to create a spite sheet and trim the pieces when you plae the pieces all at the same point they fit together to form the whole puzzle.

http://www.barnesandnoble.com/w/jigsaw-magic-2-purplezoo-productions/1112166593?ean=2940043911803
[import]uid: 8697 topic_id: 29077 reply_id: 117033[/import]