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

  • 17 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


8,161 visits, 18,627 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.

Randomizing Tiles

Randomizing tiles at the start of layout is as simple as changing the start position of each tile. Go to the end of the "For 'TileV' from 0 to logicalh-1" event, inside the "On layout start" event, and add this:

    ActualPiece.Set Position  to random(Pic.Width), random(Pic.Height)

I've used Pic.Width because in this puzzle, the viewport includes at least from 0,0 to (Pic.Width,Pic.Height). Make sure you use values that put your pieces inside the viewport, so the user can see all pieces.

Detecting Player Win

One important thing you should do is detect player win. Since we are adding all "joined" pieces to a group, the player wins when all pieces are in the same group.

To make a simple winning detection routine, go to the blank event with action "Set MyGroup to ActualPiece.Group". Create a new event there with two conditions:

    System.Pick All ActualPiece

System.Compare ActualPiece.PickedCount = LogicalH*LogicalW

Add this action:

Flash 0.30 seconds on, 0.50 seconds off, 0.50 seconds on, duration 10 seconds.

Finally, collapse the event under it so you can change event order and check for puzzle completion straight after we join pieces. This means the event with the "For..." should be on top of this one:

    (Blank event)
    -->(subevent 1) Pick all ActualPiece / For each ActualPiece / ActualPiece Group=MyGroup
    -->(subevent 2) Pick all ActualPiece / ActualPiece.Group=Mygroup / ActualPiece.PickedCount=LogicalH*LogicalW

If you play the puzzle and complete it, it should flash for 10 seconds!

I strongly suggest you to make your own customized "Winning" routine. Keep in mind this: flashing produces strange neuronal activity and can cause side effects such as epilpsy.

The project at this point is attached to this tutorial, in the "tutorial_puzzle_final.capx" file.


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