IE 9-10, Canvas 2D, a new Object Model, Ludum Dare and Little Dude

This is a bit of a historical piece in that it explains an idea that I've been working on for some years. That idea, formulated as we were developing Canvas 2D in IE 9, was that many types of casual games should now be possible with just HTML 5 and JavaScript. Even without canvas, we should be able to achieve amazing things with vanilla HTML 5, CSS and maybe some SVG (also being worked on during IE 9).

Burger Booyah

With this basic idea in mind, Nathan Furtwangler and myself sat down and tried to crank out a useful, fun game in a day. The game was Burger Booyah and the technical requirements we gave ourselves was that the animations had to be smooth, the game had to be simple to play, and we needed to use a bunch of our new features. At the time this meant CSS 3 backgrounds, HTML 5 Audio, and we had to rule out whether or not we needed Canvas and/or SVG. We eventually did rule them out and we created a simple restaurant order and service game. People came in, they asked for a particular burger, you built that burger and served it to them before they got rather angry and walked out. Total construction time did indeed accumulate to about 1 day, though the work was spread over 2.

There was a hidden requirement that I haven't detailed yet. In order to achieve buttery smooth animations our goal wasn't to work around IE, it was to fix it. Anything we ran into that we didn't like we wrote it down and the plan was to fix it. For us, the biggest bottlenecks were DOM access times. So we utilized our knowledge of our new object model, we implemented faster bindings for everything we cared about and we eventually got that back into IE. Our issues with HTML 5 audio were moved over to our media team and those also got fixed. In the end this was a form of late to the game TDD (Test Driven Development) since we were back filling new testing requirements using Scenario Driven Development.

IE 10, Little Dude and Canvas 2D

So what does any of this have to do with Canvas 2D you might ask? After all, we decided not to use it. Well, IE 10 was already in flight and it was time for us to stop working on IE 9 and move our efforts to the next version of the browser. Here we had cool new features like Pointer Events, we had our new object model so using it to improve performance of APIs was a funded effort and there was a Windows 8 experience for applications. It was time to write a game for this as well.

So what did we come up with? This time, we adapted a sprite from the game Taptitude called Little Dude. It was a very basic sprite with only 5 or so independently animating components. To make this a reality we created JavaScript versions of some of the XNA math classes and then we brought over from C# a Sprite object model and we started to experiment with animations, thousands of sprites, and overall throughput of the engine. What we found was less than cool. There were so many landmines for the JavaScript developer to cripple themselves. Things like your canvas side mattered, you couldn't use read-back at all or you were down to 10 FPS, there was a steep cliff at about 10% of the sprites our XNA application was capable of. It was obvious. To do something like this you NEED sprite batch and facilities that were only available in the then non-existent (or rather experimental) WebGL.

Even though this was daunting we again doubled down. We knew where the bottlenecks were and we looked at every stage in the pipeline. We found that Canvas had coincided with the introduction of the new object model and as such it was still using some of the legacy bindings. We upgraded all of them. We also looked at the transforms stack and how that could  be optimized. And when we were done tweaking the browser for maximum performance we took another step forward and moved all of our matrix transforms into JavaScript (which was oddly faster then and today even faster still thanks to the Chakra team). Once complete we were able to get enough sprites on the screen to run a game. And that eventually led to this article from Scirra where our efforts had clearly paid off. We had made Canvas 2D usable for some set of experiences, but WebGL was clearly a more suitable technology for raw performance.

Ludum Dare and Natural Selection

After all of our hard work we were ready to play. It was Ludum Dare 24 and we managed to put together a great group of C# game developers. Then we dropped the bomb, we were going to write the game in JavaScript, Canvas 2D and HTML 5. There was obvious trepidation, there weren't a lot of HTML 5 games out there. People still thought Flash games were HTML 5 after all.

But it was pretty clear, we were able to write a game against IE 9 to Canvas 2D with the performance we needed using our previously created sprite library. We added new features like text and alignment, a new layer system for parallax and optimization of our rendering and physics engine. It was great. In fact, so great we actually got a scoring of #6 for innovation and #28 overall. Not bad for an HTML 5 game. You can see our entry here and the game is still live on Azure.

Fast Forward

Everything we did during the IE 9 and 10 period I would call the Golden Age of our game development drives browser innovation push. But we didn't stop there. We kept going. In fact, we still do Ludum Dare as often as possible and we still write HTML 5 games. And more importantly we still drive innovation back into the IE browser and even report bugs and performance issues to WebKit and FireFox when we find something non-interoperable. This is why the web is so great and working on the platform for the web is even greater. A single person can implement or fix an API that is then used by millions of JavaScript developers to create experiences for over a billion users.

So in a nutshell that is what this blog is about. I'm going to be sharing my experiences in HTML 5 game development. It'll be a somewhat unique perspective as my position on a world-class browser does offer me the ability to clearly detail how/why things work the way they do. It'll also be flavored by a veteran having coded games in assembly, C, C++, C# and a number of other languages. So expect me to favor structure over chaos ;-)

Extra Credit

Ludum Dare 26 - Kazimir Shift - Theme Minimalism
Ludum Dare 27 - T1me Twist0r - Theme 10 seconds