An HTML5 game in the Mac App Store

by Matt Hackett, 2011 Mar 13
How to Make a Video Game All By Yourself

HTML5 is the development buzzword of the moment. It's the "ajax ninja" of the last few years, so naturally it comes with its fair share of skepticism. Indeed, many have been writing about its seemingly never-ending spec, inconsistent implementations by browser makers, and even its inferiority to native apps. All are valid arguments against betting a real business on HTML5.

Onslaught! Arena banner on Tech Crunch

However, here's a hard example of why you absolutely should consider serious development in HTML5. In December of last year, we launched our little pure-HTML5 game Onslaught! Arena in the Google Chrome Webstore. Sales could be better, sure, but we also just launched the exact same game in the Mac App Store. The code is identical with negligible development time required to port it over to a completely different platform.

Think about the business case for that. Normally it would take considerable resources to port a game to such a different platform. We know our game isn't exactly a AAA title, but if programmed from the ground up in Objective-C, our best guess is it would take a few months to develop. That's time that we can now spend on content updates or even a sequel.

Onslaught! Arena running on my MacBook Pro

How was it done? We just embedded a WebView in a native Cocoa app using Xcode. Is it inferior? Not noticeably so. On my MacBook Pro, the Chrome Web Store version ranges from about 50-250 FPS (frames per second) depending on how many monsters are on the screen. On the same computer, the Mac App Store version ranges from 30-100 FPS. (You can see this for yourself: type "lddebug" while in-game to see debug information.) And despite nasty HTML5 audio issues, sound plays great in both versions.

Surprisingly, the Chrome version runs faster than the native Mac version. While Safari and Chrome are both using WebKit as their rendering engines, Chrome is likely faster because V8 has wicked speed and its canvas rendering is hardware-accelerated.

Either way, it runs great on both platforms and required almost no dedicated development time to port. If you're a developer, you should find this exciting. We certainly do!

Onslaught! Arena

Since you made it this far, you might like to read "Our first week in the Chrome Webstore: the numbers" if you're into graphs and sales numbers (and who isn't!). If you'd like to learn more about our HTML5 development, including a tutorial on how to embed a WebView into a native Mac app, follow us on Twitter; we'll be writing about that soon.

See Onslaught! Arena in the Mac App Store.

Follow author @richtaur

LDG © 2022 • BlogTerms of ServiceVideo Policy • v2.1.2