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.
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 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.
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)
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