Ever since I completed my (mandatory) 9 month military service on the 4 of November 2010, I was planning on creating a game that would mock it a little. I was aiming for a simple Tower Defence game and my platform of choice was Silverlight.
Only, there were two problems. First, I was busy at the time; there was no time (or mood) for side projects. Second, I had no experience with Silverlight at the time. Had I proceeded, there would be a third problem, the fact that Silverlight never enjoyed any real recognition and then it was repurprosed for the Windows Phone Platform. Plus, I’ve never worked with Flash (which would be the logical choice) so not only I’d have to spend time learning it, it would also cost me quite a bunch.
Fast forward one year and a half later. The other day, I came across this: http://www.cuttherope.ie/ which is a port of the famous Cut the Rope game to Javascript and HTML5 canvas. Well well well, look at that. Excellent framerate, nice UX and good compatibility (IE, Firefox, Chrome and Opera – no Safari though).
Seeing this, I’ve decided to have another look at my game idea (yeah, I still haven’t learned Flash, nor I have the money to buy it). While I am not new to the concept of 2D game creation and its requirements (I made a simple platformer 10-15 years ago in DOS) I had completely no idea about working with the Canvas element.
Looking around the internet, I found a rather comprehensive list of JS game engines, all with different levels of features, complexity, licensing and documentation. Thing is, I did encounter a few problems with almost every engine out there. Since the type of the game I was planning was a Tower Defence game, most of the baggage that comes with these libraries is not really useful for such a game. Combine this with the rather primitive documentation on most libraries, the learning curve is very gradual (that’s bad).
Here are some game engines that I found particularly interesting:
- Game.js This is an example of a small & solid engine which has rather tight coupling. It’s worth looking at, but you can also have a look at…
- Crafty has an interesting feature, in that it’s component based. Adding features (such as collision detection, movement etc) is as simple as attaching a component to it. It works very nice, but the documentation/tutorials are a bit anemic, plus it doesn’t support layers which I kinda like to have.
- The Render Engine is a monster of a game engine. However, due to its complexity and the lack of proper documentation and tutorials I find it kinda hard to get into. I will definitely keep an eye on this one.
- Melon.Js is a game engine that’s almost exclusively designed for platform games. Plus it has some nifty features, such as that you can design a whole level using an external editor (Tile) plus that it supports viewport scrolling out of the box. Since I’m planning on creating a platformer for my next game, I’m seriously considering using this one.
In the end, I decided to do it on my own and start from scratch. Well, not completely that is. I came across Kinetic.JS which offers some few but useful features. Specifically, not only it supports layers, but it’s designed to work with double buffering under the hood (which drastically increases performance). It also handles the drawing of objects for you.
So far, I created a Sprite class that subclasses the Shape class of Kinetic.js that represents a… shape object with which you can interact. I added some basic sprite map & graphical state support and it works ok so far. I’ve tested rendering 210 32×48 sprites with 4 levels of animation each in a 800×480 window with no performance issues (with the exception of Firefox which has an issue with mouseover – I have to look deeper into it). As soon as I make progress with the game, I’ll post again.
I am far from an expert with Javascript and I’m sure that the end result could be improved. In any case, when the game is posted I will post it under a MIT license with sufficient documentation.
