One of Google's big announcements this week was the launch of Chrome Angry Birds, a port of the hugely popular mobile game to Google's browser. But calling it "Chrome Angry Birds" is missing the point because what's really interesting is that it's a real-time multimedia cross-platform HTML 5 app. It runs fine in MSIE 9 and Firefox on Windows (sound and save games included) and I've heard reports it works in Safari on Macs, too. And because the game is based on open browser technologies, we can easily pull it apart and see how it's built just like we've been pulling apart web pages since 1993 via the magic of "view source".

The key file is appcache.nocache.manifest: it contains a list of all the other stuff in the app. There's a whole lot of files: sound, art, levels. Here's the image sprite sheet for birds and pigs, here's the slingshot sound, here's the data file for level 1. The only thing that's opaque is the code itself, 390k of GWT compiled Javascript. People often call this style of code "obfuscated" but the compilation is as much about making it run faster as it is hiding the details.

The part that impresses me the most is the sound: that's been a weak point in browsers. Over on Metafilter someone pointed out that it was loading a small Flash shim, what appears to be gwt-voices. So still not a 100% Flash-free app, but very very close. The caching is quite sophisticated too.

techgood
  2011-05-11 20:27 Z