80,000 Lines of Objective-C: Bringing Multi-Touch Physics to the HTML5 Browser
"Contre Jour" is a video game that is "blurring the lines between interactive art and games". Made popular on iOS, and created by Maksym (Max) Hryniv, Contre Jour is known world-wide for its innovative gameplay, charming art style, and captivating soundtrack. With the debut of Internet Explorer 10, Microsoft was looking for an opportunity to demonstrate the updated JavaScript engine and advanced multi-touch features they had packed into their new browser.
Contre Jour's snappy touch controls, unique gameplay, and intensive multimedia requirements presented just the challenge Microsoft was looking for. Teaming up with Max and custom development shop Clarity Consulting, Internet Explorer has brought Contre Jour to the browser using only HTML5 and JavaScript. Completed over six months, bringing Contre Jour to the web pushed the boundaries of what even we thought was possible - proving that HTML5 is ready for the prime time as a viable platform for casual gaming on the web. The following technical tear down provides rich insight into the challenges faced and solutions achieved in bringing Petit to life in the browser. We Hope you enjoy it.
Overview
The goal of the project was to show how Internet Explorer 10 was shrinking the gap between browser based games and native games by bringing Contre Jour to HTML5. We set a goal from the start that we would do this without sacrificing any of Contre Jour's depth. We knew there were going to be challenges, and large ones at that. Contre Jour is massive, from both a code and media perspective. It boasts over 80,000 lines of Objective-C code, hundreds of image assets, and even more configuration files. The biggest challenge by far was the conversion of the Objective-C code to JavaScript. The Objective-C code was heavily object oriented and JavaScript's native support for concepts like encapsulation, polymorphism, and inheritance, is sparse at best. On top of that, differences between the two languages made a direct line-by-line port out of the question. We went through the Objective-C code in detail, evaluated each component, determining how it related to other components, and devised a way to implement each one faithfully in JavaScript. From the beginning, as always with game development, performance was a must. We were concerned that tracking and moving the many elements across the screen, including the environment, would potentially tax the browser. HTML5 makes drawing simple, but we needed to stay cognizant of the fact that drawing was going to be our most expensive operation with regards to performance. Take a look at the 'Under the Hood' section below to see some of the performance tricks we used.Ground Physics
A defining feature of Contre Jour is how the user interacts and manipulates the surrounding world rather than manipulating the game's hero character. In Contre Jour, a player shapes the clay-like ground with their finger, which is one of the primary ways to move the game's hero, named Petit, around the screen. Coding the ground logic in JavaScript was a big challenge. Mimicking the way it moves and shapes as the user touches it as well as the way it interacts with the games hero required pages of physics soaked logic. To render Contre Jour's clay-like ground we used a modified JavaScript port of Box2D, which is the same physics engine used in the iOS version. This gave us almost identical functionality for managing physics objects, creating joints, and handling collisions. The ground is made up of many distinct individual Box2D bodies, and that's what gives it the ability to be shaped. It appears so smooth when it's drawn because a quadratic curve is drawn in-between each of its sub-bodies. This gives the ground its claylike feel, but also makes rendering it very expensive.Objective-C to Javascript
One of our key challenges early on was migrating the deep object hierarchy of Contre Jour from the original iOS code into JavaScript. To help with this we leaned on John Resig's "Simple JavaScript Inheritance" pattern in several places where we needed inheritance. This allowed us to use a lot of code from Contre Jour's Open-C architecture, more than we anticipated. Components in the game that shared common base behaviors, such as the particle systems, were easier to implement because we had an "inheritance" hierarchy that allowed us to avoid writing everything from the ground up each time. Without a pattern like this, it would have been very difficult, if not impossible, to bring the game to HTML5. We would have ended up having to re-write most of the game. Thankfully, using Simple JavaScript Inheritance pattern saved us a lot of time and resources.CSS3
CSS animations and transitions played a big part in the development of the menus and non-gameplay elements of the game. Most of these CSS transitions occur during screen transitions or game events, such as showing/hiding the pause menu, transitioning between levels, or transitioning between a level and the level picker. In browsers like Internet Explorer 10, every pixel on the screen is hardware accelerated. What does that mean? It means that without any extra code you have the power to create high fidelity, high performant effects. This helped us offload some of the rendering work from the already abused canvas to the DOM and CSS layout engine. We also used CSS3 Media Queries for scaling the site to support multiple screen resolutions. CSS3 media queries allow developers to attach a condition to affect the scope to which the style applies. For example, we used a media query to apply a scale transform to our outer DIV container to scale down the site for smaller screens. Tip: Scaling using media queries freed us from the burden of creating and supporting multiple sizes of images. This is an important optimization - maintaining multiple sets of images would have caused additional pain since we had hundreds of images to manage already.Multi-Touch
One of the few areas in the game where our code branches in different browsers is in the implementation of multi-touch support. Implementing multi-touch was one of the easiest parts of development, thanks to Internet Explorer 10's built-in support for pointer event listeners. The great news is that they just work. From a developer's perspective this was great, because it allowed us to focus head's down on the more challenging parts of the project. Here is an example of code that has the event listeners hooked up across browsers: function inferInputModel() {
if (window.navigator.msPointerEnabled) {
return 'pointer';
} else if (window.ontouchstart !== undefined) {
return 'touch';
} else {
return 'unknown';
}
}
switch (inferInputModel()) {
case 'pointer':
element.addEventListener('MSPointerDown', msStart);
element.addEventListener('MSPointerOut', msStop);
document.addEventListener('MSPointerUp', msStop);
document.addEventListener('MSPointerCancel', msStop);
document.addEventListener('MSHoldVisual', preventDefault);
break;
case 'touch':
element.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchStop);
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
default:
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
}
view raw | touchEventWireup | This Gist brought to you by GitHub.
From a coding perspective, we spent some time writing a main touch module that wrapped the browser specific touch support. The module tracks input events, regardless of the browser platform, and bubbles them up to our game engine for processing. In addition, game elements are able to "subscribe" to a given instance of a touch or pointer to receive update notifications through its lifecycle. This made it easy for elements like the ground in the game to respond to touch across browser platforms.
If you are a web developer interested in building games on the web at all, we've put together
a starter framework that you can use right away to start building HTML5 games.
The sample uses the same pattern we used for creating the game loop in Contre Jour and will help get you started writing HTML5 games. It includes a simple pattern to create a game loop, a starter game object, and code to draw to the canvas, all set up and ready to go. The code is well documented and will walk you through the steps needed to create a basic game. You can also check out some additional developer resources here:
Internet Explorer GitHub repository - For intermediate to advanced users. Our GitHub repository compiles much of the great work we've done over the past couple months, from building game with Atari and Cut The Rope, to developing interactive music videos with Jasmine Villegas.
Where Do We Go From Here?
The fact that we were able to bring Contre Jour to the web has proved some things, the least of which is that the line between HTML5 browser gaming and native platform games is blurring. While native games still provide an edge over browser games with regards to richness, the opportunity of reach that comes with the browser is appealing. As technologies like Windows 8 and Internet Explorer 10 continue to push forward, the future for HTML5 gaming continues to get brighter. As developers, we believe it's up to us to reset people's expectations of what is possible on the web. We hope Contre Jour inspires the gaming community to push the limits and explore what's possible. What do you think is possible?About the Authors As one of the first Microsoft Gold Certified Partners in the United States and Microsoft's Midwest Partner of the Year, Clarity Consulting specializes in Microsoft platform technologies, including ASP.NET web applications, SharePoint, Silverlight, Surface, Windows Mobile and WPF smart clients. We merge groundbreaking user experience design with agile software development to serve a range of clients in industries ranging from retail and manufacturing to finance and legal.(dpe)
GREAT ARTICLE!!!!!