How They Did It: Cut the Rope in HTML5
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
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 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.
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.