Burger BooyahWith 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 2DSo 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.
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.
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 CreditLudum Dare 26 - Kazimir Shift - Theme Minimalism
Ludum Dare 27 - T1me Twist0r - Theme 10 seconds