For last few month, Elise and I have been talking about the prospect of setting up small jigsaw puzzle games on her website. Originally we’d been talking about doing it in flash because our point and click game actually has a jigsaw like puzzle in it, but we weren’t keen of the idea that the player was limited to a flash player view. We wanted to use the entire browser page, and doing that with flash didn’t really seem like a good idea.
One of the biggest hurdles for me was avoiding low level programming and finding the right framework to build the game in. So I started with PaperJS since the tutorial was using it. It was somewhere to start at least.
I did a little more searching and I ended up coming across KineticJS. It felt well structured and relative straight forward to use, except I couldn’t quite figure out how to mask a bitmap with a vector path. Or at least to got to the point where I couldn’t be assed writing ‘config’ array structures into things and cutting and pasting non-kineticJS code into it. It was getting a little to low level to quickly, so I moved on. Also it required a script type tag called “deferred” and needed to be called AFTER canvas, rather then in the HTML header. Once again, out of the box I was a bit put off.
The above two also had what I would say, ‘fair’ documentation. Not exactly something that really helps you understand it completely but it was there kind of documentation. But this bring me to one of my rules. If I have to Google someone else’s blog to find out some stuff that should be in the documentation, it puts me off. Its easier to find the frameworks website and it’s documentation then it is to find that random article that you forgot to bookmark or is buried 8 menus deep in your bookmark folder only to find that the page itself has moved else where or the site is down (for-good). And if the documentation is a bit half ass, your only making people want to leave.
After a bit more searching I came across EaselJS. Jackpot goldmine. I felt instantly at home with EaselJS mainly because it uses a very similar design to core flash objects using Display Objects, Containers, Shapes and Bitmaps. The documentation also made it a million times easier to figure out what was possible without having to dig for it in random holes. It even has additional frameworks for various other things you might want to do, such a PreloadJS and SoundJS just to name a few. In other words, a little less screwing around. Also, no crazy random script ‘type’ tags.
The result of this weekend is the picture below. A basic puzzle that you can move pieces around and snap them into place, and move around each individual grouping of pieces and snap them together into place. There is still a few things that need to be done and some features that will probably be added before its completely useful, but it’s a good start! The puzzle picture is also one of Elise’s drawing. You can check out her works here.
More posts hopefully in coming weekends. And maybe even some code!