As seen today on TechCrunch!
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.Around this time, Google was coincidentally preparing for the launch of its new Chrome Web Store, which was a potentially exciting new platform championing HTML5 and open web standards. After scrambling to polish Onslaught! Arena and wrapping a Chrome-colored bow around it, Onslaught! Arena launched in Google's web store. We were invited to the press release, had a screenshot of our game up on a big wall, and were very excited to see our HTML5 creation getting industry attention.
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 atleast 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:
- Completely redone, full soundtrack by Joshua Morse
- Revamped arena, much bigger playing area
- Four new environments (Sewers, Dragon Lair, Sunken City and Volcano)
- New Stage Select screen to improve the game's pacing and replayability
- New weapon: frostbolt (stops enemies cold!)
- New monsters: skeleton, merman and Naga
- Shop (featuring an HTML5 Shield, Speed Boots, Gold Armor, Whet Stone and even a Dragon Familiar to help you fight)
- Two types of controls (touch-to-move, dual sticks)
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.Onslaught! is available now in the iPad App Store. We put a lot of love in this game; we hope you'll check it out and let us know what you think in the comments or on Twitter. Game on!
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.
