The 7 Best Game Development Libraries Build on JavaScript

Flash is currently still very popular, but I along with a lot of other people think HTML5 is the future. HTML5 aims to be truly cross platform and non proprietary and it’s gaining a lot of momentum. There are a lot of great HTML5 game tools popping up and browser support and mobile device support is improving rapidly month on month.

Originally published at www.browserstudios.com on February 18, 2014.

For the past month I have been looking over quite a few different JavaScript based game engines in order to develop my own game. I figured it would be neat to just write them down for you (here). But first of all, I looked at a couple different websites to get a glimpse of how many are out there. Here is an impressive list developed by NTT with over 60 different API’s, including 2D and 3D games: 66+ Open Source JavaScript Game Engine for Serious Developers

It took me awhile to understand a few of them in order to implement simple games. I assessed their examples, foundation, community and seriousness to see if I could find an engine suitable for what I am going to develop. Seriousness was measured solely on appearance on major website, such as CrunchBase. Those indicators provide insights into a vibrant and professional library most likely to advance on a frequent basis.

From the provided list, I found a few that really deserve to be mentioned. Since I am only researching for 2D, I limited my assessment to 2-D engines. However, the site includes several 3D engines and libraries as well, not suitable for me. The majority of game libraries are developed to make excellent us of the HTML5 canvas, which is available on Firefox, Chrome and IE 9.

I am fairly new to game programming and game engines. So I had a couple hick ups along my path to understand what a game engine should consist of. I consulted with a few people who build games and they made me focus on the following objectives. Some recommended to start with canvas, node.js, and Socket.IO to distribute actions between the users in a room — clearly not my approach since I am new to this world. However, there are a lot of resources available to get started and to prototype quickly with them.

Game Engines

So you are new to game development? Or do you already know the guts of a good library? Most game engines or libraries include core elements, such as sprite handling, user interaction, and a game core that performs a few specific actions. It all depends on what you are focusing on, some might develop another Angry Birds and will need functions that handle such things as gravity and bounce effects. Others will try to revive Day of the Tentacle and will only apply animations, interaction, and sound and their own logic. It all depends on your requirements and preferences.

Game Closure

Let’s start with Game Closure. The company secured $12M+ in funding (CrunchBase), which indicates a professional environment, an enthusiastic vision, and experienced engine developers. Game Closure is mobile first, and provides an extensive and clean documentation (Game Closure DevKit Documentation).

The look and feel of this engine seems rather geared towards developers who have a good plan to make high-revenue games. My best guess would be to start do your research first until you get to an advanced state where you can prove you have a better understanding of what you are talking about. This way you’ll probably be able to obtain support from their rather large team.

Game Closure works entirely with the HTML5 language that could run on web browsers, iPhones, Android phones, Android tablets and iPads. Now it offers a JavaScript game software development kit that runs on multiple devices and allows client-server code sharing information.

Games are written in HTML5, there was no need to download a plug-in to run them in a compliant browser such as Google Chrome. The game used the same code across platforms, so a developer didn’t have to do a different version for every new device. Users could send out simple web links to invite other players to join the game. All in all — well conceived.

It’s all about Cocos2D and Bananas

Cocos2D, which is at the very top of this list: Game Engine for HTML5 Canvas. Did you know you can make a Cocos2D game that runs on the iPhone, Mac, Android, and web all sharing the same exact code? You can do this with an amazing new Cocos2D technology called Cocos2D Javascript. It allows you to write your gameplay code once, and run it anywhere — with full native speed. This is a very complete set of functions, capable to provide everything you can imagine for 2-D world games.

Cocos2D to JavaScript Process

However, Cocos2D seems to be a bit difficult for me. I consider myself to be a decent JavaScript developer, but to develop code in Cocos has been quite a journey for me — not quite as intuitive as JavaScript. My conclusion, it is the most sophisticated language but not as straightforward and easy to grasp at the beginning. However, in case are looking for advanced Cocos2D tutorials check this out: iDevBlogADay articles.

