Game’s foundation is Canvas, on which – colloquially speaking – we draw: this particular element makes programming of graphics display possible. Additionally, thanks to WebGL, Canvas allows drawing graphics that are hardware accelerated by GPU. Furthermore WebGL that is based on OpenGL ES 2.0 provides two and three dimensional graphics interface. Thanks to all those possibilities HTML5 games can be very efficient, playable and in the same tame 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 game on any device that supports HTML5;
· allows creating games both for mobile devices and PC;
· vast, dynamically expanding community;
· 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 was not conducted.
- mature technology, heavy impact placed on displaying graphics;
· a large number of tools that support application creation;
· Flash Player plugin that allows running a game in any place, where it is available;
· AIR technology, wrapping application into native application for mobile devices and PC.
· Flash plugin: weak support on mobile devices , iOS – lack of support;
· low efficiency of AIR on mobile devices.
Flash is not as scary as it might seem?
Flash is perfectly suited for browser games development, however it assures reaching satisfying efficiency only on personal computers. This technology doesn’t offer anything beyond what is possible to achieve with HTML5, plus it requires having its plugin installed in the browser.
Despite constant development and evolution, it should not be expected that Flash will stay on top position in the area of browser and mobile games creation. It will rather be one of technologies occasionally appearing in WWW sites.
During GDC 2014 Unity Technology conference, company developing popular engine for 3D and 2D games presented its new version. In Unity 5, Unity Player plugin, which allows running in browser games developed in that engine, has been replaced with HTML5 exporter using WebGL.
Furthermore Epic Games company has been working on its Unreal Engine migration to HTML5 for a long time. Its latest version (4) provides support for this technology as well, similarly as GameMaker, popular editor and engine used for 2D games development.
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, 2D graphics renderer on Canvas element, working with WebGL support, thanks to which graphics hardware acceleration is possible. On devices, for which WebGL is not available, renderer uses canvas element only and provides same behavior as when using WebGL.
More complex games require physics engine to be implemented. In that purpose we are using proven and more advanced solutions, such as Box2D.
Special effects in games are created with so called “particles”. Pixi delivers also particles rendering engine, thanks to which we can enrich our games in visual effects.
Animations in 2D games are usually frame-based. There are however also tools that allow creating skeleton animations. In the second case we always use Spine editor.
During 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 game meant for mobile devices, it is worth to consider container usage that will “wrap” our game into native application. One of such tools is CocoonJS. It transforms our HTML5 game into native application for particular mobile platform, thanks to which we gain WebGL support, faster graphics rendering on Canvas element and, among others, access to hardware components like GPS, accelerometer, etc.
Play sample HTML5 game: Skytte
One of our games, Skytte, was developed fully in HTML5. In this case we didn’t use any of 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 out of many available online. Huge base of ready solutions, libraries, engines and frameworks are currently available, which can be used for HTML5 games development. We believe that HTML5 will become strong platform and its functionalities will allow creating really huge productions, in which it will be possible to play via browser.
If you are interested in HTML5 games development, make sure to also check some of the additional resources that contain more information: