Making a Jigsaw Puzzle: - Part Four: Managing grouped pieces

  • 15 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 2.56 MB


Download now 2.59 MB


Download now 2.59 MB


6,437 visits, 15,442 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 four, "Managing grouped pieces." We will refine our snapping routine so we can snap the group we're dragging even if we don't snap the exact piece we are dragging.

Previous in this series

Previous in this series are three chapters,

Making a jigsaw puzzle - Part one: concept.

Making a jigsaw puzzle - Part two: Making jigsaw pieces

Making a Jigsaw Puzzle - Part three: Snap pieces

Parts one and three explain the logic used by the app to "snap" pieces together, while part two shows how to draw "jigsaw tiles" from any picture.

This tutorial continues part three -- it some kind of part three subpart (b).

Important Note

Just before I wrote this tutorial I did some bug-fixing in the .CAPX file used in part three, and reflected changes in the previous tutorial.

If you are going to use your own file to start, please look at the history of previous tutorials to see wich changes you should make. Main change is changing Piece.Group variable definition at the main "loop", and deleting the "Pin" object and creating a new instance of it before Pin.Pin to ActualPiece.

You can also download the tutorial_puzzle_3.capx (It is the same than tutorial_puzzle_2b_2.capx, with all the bugfixes).

Group Snap

Looking for snaps in all the group

When you drop a group of pieces, you want all the pieces in the group "snap" every other piece. We could do this by adding a loop inside "On Actualpiece DragDrop Drop"

Go to the first blank event inside the "On ActualPiece DragDrop Drop" (event 10 in tutorial_puzzle_3,capx), click in the "minus" sign for it to collapse. Then add a new blank event over it (it will be created under it, move it on top).

Take the "Set MyGroup to ActualPiece.Group" and move it to the new Blank event.

Then, move the old blank event (the one starting with the "Set MyY to ActualPieceit" action) inside the other event. Add these conditions to it:

    System.Foreach ActualPiece
    System.Pickall ActualPiece
    ActualPiece compare Group Equal to MyGroup

Just by adding this modification, all pieces in the group will test for snap.

Try to run the project now. Take the second piece, move it to the center, take the third piece, snap it to the second, then drag the block from the third piece and drag it --you should be able to snap it to the first block.


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