A jigsaw puzzle

Hi!

I've done a small jigsaw puzzle using Construct. I want to show it here:

Game: apagada.com/varios/jigsawpuzzle

Source: apagada.com/varios/jigsawpuzzle/puzzle12x9.capx

The source allows adding additional images by changing the XML. The change can be done in the server (without re-compiling), but to do so you have to touch the "offline.appcache" file (I use to change the version comment, but adding some text at the end could work).

I have used the unofficial "canvas" plugin. Otherwise I had put the file in the arcade.

Hi!!

I like a lot your example, and I want to use it for my class (I'm teacher)

But when I try to import it, I can make it run.

I try desktop, Web, but nothing.

Do you know why this happen?

Thanks a lot. Great Work!!

Greetings from Mexico

Hi!

I'm also a teacher, de hecho un profesor de lengua espa?ola (but I'll continue this thread in English since that's the language of these forums).

This app needs r0j0hound's "canvas" plugin: http://www.scirra.com/forum/plugin-canvas_topic46006.html

Also, it is likely to have more than 100 events (so a registered version of construct2 is needed). If it is the case, tell me and I'll make a smaller version for you.

Send me a PM if you want to continue this conversation in Spanish.

Good one!

Also I speak spanish after all, your project impressed me, I would love to see smaller version.

Hi Joannes!

I'm glad you liked this game!

I have checked the (slightly smaller) version of this app I put on github.com/jgmy/jigsawpuzzle_phonegap and it is a bit smaller.

In case you don't feel comfortable using GIT (and don't want to download the big 12Mb full source with many redundant files), download this:

apagada.com/varios/JigsawPuzzlePhone

I also have some older versions in my web, just in case you only want to know how the puzzle is made.

The algorithm is simple:

-First I divide an image in pieces. Each piece has a central part (its size is the size of an average puzzle piece center part) and a margin (its size is the maximum size of the puzzle piece). Pieces "overlap" at the margins.

-I use the "canvas" plugin to mask the puzzle piece, so "holes" are created into it (and most margin area removed).

-I also put instance variables marking the logical X and Y of the piece.

-A unique group id is also given to each piece.

-I use "drag" instead of "click" or "touch" for all, so I don't need cheking whether mouse or touch are being used.

-When one piece is "drag", all pieces of the same group are pinned to it.

-When the piece is "drop", all pieces of the piece's group are checked against all desired neighbours (i.e. piece (4,7) looks for (3,7), (4,8)...). If the desired neighbour is where it should be (within a small range of 5 pixels), the piece is aligned and added to the group, so it seems to "snap".

Hope you understand the above text. I could try to make a video, but I don't have much time to do it.

I tried this in Google Chrome, and it messes up the lay-out of your game I think, since the timer, option button, etc. were scattered all over the place along with the jigsaw pieces.

Looks like a solid game, but it runs quite slow in my browser for some reason.

I hope this was helpful and keep up the good work!

Sorry for the late response. I've been busy this month.

I'm sorry it didn't work for you, Peralta (another Spanish speaker?). The game uses WebGL bur I've run it successfully in a single-core Pentium (I think it was a Pentium IV, but I'm unsure). I tested the game mainly in Chrome, and I have it in the chrome store, indeed. But there exist a chance I left a bug on one of the downloadable versions.

Which version did you test?

Game: apagada.com/varios/jigsawpuzzle

Source: apagada.com/varios/jigsawpuzzle/puzzle12x9.capx

Phone source: apagada.com/varios/JigsawPuzzlePhone

GIT phone source: github.com/jgmy/jigsawpuzzle_phonegap

GIT phone source is the latest, but there exist a chance I left a bug on it. Also, don't use the "phonegap" version of the GIT phone source, use the cocoonjs instead.

ALSO if you are exporting it from source, don't minify source. This project don't work when source is minified.

dear arcalaus my name is nik and i am 10 years old

i want to learn how to make this jigsaw puzzle game so requesting you to make a tutorial for your game because it is quite hard for me to understand it without help

Dear Nikandin,

I imagine you are talking about a tutorial on how to make a game like this (not about how to play the game).

Could you wait until christmas? I will be very busy at least until december, 1st, and I will be unable to make a video tutorial.

I could try to make a text tutorial, but, as I don't speak english fluently, I'm not sure you'll understand me.

Here is a small text tutorial. This is very theorethical for a 10-year-old kid, but maybe your parent could help you understand it.

Making a jigsaw puzzle - Part one: concept.

I'll try to make a video tutorial in Christmas.