Create flash jigsaw puzzle game

This will cancel the piece's desire to move to a random spot on the Stage, in case the user clicks on it during the randomization process. When a puzzle piece is released, we have to do several things.

Of course, we need to stop dragging, and emit a click sound so the user can tell something happened. But we also need to check whether the piece is adjacent to any of its neighboring pieces. If so, these pieces will snap together, and effectively become a single piece. Because we've set up all the pieces with the same reference point, it is easy to check whether two pieces are in the correct relative position. We need to set some tolerance around how close to their proper alignment pieces must be in order to be counted as correctly aligned.

I've used a relatively large value of 16 pixels in this example, but larger or smaller values may work better for other puzzles. Following the programming principle of putting shorter actions first, we skip over a piece if any one of several conditions occurs:. And if the pieces are out of alignment by more than the tolerance, in either the x or the y direction, we will not join them:. If we make it through all these tests, we know that the piece we've just released is aligned with another piece, and should be joined to it.

In fact, we take the puzzle piece or pieces, if a piece is already the result of previous joining from the aligned movie clip, and add it to the mask layer of the released clip. Finally, we check to see whether the puzzle has been completed.

Here's the full release function:. Because we merge any aligned puzzle pieces into a single piece, it is very easy to check whether the puzzle is finished: we just check whether the array of pieces has been reduced to a single element! If more than one element remains, we'll continue with the puzzle.

Otherwise, we'll reward the user for successfully completing the puzzle. In this example, we remove the one remaining puzzle piece, and show a version of the movie that includes sound. The sound-enhanced version of the movie has a stop command on frame 1, so that we can preload it while the user is working on the puzzle, without having it launch immediately upon loading.

So when the puzzle is done, we issue a gotoAndPlay 2 command to start the movie rolling. On completion, we stop the timer, to record how long the user took to complete the puzzle. On a commercial Website, one could offer the user various rewards for having completed the puzzle. A free sample, or a lottery entry to win a prize, could be made available to those who complete the puzzle in less than one minute, for instance. Having accomplished a task requiring some effort, your visitor will likely feel that they have earned whatever prize you offer, and be more willing to give their contact information than they would for a free offer.

Seeing your furry friend will make the puzzle even more fun to complete! Making a family photo puzzles can be a great way to gather the gang for a fun indoor activity. Everyone in the house will love putting together a puzzle that shows their favorite photos of themself at the end! Add your family name to the puzzle, a monogram, or a sweet quote that sums up your whole family. Looking to make a jigsaw puzzle for kids?

For your own family, consider creating wedding jigsaw puzzle games with your past wedding photos as a unique sentimental keepsake from such a special day. To make a puzzle, first, decide what image or images you want to display. Your puzzle could include everything from your favorite family moments, holiday photos, pet photos, and even your own artwork. With Shutterfly, you can create a classic puzzle that includes a single image, or choose to create a jigsaw puzzle photo collage.

Just keep in mind that multiple photos might make your puzzle more difficult! Before you make a puzzle from a photo, also consider how difficult the puzzle should be. The fewer pieces, the easier it will be to put together the puzzle. All you have to do is upload your design as a jpeg or other image file and drag it into the photo puzzle template. When you upload your own design, you can choose between a single image or a collage with up to eight photos. And you can do that creation right here!

Start my jigsaw puzzle! Jigsaw puzzles start from an image that you upload yourself, making it fully personalised from the start! The image then gets sliced up into any number of puzzle pieces, just like your offline jigsaw puzzle. The jigsaw puzzle pieces are randomly spread across the puzzle field and need to be returned to their original spot. You do this by dragging the pieces touch for mobile, mouse for desktop.

The jigsaw puzzle field helps you out a bit, because if you drag a piece near the correct spot, the puzzle piece will 'click' into place and cannot be moved anymore.

Once completed, the full picture will be shown again and the edges will fade somewhat to allow your image to shine in full glory :. This tutorial is the fourth tutorial from a more extensive tutorial on Create a Jigsaw Puzzle Game in Unity.

Now that we know how to create Jigsaw tiles and a Jigsaw board using the Bezier curve from an existing image, we will apply that knowledge to create an entire Jigsaw game. Please create a new scene in Unity and name it JigsawGame.

We will now proceed to implement our Jigsaw game as follows. In our previous tutorial, we implemented the BoardGen script component to handle the creation of Jigsaw tiles. This tutorial will refactor our codes and do some enhancements to ensure that we can reuse the class for our game. We want to refactor the first thing to park all the codes we had in the Start to a new function named CreateJigsawBoard.

We also move the lines highlighted below immediately after loading the base opaque texture. These three lines were previously in the function CreateJigsawTiles.

Then we call this method from the inside Start method of BoardGen. The second thing that we want to do is make the entire process of creating textures, including the creation of tiles into coroutines. We want to do this so that we can distribute the output of tiles across multiple frames. There are two advantages of doing so. The first is to ensure that our game does not hang when we create a giant Jigsaw puzzle, and the second is to show some animation while loading.

The animation will show the progress of Jigsaw creation to the player. The above method is the same as that of CreateJigsawTiles. The only differences are in the highlighted lines 1 and The first change is to change the function to be a coroutine and name the function accordingly.

The second change is to yield a return null when we complete one column of Jigsaw tiles. Now to make use of this coroutine, we create another function similar to CreateJigsawBoard. The above completes our refactoring of the BoardGen. We now have two ways for us to create the Jigsaw board. We can use either of them depending on our use case.

We will allow the player to pan and zoom the camera to adjust the view accordingly while playing. We will allow the player to pan the camera by holding down the left mouse button and drag. Note that we also allow the same control to move Jigsaw tiles as well. So how should we differentiate between when we can select and drag a tile and when we can choose and drag the camera?

The answer is simple. We will disable camera panning whenever a tile is selected and dragged.