Currently, the markup language, HTML5 is the new favourite tool of the developers to structure and present their content for the World Wide Web. This language is gaining popularity not only among the web developers but also the game developers. One of the reasons behind its increasing popularity is the amazing user experience that it provides. Few of the famous games ported to HTML5 are Angry Birds and Bejewled.

These examples make one wonder: which feature of HTML5 is attracting these developers towards it? The answer is: Canvas Element! HTML5 has introduced a new element named Canvas element that can be used to draw anything from shapes to images. (To learn more about canvas element, click here)

But game development is not only about drawing shapes and images, it involves a lot of other things as well e.g. animations, sprites and physics etc. One way is to write your own implementations on top of the already existing canvas API to be able to use all those other things or the other way is to use the already developed frameworks. These frameworks can handle most of the needs of a game developer and there are a lot of frameworks available in the market to cater to these demands.

Some of the most popular game engines are:
1. ImpactJS
2. EaselJS
3. Crafty
4. Three.js
5. Turbulence

ImpactJS is one of the most popular game engines with a big community and lots of tutorials and other resources available on the internet. ImpactJS developers have also developed Ejecta Framework for its ImpactJS game engine which gives native performance on iOS. The only downside of this game engine is that it is a commercial engine with a license fee of $99 at the time of writing of this article.

Another alternative is EaselJS. It comes with a MIT license and is a part of createJS suite which also contains TweenJS for tweening animations, SoundJS for playing sounds and PreloadJS for preloading your assets. It’s easy to learn and has good documentation with good number of tutorials available on the internet. As it’s inspired by flash/AS3, flash develpers will find it easier to adapt. It has one downside that it doesn’t use webGL which client GPU chip to accelerate the rendering.

But if you want webGL rendering to fasten up your game performance, than Turbulenz can be beneficial. It has a very polished API and focuses on creating high quality HTML5 games. Also contrary to the famous belief that HTML5 can only be used to build 2D games, three.js will break it down. Powered by webGL, three.js uses your GPU acceleration to provide you high performance for your 3d games.

One more game engine worth mentioning is Crafty. Instead of following the traditional approach of classes and objects, this game engine follows an approach of Entities and components where you can create entities using pre-defined entities or by using your own defined components.

You can also visit: http://html5gameengine.com/ to check all other game engines available.

Multiplayer Gaming in HTML5

Now when you know that you can create games in HTML5, so why not go ahead and create a multiplayer game. Yes! You can even do that in HTML5. It supports websockets which can be used to develop multiplayer games.

Here at Shephertz, we have ported our AppWarp SDK and App42 SDK on HTML5 platform to make the development of multiplayer games on it a smooth task without having a need to maintain a server.

You can use Shephertz’s AppWARP SDK to create real time multiplayer games and App42 SDK to implement leaderboards and user service in your game.

It would be great to hear the views from the readers of this blog. In case you have any more questions, please feel free to reach out to us at support@shephertz.com.

XTXD8DZJYWAU