HTML5 Game Engines and Frameworks
Image by Michel Rousseau
If you are creating HTML5 games, it makes a lot of sense to start out with some game engine or framework. The good news is that there are many free HTML5 game engines and frameworks out there, from very minimal to pretty complex. Below I will cover some of the most popular HTML5 game frameworks and I will also cover particle systems, game tutorials, examples, and demos. To start, I think it makes a lot of sense to take a step back and watch these slides on HTML5 game development.
So, let’s get right into the list of the best engines and frameworks for HTML5 games:
EnchantJS – is a HTML5/JavaScript Based Game Engine with many features like Object Direction, Asynchronous Processing, Plugin Expansion, and Visual Material. Guts Rodsavas has a great article on making a simple HTML5 game with Enchant.js.
Impact – a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers. Check out this car racing game built with Impact.
Crafty – JavaScript HTML5 Game Engine that is small in size but has great features like collision detection, sprite map support, and much more. Here is a good intro to Crafty
Pulse – 2d JavaScript Game and Graphics Engine with some cool demos.
Phaser – a light-weight 2D game framework for making HTML5 games for desktop and mobile browsers.
MelonJS – a lightweight HTML5 game engine with a great feature list.
LimeJS – HTML5 game framework for modern touchscreens and
desktop browsers. Pablo Farias Navarro has a great tutorial on building a game with limejs.
Isogenic Game Engine – a very advanced 2d and isometric HTML5 game engine. Check out their demos for the Angry Birds clone.
Cocos2d Game Engine – a 2D game/graphics engine based on cocos2d for iPhone but designed to run in the web browser.
PlayN – a cross-platform game abstraction library for writing games that compile to many different platforms (HTML5, iOS, Flash, etc). Chrome version of Angry Birds was written using PlayN.
Canvas Game Engine – minimal game engine with some cool examples.
Quintus – an easy and fun JavaScript HTML5 game engine for mobile, desktop and more.
Coquette – a micro framework for JavaScript games.
Greensock – awesome JavaScript animation framework.
Physics – a two-dimensional port into JavaScript of the popular Traer Physics Library from Processing.
Cube Engine – 3D engine completely written in HTML5 without OpenGL.
Phoria 3D – a JavaScript library for simple 3D graphics on a canvas 2D renderer (without WebGL).
Box2DJS – a JavaScript port of Box2D Physics Engine built on Prototype. There is a great tutorial on writing a game with Box2D from tutsplus. Personally, I prefer the jQuery version of Box2D. We also have the Box2DFlash port to javascript and boxbox, a fun and simple framework for making games with the box2d physics engine.
3D and WEBGL Game Engines
Babylon JS – JavaScript framework for building 3D games with HTML 5 and WebGL.
Goo Engine – uses the WebGL standard to utilize the graphics hardware to the max.
Gladius – a 3D game engine which includes an entity/component framework, WebGL graphics rendered with CubicVR.js, and 2D physics based on box2d.js.
Three.JS – a popular JavaScript 3D library with great documentation and awesome demos.
CubicVR 3D Engine – open-source 3D Engine with many cool examples. Just checkout this cubicvr demo.
GLGE – a javascript library intended to ease the use of WebGL
copperlicht – a fast WebGL JavaScript 3D Engine.
Gamma – a new Javascript library which can be used to create 2.5D platform games for a web browser using the power of HTML, JavaScript, CSS and WebGL.
PhiloGL – from SenchaLabs is a WebGL Framework for Data Visualization, Creative Coding and Game Development.
SceneJS – an open-source 3D engine for JavaScript which provides a JSON-based scene graph API on WebGL
curve3d – an open-source cross-browser 3D engine written in pure JavaScript.
C3DL – a Canvas 3D JavaScript library that will make it easier to write 3D applications using WebGL.
x3dom – a framework for integrating and manipulating X3D scenes as HTML5/DOM elements
Pre3d – a JavaScript 3d rendering engine
JS3D – a library which allows you to have interactive 3d objects on your website, such as the spinning cube at the top of the page.
I also really like the OSG.JS WebGL framework but I would not really call it a game framework. SpiderGL is pretty cool and I really liked these webgl samples.
Play Canvas – a professional 3D game engine and hosted platform. Just checkout their demo of Doom 3 Monsters dancing Gangnam Style.
voxeljs – an open source voxel game building toolkit for modern web browsers.
Pixi.js – 2D webGL and canvas renderer.
Game Tutorials and Examples
Build New Games has some great information on developing HTML5 games and if you are thinking about mobile, I definitely recommend reading their mobile game primer, DOM Sprites, and Particle Systems From the Ground Up. Andres Pagella also has a great article on particle systems in HTML5 Canvas. I also recommend reading about CSS Tricks for HTML5 Canvas Games, using texture atlasing, requestAnimationFrame, and optimizing your game loop.
If you are looking for complete tutorials on building games from scratch, I really liked this simple racing game tutorial and building a sea battle game with HTML5 APIs. I also highly recommend checking out these game development tutorial links from Game From Scratch. Finally, here is a great list ofHTML5 game tutorials from Bashookah. And, here is a list of more great HTML5 game tutorials:
Developing mobile games without UIWebView
Building a first person shooter game with webgl and three.js
Building a tank shooting game with threejs, backbone, and GLSL
Detailed tutorial on building a Ping Pong Game with HTML5 Canvas and Sounds
Easy-to-implement, customizable virtual game controller for HTML5 games
HTML5 snake game with source code walkthrough
Tiny Platformer game on HTML5 Canvas with source code
Final Thoughts
If you are building any of these games using NodeJS, I recommend checking out Pomelo, a fast, scalable game server framework for node.js. If you are looking for a platform to build and deploy your HTML5 Game, I recommend checking out StackMob, Fat Fractal, Parse, Kinvey or Turbulenz. Also, Turbulenz HTML5 game engine is now open sourced.
Finally, if you can’t find what you need in the list above, check out this website dedicated to various HTML5 game engines. You can also check out this impressive GitHub wiki page of HTML5 game engines.
Update:
I have mentioned box2dweb above but did not also include other physics engines like Cannon.js, JigLibJS, and Ammo.js so if you are interested in comparing physics engines I highly recommend this article from buildnewgames. The article does not mention Chipmunk-js and Verlet which are great physics engines written in JavaScript.
I have also recently stumbled on sparks.js which is a simple and fast JavaScript library for creating 3D particles. Also, Coquette is a micro framework for JavaScript games and EndGate is a game framework that is used to build powerful HTML5 games.
In terms of game tutorials, this is a great tutorial on how to build a simple HTML5 game with box2d. Here is another good one on loading large assets in modern html5 games. And this is a good html5 mobile gaming performance comparison.
I would keep my eyes on SterlingJS development, it looks promising. Also, Breakouts is a website that shows various implementations of the classic game Breakout in numerous different engines. It helps you decide which engine is best for your game.
Finally, I have recently stumbled on cgSceneGraph which is a powerful, cross-platform and very easy-to-use HTML5 canvas JavaScript framework.
External:
clay.io – HTML5 Game API for developers and centralized location to play HTML5 games for gamers
Game console browsers – showing level of support for HTML5, CSS3, and Acid3 across many TV and portable console browsers
Building a Game With JavaScript
Time Based Animations in HTML5
JS Animation Frameworks
15 JavaScript Animation Frameworks
Simple painting game with HTML5 canvas
Optimizing JavaScript Games
HTML5 Gaming: Benchmarking Sprite Animations
HTML5 Gaming on the Mobile Web
Getting Started With HTML5 Game Development
15 best HTML5 game engines
