By James Gregory on Thursday, May 16th, 2013 1:40 PM PST

If I could snap my fingers and wake up the following morning with any one problem at work just solved, you know what it would be?

No, not the stock price.

Without a doubt — it would be the problem of deploying our games concurrently to mobile and web. At Zynga we’ve tried just about every approach out there — written games with Adobe’s Air, used manual ports, and evaluated several proprietary solutions. They have all been valiant efforts, but have fallen short of our expectations.

Most people would throw up their hands in frustration over this problem. However, these kinds of problems are the reason that being an engineer is the coolest job in the world. In Apollo 13 (one of my favorite movies ever), there is this scene where a group of nerdy-looking scientists tackle the problem of fitting a square air-filter into a round hole. Whenever I watch that film, I always walk away thinking that the engineers were the heroes — they solve a tricky problem that saves lives. And while people generally don’t live or die as a result of my work, I do occasionally get the opportunity to save a lot of time for other engineers.

Emscripten is a hot new piece of technology from Mozilla that uses the popular LLVM toolchain to compile C++ code down to JavaScript, which can be executed directly in your web browser. In addition,  Emscripten translates OpenGL calls into WebGL calls. Given that many of our games are built using the popular Cocos2D-X C++ framework, I started wondering if there was a way we could MacGyver together Emscripten and Cocos2D-X to build a way to get our mobile games to deploy straight to the browser.

It turns out that my inclination was correct.

Last week, the Cocos2D-X team merged some of my changes into their master branch. The changes, in short, get Cocos2D-X to compile and run using Emscripten. Now, this is an alpha version, at best. However, it’s proven robust enough that we’ve been able to get some of our simpler mobile games up and running using this port, and, given these patches, it was a matter of a couple of days to get those games working.

If you want, you can checkout Cocos2D-X from the usual location, then follow these instructions to get it up and running. Unfortunately, we’re changing the code rapidly so we don’t yet have a demo online, but we hope to have one very soon.

ParticleTest

This is hugely exciting.

Zynga, like many other companies, has pivoted to developing games mobile-first. But we think about it more as a “ubiquity strategy” than a mobile strategy — we definitely want you to play our games on mobile, but we also want to see you on Zynga.com.

However, we’ve learned that the successful teams develop for mobile first, thus building code around the assumption that resources will be limited. They also build on mature (read: “old, creaky”) technologies, because you want to spend time making the game fun, not trying to get the latest and greatest development tool to work.

What’s exciting about this approach is that it fits these priorities hand-in-glove. Whilst Emscripten itself is a new tool, the fact that it can be retrofitted to existing mobile games and their workflows is very appealing.

Before I end this blog post, I wanted to mention why Zynga is choosing to open-source this technology, rather than keep it to ourselves.

One of the great things about working at a company like Zynga is that we’re not just trying to build the best games — we’re trying to build an ecosystem of developers and a network of players. We want to be the best place to play games, and we know we can’t do that alone. We hope that by releasing this exciting new technology to the world we can help you build better games, which will be better for everyone.

Please, check it out! I’ll be blogging more about technical aspects of how we did it, how you can start using it, and get a demo online so you can try it for yourself.

 

 

7 Responses to “Zynga Ports Cocos2D-X to Emscripten”

  1. Terrence Andrew Davis Says:

    I made a 64-bit compiler from scratch.

  2. Jonathan Hart Says:

    I wonder how many Zynga players run browsers with proper WebGL support, though..

    Why not use FlasCC to target cococ2d-x to the Flash Player in the mean time?

  3. James Gregory Says:

    Hey Jonathan,

    First up, I think we’re seeing a shift across the industry in browser usage. Chrome and Firefox both have great WebGL support these days, and impressively, this is even true on mobile. I would be unsurprised if it turned out that after accounting for mobile devices you get better penetration with WebGL than with Flash (though I haven’t run the numbers).

    Regarding FlasCC, I admit I haven’t tried it, though it does look promising. I went with Emscripten because I expected such a crazy project to have serious challenges so I wanted to be working on a stack where I had all of the source-code so that I could troubleshoot it. This actually proved to be a really valuable property of Emscripten.

    Knowing what I know now, I suspect you might well be able to do the same thing on FlasCC, but I had to start somewhere, and Emscripten’s source-code availability made it a good starting point.

    Thanks for the question!

  4. Juwal Bose Says:

    Awesome work :) But, Doesn’t Cocos2d already have a JS bridge & HTML5 stack which can deploy to native web? I believe that is canvas based, which means a better penetration than WebGL. Thanks

  5. Leon Carl Says:

    @Jonathan:

    Of the major browsers only IE does not have WebGL support. Chrome has full support and Firefox and Safari have partial support.

    Over half our users use Chrome and would have full support.
    Another 25%+ use Firefox/Safari and would have partial suport depending their hardware and video drivers.

    Sources for Browser Compatability:
    http://caniuse.com/webgl
    https://blog.mozilla.org/bjacob/2011/03/28/do-users-actually-get-hardware-acceleration/

  6. Zhe Wang Says:

    Thanks James.
    Don’t waste time on FlachCC, unity3d has already give up that port recently. WebGL is the future.

  7. Fabien Says:

    An unrelated question… Zynga keeps posting “recent graduate” and “current student” software engineering positions on LinkedIn in Los Angeles, but there are no such positions on your website. What’s the story? :P

Leave a Reply

Connect with Facebook