Gogo Make Play

Next up is GMP or Gogo Make Play — GogoMakePlay.com. This API contains a very nice set of game functions. The tutorial and examples on the site are easy to understand, and it is geared mostly towards a JavaScript-like style of programming. Professional game developers will find GMP useful for making rapid prototypes during their game development cycle. Set up is quick, and changes can be viewed by anyone with a browser. GMP is great for making sprite-based, 2-D games, and it can easily power most retro-style arcade game designs. GMP is a small, fast, javascript game engine. The GMP javascript game engine is now licenced under GPLv2 and MIT licenses. However, GMP doesn’t seem to be very popular. It seems like the community isn’t around anymore. So maybe this isn’t the way to go anymore?

How about CraftyJS

I started fiddling with this Javascript gaming library called CraftyJS, which allows you to build simple video games using DOM or canvas elements (CraftyJS). It will help you get your games running in very short time as you dive into the guts of the engine. CraftyJS seems to be very intuitive, although sometimes you run into non-existent documentation but your frustration level will be mitigated through the vibrant community. CraftyJS is also very lightweight in terms of file size, weighing in at around 100kb. CraftyJS is a library with all of the core functions one would expect. It even includes methods for in-game revenue using PayPal.

So what is CraftyJS? It consists of structural elements such as components and entities. So if it’s not a background, it may just be an entity. A component specifies information that can be applied to one or a multiple of entities. It specifically permits the developer to attach as many callback functions to a specific event. Let’s put it this way, built-in components support sprites, physics and input-related components that make an entity “instantly” respond to specific keys on the keyboard.

An interesting aspect of the code is that the developers managed to provide a system where listeners’ of events and the function that triggers the events do not have to know each other nor of its existence. That is pretty darn slick and if you go to their website you’ll definitely be amazed about what could be done applying JavaScript for funny 2D games. However, an issue so far is that the documentation is rare and the examples are not at all up-to-date. One goof tutorial I found is located here.

Asteroids and ImpactJS

ImpactJS It’s built by Dominic Szablewski who has been active with it for nearly 3 years — he’s been very quick to respond and extremely helpful. The engine has an up-front cost of $99 and you won’t have to worry about licensing after that. ImpactJS isn’t mobile first but there’re still plenty of games working on mobile web by default, and Ejecta/CocoonJS to make it perform better. ImpactJS has the most active community of the three (Impact Forums).

Dominic Szablewski was commissioned by Google to make X-Type work across all html5 browsers. This example displays what ImpactJS is actually capable of. Also check out Creatures & Castles by Hiive. Andrew Rollings of Hiive has a created a blog so always keep an eye on his projects that use ImpactJS. Urban Warfare by Bazooka Joe is a great side scroller example. If you wanted to know about games that are available in iOS store. Creatures & Castles and Private Joe are retro / 8bit, top down, side scrollers, and RPG are the kinds that have been built with ImpactJS. Drop and Biolab Disaster also made with the framework. The one drawback or advantage, call it what you want, is that it has an online IDE, which needs a browser plugin to do game development.

Put some LimeJS into your Drink

LimeJS is an open-source platform for creating 2-D games. With LimeJS, you can choose whether you want HTML or Canvas rendering; this means that the game can be built as elements in the DOM, or using the canvas instead. It’s very simple to introduce changes, which can be done at the director or even layer level. The good news is LimeJS has added WebGL support, but there is more information about it on their site. The library has support for basic drawing, images and sprite objects interactions through event listeners.

An interesting approach is that LimeJS uses Google Closure, which provides an ability to define an inheritance structure. This doesn’t natively exist in JavaScript. Google Closure provides a class structure where we have the ability to define custom sprite objects. A custom sprite object is a class that inherits from Sprite or some other object.

LimeJS allows you to quickly create simple games that work regardless of the screen resolution of your device (laptop, phone, tv). You can deploy games through HTML5 supporting web browsers, or you can turn them into native mobile apps using Titanium or Phonegapp, and submit them to the various “app stores” out there.

