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.
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.
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.
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.
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
Gogo Make Play
How about CraftyJS
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.
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.
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
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.
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 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
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
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.
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.