Mozilla turned some heads last week when they announced BrowserQuest, an HTML5 powered MMO that runs in any compatible browser. That was just the beginning of the potential for HTML5 to power games and other applications in-browser. Of course, BrowserQuest was built from the ground up for HTML5. What about games built in stand alone executable languages like C++?

Games for the Web are usually built on an existing Web extension like Flash. To port to the Web, you would have to rebuild your game in Flash from whatever programming language you used. The same was once again true when it came to building games in HTML5 canvas and JavaScript. You had to rebuild your code in those languages to publish on the Web – not anymore.

On the Mozilla Hacks blog, it details a new program called Emscripten. It’s an open source C++ to JavaScript compiler that uses LLVM. While the original game needs to be in C++, this cuts back on the development time on a port to almost no time at all.

For this particular experiment, Alon Zakai of the Mozilla Emscripten team, used the open source game Me and My Shadow. It’s a puzzle/platformer game where the player controls two characters at once. The port created by using the Emscripten compiler “works almost exactly like the desktop version does on the machines and browswers” Zakai tested it on.

The particular success of this port is due to the game’s use of the SDL API. For those unaware, the SDL API is a wrapper library for basic game functionality like getting input, loading images, and rendering text. Emscripten has SDL support through the use of native canvas calls, which allows the game to run as fast in browsers as it would natively on the desktop.

There are a few problems, however, with this porting method that can be fixed by the browser creator themselves. The first problem is that typed arrays are needed to run C++ code quickly. Firefox, Chrome and Opera have the necessary typed arrays to make maximum compatibility possible. Zakai says that Safari should be fine ready soon and that Internet Explorer will be getting the capability in IE10.

The other problem comes from the Blob constructor. This is necessary for decoding the visuals and the audio of the game. Most browsers should be able to decode the visuals in the game, but the audio is where things start to fail. Zakai claims that only Firefox is currently capable of decoding the audio, but says that there may be a workaround somewhere in Chrome.

Emscripten isn’t perfect though as it still requires a bit of manual programming on the part of the person doing the port. Here’s how Zakai explained it:

JavaScript main loops must be written in an asynchronous way: A callback for each frame. Thankfully, games are usually written in a way that the main loop can easily be refactored into a function that does one iteration, and that was the case here. Then that function that does one main loop iteration is called each frame from JavaScript. However, there are other cases of synchronous code that are more annoying, for example fadeouts that happen when a menu item is picked are done synchronously (draw, SDL_Delay, draw, etc.). This same problem turned up when I ported Doom, I guess it’s a common code pattern. So I just disabled those fadeouts for now; if you do want them in a game you port, you’d need to refactor them to be asynchronous.

Regardless of the few kinks that need to be worked out, this looks like a quick and easy way for developers to bring their games to the Web. If you want to check out Me and My Shadow running on the Web, you can play the game here.