LimeJS, as far as I know, does not include a ready to use collision system out-of-the-box. However LimeJs and Closure provide you with enough tools to create your own system. Every node in LimeJs has a method getBoundingBox() which returns a goog.math.Box that surrounds that node. You can use goog.math.Box.intersects(a, b) to check whether box A intersects with box B.

Another advantage is that Box2D is included with LimeJS and you can use it as you go along with your development. Some very sophisticated algorithms can be found from Box2dJS source or for example here.

Box2D to create awesome physics animations

One reason to use Box2D is that it has been used as the simulation engine for Angry birds, which requires a sound implementation. Box2D is and has been the 2D physics engine for many games; hence, it was ported over to ActionScript a while back. Some ambitious folks have taken advantage of the similarities between ActionScript and JavaScript and converted it. The fundamental concept of using a physics engine for a game you’re developing is that you can fall-back on a bullet-proof approximation of how real objects might interact in your implementation. Hence, Box2D’s sole purpose is to run the physics simulation and to allow you to concentrate on the game itself.

To this end a number of different Physics engines, both 2D and 3D have made their way to JavaScript and many of them port from other languages. Some work has also been done to convert directly from C++ to JavaScript using emscripten (box2d.js) but it applies a different API than box2dweb. However, Box2DWeb doesn’t come with its own documentation, but it somehow shares the same API as the Flash library it was converted from. That means you must go and seek for help using the Box2DFlash documentation.

A drawback is that the platform is not open to plugins or extensions, so you’ll be limited to engine/platform features provided by them, but they do have quite an extensive list of things. The licensing fee is per-year, which is somewhat of a drawback.

Check out Ansca Corona: They have an “Angry Birds” sample called “Ghosts vs. Monsters”, supposedly created in 36 hours. Corona runs on iOS and Android, with dev environments on Windows and MacOS. It is purely a 2D engine, there is no support for 3D. The physics package is Box2D. The dev language is Lua.

An Isometric View Combined with Node.JS

At Rocket, they are working on the Isogenic Game Engine, an HTML5 Isometric engine for the open web. Their game engine supports Canvas-based output and standard HTML element output using a simple flag. You can even mix and match the output on the same page so one viewport can render your game using canvas, and the other renders using HTML. Although this feature makes benchmarking output methods very easy, it also allows you target a wider audience than canvas alone, including older smart phones, low-powered netbooks and the dreaded Internet Explorer (possibly down to version 7).

The only differences in the output modes are that when designing your sprites, you cannot use animated gifs for Canvas or WebGL output so if you want to support all output methods, creating sprite sheets is the best solution because it is easy to use a sprite sheet with CSS, canvas drawImage and WebGL billboards.

The back-end of IGE is JavaScript code. There is no GUI to create a game as in Unity3D, although it is easy to use Tiled to create maps and then use them in IGE. The engine can be used for either client-side single-player games, in which case all code is delivered to the browser, or server-side multiplayer games, in which case the code is also run on the server with node.js.

I have seen people messing around with: multiplayer, box2d physics, collisions, keyboard control, animation, path finding, etc. Getting these things going is actually very easy, because the engine comes with a folder full of example games.

As mentioned before, IGE is quite impressive when it comes to its versatile and wide spread usage. If you ever thought about learning a server side language such as Node.JS — try IGE and you get to know two worlds. You can check out more information here: http://www.isogenicengine.com.

Let’s talk KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that enables animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. Basically almost the same features as LimeJS and has really rich and clear tutorials and examples.

KineticJS works by using multiple canvas elements, one per layer, and stacking them. It excels at making canvas something it doesn’t support as an interactive medium. It has a friendly API (API functions do what they’re called and are largely guessable), and almost everything is done by instantiating methods of the base Kinetic object. “It does fewer things but does them better”. Paths are first-class citizen Shapes, like any other Shape. Having said this, KineticJS is not perfect by any means and there have been a few times when I’ve had to dive into the source code. But the light weight of the library makes it a good option to start developing.

