The HTML5 canvas element opened up a whole new avenue for games programming. Using some JavaScript and 2D graphics, anybody could build games that run in any web browser. The use of sprites and tileable patterns, HTML5 games – as they became to be known – put them on the same footing as the classic arcade games of the late 70s and early 80s. Case in point, here’s an HTML5 implementation of Space Invaders on codepen that looks pretty darned good! That being said, building a game from scratch is not always the best approach. Working with a Game Engine framework will speed up development time and allow you to do things that would be quite difficult otherwise. With so many good gaming engines to choose from, picking one can be a real challenge. To help narrow down the field, I’ve selected some of the favorites amongst HTML5 game developers.
ImpactJS
First launched in 2010, ImpactJS consistently ranks at the top of HTML5 Canvas Game Engine rankings. ImpactJS is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers. ImpactJS also comes with the Ejecta Framework, which helps you to publish games to iOS platforms. Ejecta takes your JavaScript source code, executes it and directly renders your game via OpenGL onto the screen. This bypasses the iPhone’s Mobile Safari completely and thus avoids some problems that this browser still has. Your Impact games will be truly indistinguishable from those written in native Objective-C. Impact comes with the Weltmeister Level Editor that lets you create your game worlds. All your entities (enemies, NPCs, triggers etc.) can be instantly used in Weltmeister and you can connect entities with each other to create logic chains – i.e. find button, open door. An easy to use Debug Menu helps you find performance bottlenecks and see what exactly is going on in your game at any time. ImpactJS is not free, and costs $99 USD (Bitcoin accepted!). But, with a massive community and extensive documentation on game creation with the engine, most consider it money well spent.
PixiJS
Although a relative newcomer (2013), PixiJS’s major selling point is speed. They claim to be the fastest 2D rendering engine today. Mainly WebGL-based, PixiJS uses Canvas as a fallback in older browsers. The framework is open source, but they do accept donations. Now at version 4, PixiJS packs a lot of features, including:
- ADVANCED TEXT RENDERING
- TINTING & BLENDING MODES
- SPRITE SHEET SUPPORT
- EASY API
- WEBGL FILTERS
- MULTI TOUCH INTERACTIVITY
PixiJS is the framework of choice for many huge commercial enterprises, so you can be sure that they are doing something right.
Phaser
Phaser is another open source framework for Canvas and WebGL games development that consistently receives high praises from both newbies and by skilled web games developers alike. The Phaser Sandbox allows you to code games in your browser without having to download or install anything. The powerful editor features Phaser code assists, JavaScript snippets and lots of the features you’ve come to love in editors like Sublime and Brackets. The website has got a lot of learning resources for you, including documentation, books, videos and stacks of 3rd party tutorials, with new content being added daily. The Phaser community has a lot of contributors and you can check out many other developers’ products and learn from live demos. Also, there are plenty of plugins that you can add on such as Virtual Joystick, Complex particle effects, Advanced Physics, etc. All plugins are for sale, but the prices are low all-around.
You should definitely consider Phaser if you are a newbie to Game Development and want to benefit from an easy framework and solid community.
Construct 2
Developed by Scirra Ltd., Construct 2 is an HTML5 game creator designed specifically for 2D games. It allows anyone to build games without coding using a WYSIWYG editor with drag and drop functionality. One of the distinguishing features of Construct 2 is its Ribbon interface: not unlike that of Microsoft Office products, it provides access to a wide variety of tools. It also employs an Event System whereby events are created by selecting possible conditions and actions from an organized list. Behaviors work as pre-packaged functions that you can assign to objects and reuse whenever needed. They provide an instant way to add capabilities to objects, thus saving time on development. Behaviors include movements such as directions, platform, and car, advanced features like physics and pathfinding, as well as useful utilities like fade, flash, wrap, pin and drag & drop. Although most behaviors can be replicated with events, behaviors are faster to use. Construct 2 comes in a free or commercial edition. The latter allows you to make multi-player games and publish to all of the major app stores. Licenses start at $129.99 USD for a single user.
Conclusion
Whether open source or commercially licensed, all of the above HTML5 game engines are completely responsive, highly customizable and easy to implement. But don’t limit your search to those mentioned here. There are plenty of other good choices out there and more of them are popping up every day.
