The State of HTML5 Gaming

Browser based Games

Not that long ago, the idea of playing video games in your browser seemed like fantasy. Oh sure, we’ve had simple DOM card/board games and some Flash based games for quite a while (Elf Bowling anyone?) but nothing good built solely on HTML, CSS and JavaScript. Why not? Well, for one major reason, immature technology.

Today, that technology is no longer holding us back. Advances in WebGL and JavaScript performance have given us the ability to create rich and performant games for desktop and mobile. If you’ve always wanted to make a game, there’s no better time than today.

The easiest way to jump into JavaScript game development is to start with an engine. We are going to take a quick look at a few different ones that are available today and also a couple that are on the horizon.

Start your engines

If you take a look at the sheer number of JavaScript game engines available (20+ actively maintained) you are bound to find one you like. On the other hand, it’s easy to be overwhelmed by all of the choices. Like any framework choice, you should consider features, price, easy of use, and support. The kind of game you’d like to write will also influence your decision.

As far as features go, here are some important ones you should consider when choosing.

• Physics – Allows objects to react to collisions and forces like gravity
• Sound – Music and sound effects
• 2d / 3d / iso – Two dimensions, Three dimensions and Isometric
• Graphics      – Canvas (slower but more support), WebGL (hardware accelerated)
• Tooling – Level editors, graphics tools, etc.
• Price – $$$

Lucky for us, there are a number of well maintained engines that are respected within the community. Let’s take a quick look at a few of our favorites.

Atari – Arcade

CreateJS

CreateJS is actually a suite of JavaScript libraries for building games. It uses several modular frameworks, all of which can be used independently or swapped out for something different. There are regular framework updates and a few spritesheet (multiple images in one file) and graphics tools available but no level editor. Overall, CreateJS is easy to use, relatively lightweight and is backed by some big corporate sponsors like Adobe, Microsoft and Mozilla.

• Physics None built in but you could add 3rd party physics like Box2D
• Sound SoundJS Playback via HTML5, WebAudio and Flash
• 2d / iso / 3d 2d
• Graphics EaselJS and TweenJS via Canvas (WebGL is in beta)
• Tooling Asset loader – PreloadJS
• Price Free
• Examples
  • IonDrift
  • Atari Arcade

PhobosLab – Xibalba

Impact

ImpactJS is a full-fledged JavaScript game engine that targets both mobile and desktop browsers. Impact has all the basic necessities built in for creating a professional-looking HTML5 game. This is a powerful game engine that does many things right, however it’s often overlooked for its initial entry price and relatively slow release cycle.

• Physics Built in Box2D Physics Engine
• Sound Uses WebAudio (as of 1.24), fallback to HTML5 Audio
• 2d / iso / 3d 2D is the default renderer and a 1st party 2.5D (Doom-style 3D) plugin
• Graphics Canvas based renderer. 2.5D Plugin uses a WebGL renderer.
• Tooling Weltmeister level editor, Ejecta iOS wrapper and built in debug tools
• Price $99
• Examples
  • Rvrsit – Othello / Reversi
  • Xibalba – 2.5D FPS Shooter
  • More at impactjs.com/games

Modus Create – Holiday Game

Phaser

PhaserJS is a modern desktop and mobile JavaScript game framework. It uses bleeding edge web technologies and is rapidly evolving. It has all the basic necessities of a game framework as well as a rich plugin ecosystem (pathfinding, iso, particles and more). PhaserJS is the most well rounded package for building an HTML5 game due to its flexible architecture, performance and evolving maturity.

• Physics Ships with Arcade Physics, Ninja Physics, and p2.js physics. Box2D support is coming via a premium plugin.
• Sound Uses Web Audio with fallback to HTML5 Audio
• 2d / iso / 3d 2D is the default and Isometric third-party plugin
• Graphics WebGL and Canvas renderers (leverages pixi.js)
• Tooling Third party game editors and boilerplates
• Price Free
• Examples
  • Modus Create Holiday Game
  • Phaser Games List

The Future of HTML5 Gaming is AAA Engines…

Up until recently, high end game engines ran in the browser by using plugins like the Unity Web Player. Last fall (2013), Google announced plans to discontinue native code execution within Chrome. Without this NPAPI support, these plugin wont work. Fortunately, Unity has added a WebGL deployment option to their engine. Unreal games can also be deployed to the web by using a transpiler called emscripten. What this means is the Untiy and Unreal engines will be running completely within your browser by using WebGL and JavaScript ! So, what is emscripten again?

Emscripten

Simply put Emscripten is a C/C++ to JavaScript compiler. Emscripten implements most of SDL in its API and most importantly converts OpenGL code to WebGL code. The asm.js output allows the code to run at near native speed. While this does not sound like anything HTML5 Gaming specific; Emscripten is actually the cornerstone for the future of HTML5 Gaming. Many of todays popular video games are built using C/C++ and render their graphics using OpenGL, thus it is possible to convert them to run in browsers without any plugins. The following two multi-platform game engines leverage emscripten for their HTML5 support:

MadFinger Games – DeadTrigger 2

Unity 5 for WebGL

Given Google’s plans to drop NPAPI support in Chrome, Unity is making a bold move by planning a WebGL deployment option for its Unity 5 game engine. Unity is currently one of the most popular game engines behind indie games today. This will obviously replace their current Web Player plugin with an HTML5/JavaScript solution. They report that in some cases, WebGL runs as fast as native code.

This solution uses emscripten to compile the Unity runtime into asm.js. They also use a combination of in-house technology and emscripten to compile your C# and UnityScripts into JavaScript.

This means that you can soon expect to see the power of the Unity engine running in your browser, and not by using a plugin but with HTML5, WebGL and JavaScript.

UE4 Epic Soul Demo

Unreal Engine 4

Unreal Engine is an extremely powerful game development platform for building games ranging from casual 2D puzzlers to AAA next-gen console FPS. Unreal Engine is behind many of today’s largest and most popular games such as the Gears of War series, Borderlands 2, Mass Effect 3, Infinity Blade and many more. Unreal Engine 4 also brings the power of exporting to HTML5 browsers by leveraging emscripten.

In Conclusion

The state of HTML5 gaming today is exciting. Within a short time, we’ve grown from small time card games to WebGL powered, hardware accelerated 3D graphics. There are a large number of free and low priced game engines that offer great features and active communities for novice and amature developers. For professional developers, major AAA title engines are now offering WebGL/JavaScript deployment options.

If you’ve always wanted to try your hand at writing a game, then there has never been a better time. So, get out there and create something amazing …and when you do, come back here and tell us all about it.