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


6,798 visits, 16,166 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.

Adding sound

We will add some sound effects now. We will need a sound file.

Feel free to download the "clic-clac.ogg" file I use in my jigsawpuzzle app (go to and click "raw" to download the file).

I made the sound by pressing a can of soda between my fingers, and recorded and cut it with Audacity. Try to experiment with the things in your home.

Go to the project tree, open the "sounds" folder and import the sound. It should be converted to ogg and mp4 on the fly.

After that, insert an "Audio" object.

Now, inside the "System.On Start of layout" event of your project, insert this line:

    Audio.Preload Sound <sound-file-name>

Do not add an extension. Construct will decide whether to use mp4 or ogg files, depending on the browser used by end-user. If your sound is my clic-clac.mp4 file, the action would be:

    Audio.Preload Sound "clic-clac"

This will preload the sound into the browser. This will allow the sound to be played just when we need it.

And, since we need it to play when a piece is drop in the right place, we will go to the right event to add it. Search for the action "Set group to mygroup". It would be at the very end of the last event (expand it if it is collapsed). Below it, add a sub-event:

    Audio on preloads complete => play "Clic-clac" tag "clic-clac"

Why do we use the tag? Try to play and you'll know. Do you hear some vibrating sound, some echo? The echo cames from the fact we are playing the sound each time you "snap" a piece. And, since you snap many pieces at the same time, the sound is played many times at once. To avoid it, we will refine the condition in our event:

Condition 1:

        Audio On Preloads complete

Condition 2:

       Audio.Tag "clic-clac" is playing (Inverted)

The second is an inverted condition. If you don't know how to invert conditions, you can do it by simply right-clicking on the condition and selecting "invert".


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