The purpose of this tutorial is to teach how to make a Jigsaw Puzzle using Scirra Construc2.
The concept
This tutorial is part one, "The concept." In this first part, I will try to tell you, using pictures, how does the program work.
How pieces "match" inside the computer
The user will see a jigsaw puzzle where pieces "snap" each other. But what the computer sees is very different:
- There will be some square pieces arranged in a rectangular shape.
- Each square piece "overlaps" the nearest pieces.
- Each square piece has instance variables (PlaceX, PlaceY) with order numbers, to know its right place.
When the user sees pieces "snap," what the computer does is to check if each piece is overlapping his left or right piece, using the instance variables:
Left and right pieces have to have the same PlaceY than current piece.
PlaceX of left piece should be current PlaceX-1
PlaceX of right piece should be current PlaceX+1
Top and bottom pieces have to have the same PlaceX than current piece.
PlaceY of top piece should be current PlaceY-1
PlaceY of bottom piece should be current PlaceY+1
In practice, it reveals easier to check if the right pieces are at the right positions:
Each time we "Drop" a piece we were dragging, we look for the pieces with appropriate (PlaceX,PlaceY) and test where they are.
If Blue is at the right of White, its position should be (X+PW-M,Y) where X is White X coordinate, PW is the Piece square width and M is the overlap margin between pieces.
In the actual program I developed (Canvas plugin required), piece width was 118 and Margin 39, that making (PieceWidth-Margin)=79. So if we were moving the top-left piece and looking for the piece on its right, we should seek for piece with PlaceX=1 and PlaceY=0, and test if its position is (Piece.X+79,Piece.Y+0).
Giving an small error margin
In real world, is very difficult to put the pieces right into the exact pixel where we want. We have to allow for a small error margin. In the actual program, I use an error margin of 5 pixels.
We can do it using formulas like this one:
abs(Where_should_piece_be-Where_piece_is) ≤ Error_Margin.
We use abs() since, if the piece is a bit more at the right, we will be subtracting big from small thus getting a negative number. Abs() removes the sign so we don't have to worry about subtracting bigger numbers from lesser numbers.
Imagine i drop the top left piece at (0,0) and, when I search for the piece in its right, it is at (99,0). When I do the comparison:
79-99=-20; -20≤5 => Pieces "match"
The computer would think the pieces "match," since -20 is less than 5. If we use abs(), instead:
abs(79-99)=abs(-20)=20. => Pieces do not match.
Another way to make this test would be comparing the distance() between ideal position and real position, to test if it's smaller than the margin (distance() return positive numbers).
Snapping pieces together
After all these tests, we have to make pieces snap. First, we move pieces to the "ideal position" so they do the best match. Then, we make them move as a group.
After some tries, I found adding an instance variable called group is the best method.
On game start, each piece has a different value in its "group" instance variable.
Each time we drag a piece, all pieces from same group are pinned (pin behaviour) to an invisible sprite called "pin."
Each time we drop a group, all pieces from the group are checked to see if they match some other piece not belonging to group.
If piece A from group G matches with piece B from group H, all pieces from group G are "moved" to group "H."
I hope this helps you design a jigsaw puzzle like mine, or understand its capx file. I promise I will make another tutorial explaining how to write an actual program, with source code.
Next in series
Making a jigsaw puzzle part 2 - making jigsaw pieces