Om Nom is a lovable little monster, a character who can keep people playing “Cut the Rope” for hours under the simple premise of trying to satisfy his sweet tooth.
But behind the scenes, the game by ZeptoLab is anything but basic. Swinging ropes, floating bubbles, a subtle realism and other complexities require an underlying physics engine different from any other in the world of video games.
That was one of the challenges for the team at Pixel Lab, the Seattle-area development shop tapped to port the original iOS version of Cut the Rope to the web in partnership with Microsoft’s Internet Explorer team. At one point in the process, in fact, it looked like they might be forced to actually cut the rope on the whole project.
Ultimately they produced a browser-based version of the game that lives up to the original. Cut the Rope is available for free here, working in a variety of browsers, thanks to its use of HTML5. It offers exclusive levels to IE9 users, and special features including the ability to pin Om Nom to the Windows 7 taskbar.
Their experience will become even more relevant as Microsoft gears up for the release of Windows 8, starting with a consumer preview later this month — include a new Windows Store and a focus on PC apps that use those fundamental technologies of the web.
Their biggest takeaway: ”Nobody should have any concerns about making a bet on HTML5,” says Robby Ingebretsen, Pixel Lab founder and creative director. “In general, for 95 percent of the cases, it’s definitely up to the task.”
Apart from the technical challenges, they had to keep the project under wraps leading up to its unveiling at the Consumer Electronics Show in January, where Microsoft showcased the game in an arcade-style cabinet on the show floor.
“It’s actually kind of hard to hide it from your kids, at least with mine,” says Joel Fillmore, a Pixel Lab senior software engineer. “They were as excited as anyone for the game to be done so they could play it.”
So how did Pixel Lab get it done, and what did they learn? Here are excerpts from our recent conversation with Ingebretsen and Fillmore, including some deep technical details from the project.
How did you end up creating an HTML5 version of Cut the Rope?
Ingebretsen: About a year ago, we did a pool game called Agent 008 Ball. We wanted to get our feet wet in HTML5. We were really excited about the possibilities. We had some friends at Microsoft, and they were launching IE9 at the time, and we convinced them to let us try to write a game.
We ended up writing this pool game and had a ton of fun with it. That game ended up getting a lot of attention. It surprised people that you could do that with HTML5. It bent the browser in a way that people didn’t expect. …
Microsoft had the relationship with ZeptoLab. They pitched us on Cut the Rope. We were booked. I was saying no to every project at the time, and we just made it happen, because we knew that it was going to be a blast.
We were a little nervous going into it. It’s a different physics engine than in any other game. I was nervous that we wouldn’t be able to pull it off. We wrote the contract so that we had a milestone that was literally just about rendering the ropes and breaking the candy and getting the sprites to render.
We hit this moment in that milestone where we were about ready to call it a day. We were hitting 60 frames per second, but we’d get on older hardware, and it would just plummet immediately. We traced it back (using a profiling tool in IE9) and we got some help from the Microsoft guys, and after that it just lit up.
What was the challenge you ran into?
Fillmore: There are two phases every time you draw a frame for the game. There’s the update phase, which is where you do all the physics calculations to determine the state of the ropes. The ropes are really complicated in that each rope is composed of multiple segments. For each one you have to run the physics engine across it to calculate how it moves. Gravity is a factor there, and the interaction between other game elements. So there’s quite a bit of computation that goes into the physics calculations.
Fillmore: I think if anything we learned that it’s possible. One of the biggest compliments that I appreciated about the game is that it felt like the native version of the game. I think that has been challenging in the past, and we’re starting to see the point where HTML5 apps can feel like native apps.
Ingebretsen: There’s a big appetite for this, clearly. There’s PhoneGap. There’s other platforms that are trying to let people do this. Hugely popular, people love them. And it’s for that same reason. People have this skill set and they want to figure out how to use it in other places.
What were your biggest takeaways from this whole process?
Ingebretsen: Nobody should have any concerns about making a bet on HTML5. That’s my biggest takeaway. (In the past) there was this huge UI surge, whether it was Flash or Objective C or Silverlight, and I think there was the potential to be concerned that now we’re settling or something. It’s not settling. … There might be times when, for whatever reason, you might need to be closer to the metal. Maybe closer to drivers or devices, or whatever. But in general, for 95 percent of the cases, it’s definitely up to the task.
Ingebretsen: There’s this huge potential with HTML5. Right now we’re still working with the raw pieces. Canvas is a relatively low-level API compared with something you might have in Flash or Silverlight. But because we’ve as a community created these low-level pieces, I think there’s a big opportunity for people to build the bigger pieces on top of that.
I think a year out, two years out, you’re going to have these incredibly rich UI platforms built on top of canvas and html where you’re getting both the ease of development as well as the speed and the quality of experience that you have in silverlight or flash. It’s ripe for people to come in there and start building those frameworks.