Tuesday 25 March 2014

HTML5 Game Engine and Framework

HTML5 Game Engine and Framwork :

http://techslides.com/html5-game-engines-and-frameworks/

http://www.html5gamedevelopment.com/html5-engines 

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
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

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

HTML5 Game Development Guide

http://www.html5gamedevelopment.com/html5-engines

HTML5 Engines and JS framework:

Quintus Engine

The Quintus engine is a simple HTML5 game engine designed to be modular and lightweight, with a concise JavaScript-friendly syntax.
Read More...


Colbalt Calibur 3: Open-source Canvas+Node MMO

Colbalt Calibur 3 is an real-time-ish multi-player MMO that uses Canvas and Node.js. It's open source duel licensed under the BSD/GPL.
Read More...


DivSugar, a CSS-based 3D Graphics Engine

DivSugar is a CSS3 based 3D graphics engine. While it's not as performant as a WebGL might be for full games, the fact that it uses CSS3 means that it can easily be integrated into existing sites and be used for casual games.
Read More...


IvanK Lib: a WebGL based HTML5 engine

IvanK Lib is a HTML5 Engine inspired by Flash (the tag line is actually "Like Flash, but faster" that uses the power of GPU accelerated WebGL to render 2d graphics on the screen.
Read More...


J3D - Javscript / WebGL Engine

J3D is a relative newcomer on the WebGL 3D Javascript scene. J3D most interesting feature is that it provides a tool pathway from the popular Unity 3D into the engine. Check out the step-by-step tutorial for more details.
Read More...


GameMaker HTML5

Categories: Canvas, Commercial
GameMaker HTML5 is an HTML5 port of the commercial GameMaker game building system currently in open beta.
Read More...


RPG.js

Categories: Canvas, Open-source
RPG.js is a HTML5 Game Framework focused on building 2.5D Zelda Bitmap-based Role Playing Games.
Read More...


PhiloGl

Categories: Open-source, Top Pick, WebGL
WebGL framework for Data Visualization, Creative coding and Game Development
Read More...


Crafty.js

Categories: Canvas, Open-source, Top Pick
An open source beta JS Engine.
Read More...


Impact.js

Categories: Canvas, Commercial, Top Pick
A modern, well-supported commercial HTML5 games engine.
Read More...

2 comments: