Browser games are, in the vast majority, developed using Flash technology, however more and more often we come across HTML5 productions. What is the reason behind the growing popularity of this technology, and why are game creators so willing to sacrifice Flash for HTML5?
The game's foundation is Canvas on which – colloquially speaking – we draw; this particular element makes programming graphics displays possible. Additionally, thanks to WebGL, Canvas allows us to draw graphics that are hardware accelerated by GPU. Furthermore, WebGL that is based on OpenGL ES 2.0 providing two and three dimensional graphics interfaces. Thanks to all those possibilities, HTML5 games can be very efficient, playable, and at the same time, really impressive.
Why not Flash?
Perceptive readers will rightly notice that similar possibilities are offered by… Flash. In that case why consider using HTML5 for game creation? Juxtaposition of both technologies' pros and cons presented below will help to answer that question.
- works directly in browser without any additional plugins;
- one code base allows running games on any device that supports HTML5;
- allows creating games for both mobile devices and PCs;
- vast, dynamically expanding society;
- game doesn’t have to be installed on device;
- provides possibility to create multiplayer games using, for example, WebSockets technology for client-server communication.
- lack or only partial WebGL support on mobile devices;
- still incomplete specification;
- low efficiency on mobile devices if optimization not carried out.
- mature technology, heavy impact placed on displaying graphics;
- a large number of tools support application creation;
- Flash Player plugin that allows running a game anywhere it is available;
- AIR technology, wrapping applications into native applications for mobile devices and PC.
- Flash plugin: weak support on mobile devices, iOS doesn't support Flash;
- low efficiency of AIR on mobile devices.
So, Flash is not as scary as it may seem?
Flash is perfectly suited for browser game development, however, satisfactory efficiency is only assured on personal computers. This technology doesn’t offer anything beyond what is already possible with HTML5, plus it requires having its plugin installed in the browser.
Despite constant development and evolution, Flash is unlikely to stay in pole position on a browser and mobile game creation level. It will more likely be one of those technologies which occasionally appears in WWW sites.
During the GDC 2014 Unity Technology Conference, the company which develops popular engines for 3D and 2D games presented their new version. In Unity 5, a Unity Player plugin which allows running in-browser games developed in that engine has been replaced with an HTML5 exporter using WebGL.
Furthermore Epic Games has been working on its Unreal Engine migration to HTML5 for a long time. Its latest version Unreal Engine 4 provides support for this technology as well, something which is similar to GameMaker, a popular editor and engine used for 2D games development.
Pixi.js | Phaser | Construct 2 | ImpactJS | Babylon | Turbulenz
More and more HTML5 games appear on the market and their authors try to optimize them for as many devices and platforms as possible. HTML5 game can be played not only on PC, Mac and devices based on Android or iOS, but also on Firefox OS, Tizen and all the others that support HTML5 standard. This significantly increases number of potential customers.
Let’s create a game!
For graphics rendering we are using Pixi.js, a 2D graphics renderer on a Canvas element, working with WebGL support, thanks to which, graphics hardware acceleration is possible. On devices for which WebGL is not available, renderer uses a canvas element only and produces the same behavior as when using WebGL.
Pixi.js – 2D webGL renderer with canvas fallback
More complex games require physics engines to be implemented. For that, we are using proven and more advanced solutions such as Box2D.
Special effects in games are created with so called “particles”. Pixi delivers a particles rendering engine, thanks to which we can enrich our games with visual effects.
Animations in 2D games are usually frame-based. There are also tools, however, that allow creating skeleton animations. In the second case we always use Spine editor.
During the games development process we also use a lot of other tools. Occasionally we employ Phaser framework which uses Pixi for graphics rendering. It also has many facilities and out-of-the-box functions which are perfectly suitable for development of simple games and prototyping.
When creating games intended for mobile devices, it is worth considering container usage that will “wrap” our game into native applications. One such tool is CocoonJS. It transforms our HTML5 game into a native application for a particular mobile platform, thanks to which we gain WebGL support, faster graphics rendering on Canvas, and access to hardware components like GPS, accelerometer, etc.
One of our games, Skytte, was fully developed in HTML5. In this case we didn’t use any existing engines, but decided to write our own which provided all the functionalities that we required: collisions detection, particles system, keyboard support, graphics rendering, etc.
Tools that are presented in this article are only small part of the wide variety available online. A huge database of ready-to-go solutions, libraries, engines and frameworks which can be used for HTML5 games development are easy to find. We believe that HTML5 will become a strong platform and its functionalities will allow us to create really exciting, innovative productions which will be able to be played directly via the browser.
If you are interested in HTML5 games development, make sure to also check out some of these additional resources for more information: