Comparing Frameworks

To contrast the information posted before lets check the most used HTML5 Game frameworks:

##Frameworks

###Non free frameworks

Construct 2 The most popular framework according to HTML5gameengines.com. It has its own IDE, graphic level editor and it is extensible via plugin, also provides exportation to multiple platforms. It remembers to those types of frameworks that people who doesn’t know how to program can use to make a videogame. Its prices go from 100 euros (personal license) to 330 euros (Business license) and a free license for education or other non profit projects.

Impact Some years ago it seemed like a very popular solution with its level editor and cross-platform optimization but the fact that it is non free and that it hasn’t been updated for almost a year have made the presence of this framework in the community almost inexistent.

###Free frameworks

The are multiple way you can catalog game development framework, we will use the

rendering technology as graphics seem like the most basic and performance issue in our

games. Even thought some people might think that the are types of games, like old text- based games, that don’t need to worry about graphics you still need to render the text, and in some technologies is not as cheap, performance speaking, as people think.

####DOM

CraftyJS This is the framework I use at work. it’s the only one I’ve come across that allows DOM rendering (It also works with canvas). It uses the ECS (Entity Component System) model to program games, which is a very comfortable and extensible pattern. With this pattern every instanced object you have in your game will be an entity. Enti- ties can be formed mixing different components together. Giving you a way to reuse and structure your code.

With a very simple API it gives you almost all the functionalities needed to develop a 2D game. Particles are only allowed in canvas rendering mode and Physics are not implemented, only a Gravity component it’s available which is not enough for most cir- cumstances. As of this date (December 2015) my company has released an open plugin for MatterJS, a 2D physics engine written from a scratch in javascript. You can also use a couple ports of Box2D but their repositories have been abandoned for 3 years.

The biggest downside of this framework, aside from not having webGL rendering is the slow updating rate it has. Since July 2014 to June 2015 it has gone from 0.6.1 to 0.6.3. and its community, even though active, is pretty small compared to other frameworks.

####Canvas

stage.js gives you a DOM-like tree data model to make your game. It abstracts all canvas dirty work (game loop and rendering). It also has physics via different plugins (MaterJS, p2.js, PhysicsJS, sat.js). It’s a very simple framework to use, ideal for quick, simple games.

EaselJS is part of a suite library for HTML5 technologies know as CreateJS. Inside the library EaselJS take the role of simplifying canvas work. although it’s not game specific solution, the fact that you can use the other libraries of the suite (all related to game programming: tweening, sound and preloading resources), and the flash-like interface. Attract some developers that come from other environments.

####webGL

Kiwi.js is a WebGL rendering based framework that uses the ECS model. It relies on a tight but still small community that make multiple plugins and game blueprints, which are whole games on github featuring a certain genre.

Phaser is game engine based on PixiJS renderer which gives it WebGL support with canvas fallback. It has probably the biggest HTML5 game developing community as it’s founder also founded the html5gamedevs forum.It offers a lot of examples, 3 different Physics libraries and some awesome plugins (Although we will not be using them, as the are paid plugins). Appart from tutorials, Phaser developers release minibooks explaining the insides of the framework trying to get people to knoww more the tool and make the most of it.

One of phaser community more interesting projet is Mighty editor. An online game editor that lets you code , edit your scene graphically and preview your game.

Pandajs Another framework based on PixiJS renerer. Less known and smaller than Phaser, also includes a game editor called Bamboo. Its advantage is that it’s more lightweight than Phaser, who until recent versions has a monolithic structure.

Babylon is a webGL based 3D games framework. It has an interesting performance on system with good hardware. Also Microsoft has made some demos to promote their new browser, Microsoft Edge, and they seem quite interesting.

one appealing feature for starters is that it allows you to play with the framework on a playground domain, being able to download the code once your finished.

###Other

Some other frameworks may not be specifically made for HTML5 programming, but they produce games for the web.

Cocos 2Djs This framework is the HTML5 version of the C++ ultra famous Cocos-2D. It allows you to program in javascript and ditribute a all kinds of plaform, web and native. This is achived through to important pieces: Cocos2d-html5 and Cocos2d-x JSB.

Cocos2d-html5 is a full HTML5 game engine, rendering on WebGL and Canvas. This allows games to run in browsers.

Cocos2d-x JSB serves as a middle layer between javascript and C++ Cocos2D-x code. With it you can communicate beetwen both, allowing to target native platforms from javascript code.

Haxe is an open source toolkit used to build cross-platform tools. It includes a programming language, a cross-compiler and a library. With this tools and the set of framework and libraries for gaming development built around haxe you can program once and deploy to multiple platforms. Including web platforms.

Atomic is a new game engine in a very early stage that allows to program game with javascript as well as C++. It has a very promising editor and its 2D module is free to use. It also deploys to multiple platforms.

###The big guys

With the growth of HTML5 as a game programming language every one wants to be on board. This is the case of the next two engines. With a lot of experience on their backs, their working hard to deliver their product on WebGL based renderers.

Unity 3D The favorite engine of indie studios of the last years. It’s easy to learn and pretty powerful. A scene polished graphic scene, animation and audio editor with support for C# programming and a modified version of javascript.

With the popularity of Unity a really big community has formed around it, releasing lots of tutorials and learning material. A very good documentation and a spectacular asset store round up this product. Recently changing its license term have made viable for anyone to use all the power of this engine.

Unreal Engine 4 We could call this engine ”Bid daddy”. With its origin in the all- around the world known ”Unreal Tournament” game from the studios epic games, it is one of the most famous engines, used to make from casual to 3A games. The last version of the engine uses C++ for its programming language and it’s experimenting with WebGL rendering. It has a bigger learning curve than Unity but in exchange you get the power of a much deeper control of optimization, as it allows you to go down to assembly language if required.

##Comparative

After presenting all these engines lets see if they used what we have defined a game must have.

	Sprite	Loader	DOM	Canvas	webGL	Game Loop	Physics	Audio	Tween	User Input
Construct 2	yes	yes		yes	yes	yes	yes	yes	yes	yes
Impact	yes	yes		yes		yes	yes	yes		yes
CraftyJS	yes	yes	yes	yes	yes	yes		yes	yes	yes
stage.js	yes	yes		yes		yes			yes	yes
EaselJS	yes	yes		yes		yes		yes	yes	yes
Kiwi.js	yes	yes		yes	yes	yes	yes	yes	yes	yes
Phaser	yes	yes		yes	yes	yes	yes	yes	yes	yes
Pandajs	yes	yes		yes	yes	yes	yes	yes	yes	yes
Babylon	yes	yes			yes	yes	yes	yes		yes
Cocos 2Djs	yes	yes			yes	yes	yes	yes	yes	yes
Haxe	yes	yes		yes	yes	yes	yes	yes	yes	yes
Atomic	yes	yes			yes	yes	yes	yes	yes	yes
Unity 3D	yes	yes			yes	yes	yes	yes	yes	yes
Unreal Engine 4	yes	yes			yes	yes	yes	yes	yes	yes
Total	14	14	1	9	11	14	11	13	13	14

##Conclusion

As it can be observed most of the studied frameworks have all the characteristics we were looking for, it's normal as they were the most basic ones. To get a the fundamental, every feature that will have to be implemented for the game wraper are the ones present in 10 out of the 14 studied framework.

The selected are Sprite, Loader, webGL render, Game Loop, Physics, Audio, Tween and user Input. In the next chapter we will focus to study each on of them and try to resume a basic interface for each. Afterwards the architecture of the library will be discussed.