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

2

Index

Attached Files

The following files have been attached to this tutorial:

.capx

tutorial-puzzle-3.capx

Download now 2.56 MB
.capx

tutorial-puzzle-final.capx

Download now 2.59 MB
.capx

tutorial-puzzle-final-manycomments.capx

Download now 2.59 MB

Stats

8,786 visits, 19,647 views

Tools

License

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.

Published on 10 Nov, 2013. Last updated 19 Feb, 2019

Production environment settings

Before you make a "final product", you should now remove all code we used for testing, such as the "flash" action on piece drop events or the events that change the "credits" textbox, and make disappear "helper" objects such as pin, by changing its visibility to "invisible".

You should also revise the puzzle settings to make sure it will work on different screen resolutions. You could also consider adding some scrolling, zooming or panning to make it work on any device.

Tutorial_puzzle_final_manycomments.capx (attached to this tutorial) contains a fully commented event sheet, and has all testing features disabled (invisible pin, credits do not change, pieces do not flash until puzzle is complete).

Piece border

Maybe you've found pieces should have some kind of border in order to be easier to find. I added such border by adding a bigger copy of the "Piecemask" sprite just under the "ActualPiece" object, and pinning them together. There should exist some way to make this with canvas object (so we use half the objects), but I didn't find it.

Piece inventory

An alternative to piece borders would be the following: all "unmatched" pieces are stored in a "piece inventory" bottom- or side- bar (an independent layer with its own scrolling), and you drag pieces from the inventory to the main layer.

Loadable picture

Another improvement is a loadable picture. You can simply store a list of pictures in a listbox and load the desired sprite inside the "Pic" object. If you include pictures from third parties with permission, you should aknowledge authorship.

Remember all the pics have to be in the same path than your app, so allowing the user to use his own pictures is a bit tricky. I have done experiments to open remote files from a server using php, but it could lead to security risks and "deeplink" complains.

Loadable jigsaw shapes

Adding more jigsaw shapes from pictures is complicated. If you want to have many jigsaw shapes, I suggest you to load them at design-time as different "animations" inside the PieceMask object. Remember to store the values for their height, width, number of tiles and margins. Shapes can be "themed": imagine jigsaw shapes with wedding motifs for a wedding photo. I have seen shapes such as that in the internet (and I also designed shapes like that).

Beyond jigsaw

The logic used in this Jigsaw Tutorial could be used to design a popular Spanish pastime, called "Mesa de Relojero" ("Clockwork table"), in which the letters of a text are "jigsawed" away in tetris-like shapes and you have to join them. In this case, each tile would be a letter, and starting groups would contain more than one tile at start, tiles joined with different tetris-like shapes.

.CAPX

tutorial-puzzle-3.capx

Download now 2.56 MB
.CAPX

tutorial-puzzle-final.capx

Download now 2.59 MB
.CAPX

tutorial-puzzle-final-manycomments.capx

Download now 2.59 MB
  • 0 Comments

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