The road to a production-quality HTML5 game on iOS

About a year ago, Geoff and I were both senior frontend engineers working for
Raptr.
As software programmers by trade and hardcore gamers at heart,
we were anxious to test out this new "HTML5" buzzword to see how well it could handle game development.
BoingBoing happened to be running a
Games Inspired by Music contest,
to which we submitted our first HTML5 game, an early version of
Onslaught! Arena.

The game that we entered to
the contest
was a quick two-week hack put together in our spare time,
written in JavaScript and Canvas and designed to run reasonably well in "modern browsers."
Making the game was extremely fast and easy, using Google Chrome and its
great developer tools.
As expected, the primary issues we ran into were largely performance-related.
About mid-way through development, however, Chrome "unleashed"
GPU acceleration
on the web, which shot our FPS (frames per second)
from ~30 to something more like ~200 on tested desktop computers and laptops.
(Basically the game ran about an order of magnitude faster, as browsers were improving by leaps and bounds.)
Like other developers,
we also had a cavalcade of nasty audio issues, ranging from latency, to format incompatiblity and stuttering playback.
We ended up shipping with SoundManager 2
(a JavaScript-to-flash audio API), though we eventually did utilize HTML5's Audio tag.

Despite being a featured game to launch with a brand new offering from a heavyweight like Google,
sales were lackluster
(as pointed out by TechCrunch).
Given that part of HTML5's intended appeal is its portability,
we thought it was time to give it a real-world test.
This includes some successes, such as a
release in the Mac App Store,
but we found that our primary problem was still slow performance, particularly
on iOS
(I believe that our best benchmark was ~10 FPS, the target for any game being at least 30 FPS).
The answer to our speed woes came from
Game Closure,
a small group of wickedly smart guys who put together a multi-platform HTML5 game framework.

Leveraging Game Closure's tech, we had a playable version of Onslaught! Arena on iPad after just a day of hacking,
running at an impressive 60 FPS (5x that of a simple embedded WebView).
Their approach is very similar to that of ImpactJS -- that is,
they have a custom JavaScript environment, accelerated with direct access to native graphics and sound.
The best part is that our development environment never changed;
we were still using Google Chrome, working in pure HTML5 and enjoying Chrome's fine developer tools.

We didn't just want to port the game over, however.
We wanted this release to be something special, so we spent a few weeks
stuffing it full of brand new content, including:

Development take-aways

We've learned dozens of lessons and have what we hope are insightful and helpful
take-aways about the process of bringing an HTML5 game to production-quality on iOS.
We'll be writing about them all in due time (subscribe here),
but here are a quick handful of pointers:

Browsers are great for prototyping and fast development. If you're used to compiling your game before being able to test out some code, you'll love moving over to an environment where you can simply reload the game with a single keystroke.

Don't worry about framerate/performance until you absolutely must. On more than one occasion, we dirtied up our game's logic with slight optimization tweaks, only to later get huge speed increases later from external sources (that didn't require code updates).

Developer tools in the browser are really great. Firebug paved the way for Web Inspector, and current versions of Chrome are a developer's dream. I have only some experience debugging in Objective-C or the Android SDK, but they feel heavy-handed in comparison.

We'd like to point out that even with all of this new content, Onslaught! is still a pure HTML5 game.
It was developed in Google Chrome, and leveraging Game Closure's SDK, required no additional iOS-specific work on our part.

Side note: this space is blowing up

HTML5 and games built on HTML5 are really hot right now.
If you're not convinced by our little game's story, you should know about other huge companies becoming invested
in the technology, including Apple, Google, Electronics Arts, and Facebook among other major players.
We are actively hiring across the development board, from experts in JavaScript
and game programming to interns looking to learn.
If you find this space interesting, please do contact us.