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