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:
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.
Cube Engine – 3D engine completely written in HTML5 without OpenGL.
3D and WEBGL Game Engines
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.
CubicVR 3D Engine – open-source 3D Engine with many cool examples. Just checkout this cubicvr demo.
PhiloGL – from SenchaLabs is a WebGL Framework for Data Visualization, Creative Coding and Game Development.
x3dom – a framework for integrating and manipulating X3D scenes as HTML5/DOM elements
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
Making a Speedy HTML5 Game
Building a tank shooting game with threejs, backbone, and GLSL
Detailed tutorial on building a Ping Pong Game with HTML5 Canvas and Sounds
Old Snake game on CSSDeck
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
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.
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.
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
Time Based Animations in HTML5
JS Animation Frameworks
Simple painting game with HTML5 canvas
HTML5 Gaming: Benchmarking Sprite Animations
HTML5 Gaming on the Mobile Web
Getting Started With HTML5 Game Development
15 best HTML5 game engines