Making a jig-saw type puzzle in Hype


(Art Blumberg) #1

I have been asked to try and convert some interactive puzzles from Flash to HTML5 and of course, my first thought was to use Hype. Each puzzle may have up to 20 pieces (some less), where each piece needs to be able to be rotated (in 90 degree increments), and due to the non-symmetrical aspect of the pieces they may need to be flipped over. These elements are easy using Hype. Where I am running into trouble is making sure the user does not ‘drop’ a piece so that it overlaps another piece. If the pieces were pure rectangles, it would be simpler, but unfortunately, the pieces are anything but rectangular.
The top example is incorrect since the pieces overlap. The bottom example is a valid piece placement. Any advice or suggestions would be greatly appreciated.

(Jonathan Deutsch) #2

That looks like an interesting collision detection task. May I ask how you were previously doing it in Flash?

(Art Blumberg) #3

Unfortunately, I was not the person who created the original Flash version and that person has long since left the scene, taking the knowledge and code with him. I was asked to take a look at the conversion, since I am one of the few people associated with this (very small) company that understands programming.

To see the flash version, the URL is:

Any assistance would be greatly appreciated.


Many years ago, I had a Flash puzzle game on my website. If I’m remembering correctly, it was from the book “Macromedia Flash MX Game Design Demystified”.

It was a very good book!

I’m actually planning to launch a Jigsaw puzzle with Hype. Heh, well, it’s on the list of things to do. I imagine it’s going to be a fairly challenging project. Are you in a huge rush to solve this problem?

It seems that your main problem is that you want the shapes to be selectable when the image itself is selected – not an invisible bounding box rectangle – correct?

(Jonathan Deutsch) #5

It looks like the board has specific placements, and each piece has attributes on how it affects neighbor placements. I think this is simply a programming-heavy task to determine valid shape placement and puzzle completion.

The Hype v4 beta might help in making shapes though; feel free to sign up for it.