Brief overview to CreateJS, EaselJS and Propulsion

If you want to stick to ActionScript or the Flash way of coding, you have to go with either of those mentioned in the header. They are still maturing but in contrast to LimeJS, solid. You can convert your flash art file (.fla/ swf) into JavaScript file and images folder using createjs tool in CS 6. Thus, this keeps the workflow exactly the same for artists who work on flash and yet allows to build a html5 game. (You’ll find some insights here)

Propulsion: I was impressed with Propulsion — HTML5 Canvas JavaScript Game Development Framework It has a very complete set of functions, including lots of useful sound, math, and physics objects. The API documentation guide is well conceived and easy to grasp. However, Propulsion is lacking a good tutorial, though! The website incorporates a demo that you can download, but it is not quite the same as if you’d have a step-by-step how-to for setting up sprites and the initial game loop.

Propulsion uses a loop to execute game logic. The number of times this loop is run per second is controlled by loop.rate. One iteration of the loop is called a tick.
During every tick, all registered objects have some of their methods invoked by Propulsion. These methods, of course, can come from the prototype chain. It is during these method invocations that game logic, drawing, etc. are executed.
Objects can be registered with the loop using the loop.register function. Objects can be removed from the loop using the loop.remove function. The object can be created by any means; there is no required pattern for object creation. Source: From www.propulsionjs.com — January 28, 2012 11:30 AM

Conlusion

Now it’s time to put everything together. As of 2013, here is my personal recommendation as to which technology to choose based on your situation:

For game development, I’d recommend to go with ImpactJS mainly because handling collision is a breeze with Impact. For Interactive animations (that require click/drag of individual objects), I choose between EaselJS, KineticJS or oCanvas depending on what features are required. For eg. oCanvas is the easiest to learn & use, but if you need to implement drag bounds; go with KineticJS.

If your application is 2d, is fairly simple, needs to be fast, and it doesn’t need mouse or touch event handlers, I would recommend that you write a native HTML5 canvas app. If your application is 2d, is fairly complex, needs to be fast, and it needs mouse or touch event handlers, I would recommend that you choose KineticJS or EaselJS.

If you’re just starting with Canvas, I’d suggest going through the tutorials & examples on KineticJS before you look at EaselJS as I’ve seen that JavaScript developers have found that encouraging & very easy to grasp and can then easily migrate to other libraries like easel which don’t seem have a lot of good tutorials. EaselJS probably makes a lot of sense if you have a Flash/ActionScript background. Also, it seems game-focused for what I was searching for.

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touch screens and desktop browsers. An idea of mine is it to build a multiplayer arena using Closure. Closure has a consistent package called goog.net, which contains a lot of classes to work with ajax and remote http requests.

One of the most challenging components of a game is collision detection and its response. If all you need is to calculate when a couple of rectangles overlap, it’s not a big deal, but for games that involve lots of irregularly shaped sprites moving and reacting to each other realistically, you’ll want to use a tool like Box2D to get the job done. Nevertheless, Box2D’s sole purpose is to do physics simulation in order to handle object dynamics and interactions so that you may concentrate on the game itself.

And last but not least, you’ll probably want to pull your game out of its current location on the page and absolutely position it to take up the full size of the screen, hiding anything else on the page. Many HTML5 game engines will do this for you, e.g. such as Impact, Crafty etc.

I think ImpactJS gives me the best balance between features, performance and learning curve for developers. There are quite a few good libraries which seem to be strong in different areas, so I guess the choice of library at least for now depends on what you’re trying to achieve.

If you found this information useful please add a comment and tell me what you are currently working on. We are always looking for new inspirations! Our work usually comprises 2D games which can be developed with LimeJS and CraftyJS. We are moving towards RPG but we are still in beta with the prototype.

Additional Resources:

http://www.html5canvastutorials.com/articles/web-graphics-trends-in-2013/

Originally published at www.browserstudios.com on February 18, 2014.