Making a jigsaw puzzle - Part two: Making jigsaw pieces

  • 12 favourites

Attached Files

The following files have been attached to this tutorial:



Download now 2.56 MB


6,545 visits, 11,079 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

This tutorial aims to explain how to make a jigsaw puzzle using Scirra's Construct2.

This is part two, "Making Jigsaw pieces". You can see part 1 visiting "Making a Jigsaw puzzle part one: Concept".

What we need

Before starting, you will need to install the Canvas plugin from R0j0hound. This plugin is needed if you want to allow users to change the picture (otherwise, you could simply make sprites with the shape of jigsaw pieces).

Simply download the file and extract it into C:\Program Files\Construct 2\exporters\html5\plugins (substitute "C:\Program Files\Construct" for actual Construct folder). Note you could need administrator rights to do it!

If you have a Zip manager installed, such as Winrar or 7zip, I strongly advise you to open the file using Windows explorer (right click on the file and select "Open With => Windows Explorer"), to get rid of folder permissions.

You will have to restart C2 for changes to take effect.

You will also need a file with some puzzle shapes (I'll attach one to this tutorial)

Making our first jigsaw tile

Since I'm not very used to the C2 project default setups, I will start with an empty project.

We will be using large images, so In the "project" properties, adjust "Window Size" to 1024x768.

Add a sprite called "Pic" and load it with a 1024x768 picture like

Add another sprite and import into this the "Puzzle..PNG" attached to this tutorial (6 rows x 8 columns). Call that sprite "Piece."

(Note you could use any puzzle pattern, but I spent many time doing this one and want you to save some of your time. If you edit that image in a image editor, you'll see the "blank" background margin around all the sprites).

Click resize button to get sprite size (189x189). Write down that number!

Put your piece at top left (189/2,189/2)=(95,95).

Make a clone of "Piece". Change its "Initial animation" property to 1.

Now it will be see the 2nd piece from top-left. "Snap" it to the original "Piece", thus you can calculate step between tiles. First tile is at 95,95 and second one is at 213,95 - so step between tiles is 213-95=118. Write down that number, too!

Margin will be (Sprite_size-Sprite_Step)/2, thus 71/2=35. Again, write down the number!

Make a canvas object of same size than your sprite (189x189). For this tutorial, we will fill it with colour, so it is visible. You don't need to do that.

Set the Canvas "hotspot" property to "center", so it behaves like a sprite.

Resize "Pic" to ensure it will be entirely covered by tiles:

Since tile step is 118, and you have 8 x 6 tiles, the new width will be 8 tiles x 118 pixels = 944 pixels, and the and the new height will be 6 tiles x 118 pixels = 708 pixels. So resize "Pic" to (944,708).

Now move your "Piece" sprite margin_pixels to the upper left. Margin was 35 and Piece was at (95,95). Since 95-35 = 60, we will move it to (60,60).

All this resizing could be made in runtime, that allowing you to have different "jigsaw cutting" patterns.

Creating events

Now, let's go to the "event" editor to try to cut our first jigsaw tile:

Add an "on start of layout" event. We will want to have our pieces cut when the layout starts.

Add actions to stop the jigsaw sprites animation (we don't want them to be animated, we just want an array of pictures):

    On start of layout
       Piece=> Stop animation
       Piece2=>Stop animation

We also want these cutting patterns to be invisible.

    On start of layout
       Piece=> Set invisible
       Piece2=>Set invisible

Then, we will make sure our "Canvas" object is resized to same size than "Piece" sprite, and moved to same place:

    On start of layout
       Canvas=>Set size to (Piece.Width,Piece.Height)
       Canvas=>Resize canvas to (self.Width,self.height)
       Canvas=>Set position to Piece (image point 0)
       Canvas=>Move to top of layer

Now the magic starts. First, we will fill the canvas with a square portion of the "Pic" picture:

    On start of layout
       Canvas=>Paste object Pic into Canvas
       Pic=>Set invisible

If we run our layout at this point, we'll see a small portion of blue sky cut in a square shape. But we want it to have a jigsaw-shape. So we have to add another two events:

On start of layout

       Canvas=>Paste object Pic into Canvas
       Pic=>Set invisible
       Piece=> Set blend mode to Destination atop
       Canvas => Paste object Piece into canvas.

Run your project. Now you'll see something like this:

Improving the source

Using a for.. loop, you could change the animation step of Piece, move "step" pixels to the right or to the bottom, and then cut another jigsaw tile in a new instance of Canvas, until you cut the 8 x 6 puzzle tiles. This is left to you as an exercise.

What goes next

In next tutorials, I will try to explain how to arrange all these pieces so you can move them and play with them.

Following on series: Making a Jigsaw Puzzle Part Three: Snap Pieces



Download now 2.56 MB

  • Order by
Want to leave a comment? Login or Register an account!