How They Did It: Cut the Rope in HTML5

For all its plausible physics, Angry Birds is more stress-relief than puzzle -- less a gravitational/collision brain-teaser, and more a cortisol drain.

Wonderful things, these 2D cortisol drains, but not as mentally satisfying as something like Cut the Rope -- another iOS (and Android) game, originally written in Objective-C, and enjoyable in great part because of its perfectly smooth obedience to physical laws.

Translating a physics-based game to the browser is, therefore, a challenge: even when the graphics don't demand 3D hardware acceleration (as WebGL provides), simple games like Cut the Rope lose a lot of their fun value when the performance is even slightly less than flawless.

So when Microsoft rewrote Cut the Rope in HTML5, performance was one of their biggest concerns. JavaScript has far shorter low-level reach than Objective-C; and in-browser performance in general is still one of the banes of HTML5 gaming.

For the very same reason, a well-written HTML5 Cut the Rope could prove an excellent demonstration of IE9's blistering JavaScript performance.

But as it happens, the rewrite is tight enough to run beautifully in any browser (though the audio has some issues outside of IE9 -- a general HTML5 problem).

So check out the game and enjoy the smooth in-browser physics for a few minutes.

And then, hours later, check out the dev team's discussion of how they approached the project and executed successfully.

Here's how they describe the challenge:

In bringing Cut the Rope to a new platform, we wanted to ensure we preserved the unique physics, motion, and personality of the experience. So early on we decided to approach this game as a “port” from the native iOS version (rather than a rewrite). We kicked off the project with an extensive investigation of the original Objective-C codebase. Turns out it’s a big and complex game. The native iOS version consists of about 15,000 lines of code (excluding libraries)! The most complex parts of the codebase are the physics, animation, and drawing engines. They’re complex on their own, but made even more so by the fact that all three are tightly connected and highly optimized.

It was a daunting task: get this code into a browser while maintaining the unique personality and incredible quality that gamers are accustomed to. To accomplish this, we bet on JavaScript.

 
Microsoft's well-produced development video is embedded below. But click through to the 'developer candy' page for a fuller discussion of a pretty slick project.

HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins.  Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.  This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.