I’ve been meaning to write something about this for a long time! Over the summer we created Agent 008 Ball, a spy-themed HTML5 pool game. Creating it was a blast! We put a little video together to talk about the design process. You can check it out below. Also, here’s the case study for the project.

I’ve also been meaning to share a little bit about what we learned along the way. In addition to being a fun design challenge, 008 Ball brought plenty of technical challenges. It also forced us to do some thinking about HTML5 and the future of UI technologies.

What’s so HTML5 About This?

First of all, HTML5 is quickly becoming an overloaded / catch-all term. In fact, let’s just cut to the chase and call it it Web3.0.com. The truth is that a lot of 008 ball is really just modern browser awesomeness: jQuery and a cool javascript physics engine. Having said that, actual HTML5 features were required to make it happen, specifically:

• All of the ball rendering happens in a Canvas. Without canvas, we would have had to resort to some serious hackery in order to rotate the balls and manipulate the pool cue.
• We also made massive use of the Audio element for sound effects. In fact, we found out early on that browsers have a ceiling on the number of audio elements you can create (probably related to the number of simultaneous sounds you can play on your soundcard). 32 seems to be a magic number.
• Finally, all of our typography is done with @font-face font embedding (using the ever so awesome .WOFF format). Incidentally, @font-face embedding could not be easier, especially with great tools like typekit and the font-squirrel generator. This isn’t technically an HTML5 feature (I think it’s CSS2) but it kind of feels like one.

HTML5 for Apps and Games

We’ve worked with a lot of UI platforms (WPF, Silverlight, Flash and iOS) and always felt like HTML does a stunning job with its core competency: document layout. But what about HTML for apps? Admittedly apps (and games) feel a little shoehorned in. The stunning success of HTML as an app platform (which, at least by volume, is undeniable) seems to be a little bit in spite of itself (and due to the ingenuity and hacking skillz of a lot of smart developers). It’s sort of amazing that a document layout engine has become a reasonable platform for building games or sophisticated applications.

Well, even in version 5, HTML is still not a complete UI package but I can‘t help but feel like it represents an important and fundamental step in that direction. We’re closer than ever to an HTML that feels like it was intended for apps! While you can make a good case that many important UI constructs are still very rudimentary or missing (e.g. an extensible component model—checkout Quick UI in the meantime, UI-focused layout, data-binding, etc.), HTML5 gives us important building blocks we’ve never had before.

If you think about a modern UI stack, the most fundamental layer in the cake is the rendering and media layer. And that’s where everyone tends to start: Flash started there and so did Silverlight. The first versions of both of those platforms offered little more than rendering and media. If you think about it, even Windows (and likely other OSs) followed that trajectory.

HTML5 gives us our rendering and media stack! We’re still early, but this represents a true shift from “designed for documents” to “designed for applications and games.” Canvas is a surprisingly effective (and fast!) rendering surface (check out this realtime video processing). We also get media integration with the Audio/Media elements and we even get some (less widely implemented) basic 3D constructs with WebGL.

No doubt HTML6 will expand on HTML’s existing (and rudimentary) higher level UI constructs (controls, layout, etc.) and result in something that is even better suited for apps. That will be great. In the meantime, we now have the fundamentals! That’s a great place to build.  And it also turns out that a game is a good match to that excitingly new bottom layer!

What’s Next for 008 Ball?

You’ll be happy to know that Agent 008 Ball is alive and well and growing. Our stats are up and we just (quietly) rolled out a new version with some significant bug fixes. We’re also in the process of cleaning up a bunch of the code so we can share it. We’ve already shared a cleaned up version of the Box2D physics library that we used. The next one coming will be our HTML5 sound effects library.

Maybe after that, we’ll add more than one level to the game!