Mozilla Hacks

Mozilla and Games: Pushing the Limits of What’s Possible

Avatar photo By mbest

Posted on August 28, 2012 in Featured Article and HTML

At Mozilla, we believe in the power and potential of the Web and want to see it thrive for everyone, everywhere.

What We’ve Done

We’re committed to building the infrastructure needed to keep the Web the most robust platform on the planet. Although its roots have been around for some time, Mozilla’s focus on games is a relatively new initative. We are focused on making Firefox the best game development platform possible.

Check out BananaBread.

The latest Firefox release includes all of the JavaScript and WebGL updates needed to produce this demo.

BananaBread was developed by Mozilla to show our progress in action. We ported a complete C++ game engine to JavaScript using Emscripten. The original opensource engine is called Cube 2. It was designed to support first person shooters. Few believed porting a full, highly responsive game to JavaScript was an achievable goal. (We had our own doubts.) To our amazement, we found that we were able to build a demo that surpassed our highest expectations.

The project required very few code modifications to the original game, which demonstrates that porting games to the Web does not have to be difficult.

Learn more about Emscripten.

New technologies for HTML5 games

Here are a few technologies that have landed this year to advance our support for HTML5 games:

  • Game focused performance improvements to JavaScript, many inspired by games and demos that we saw on the Web or that developers sent to us for testing
  • Wide range of WebGL performance improvements
  • High precision timing
  • Compressed texture support on desktop
  • Smoother JavaScript execution on large code bases
  • Hardware acceleration of 2D canvas on desktop
  • FullScreen API
  • PointerLock API (special thanks to David Humphrey and students at Seneca College)
  • OrientationLock

Firefox for desktops has come a long way in a short time. But there is still more to come. We are working on features that will improve performance and make development easier. We are also investigating options for porting to JavaScript from languages such as C# and Java.

What’s Next

Our focus for the first half of 2012 was Firefox for Windows, Mac and Linux, and while we continue to make improvements there, our focus for the second half of the year will include Firefox for Android and Firefox OS. There are hard challenges ahead but we are excited to deliver the maximum potential HTML5 has to offer, both in features and performance.

One of the main goals of the Mozilla Community working on games is to not only drive game development on Firefox but across all browsers. Any browser that has implemented the necessary modern Web standards used by the BananaBread demo can run it. These efforts help us stay in touch with how HTML5 is coming together and see opportunities where we can make developers’ lives easier. Hearing directly from the HTML5 game developer community is a key part of how we learn what needs to be done.

I hope you’ll come and join us in raising the bar on what’s possible!

You can join the conversation on our IRC server at irc.mozilla.org, channel #games.

Or sign up for the mailing list at https://lists.mozilla.org/listinfo/community-games

About mbest

Martin is currently the Director of Platform Product Management at Mozilla.

More articles by mbest…

22 comments

  1. louisremi

    Impressive!
    Although WASD controls is only usable on qwerty keyboards, and I haven’t found a way to tweak that.

    August 28th, 2012 at 09:23

    1. Tim McLean

      I’ve been thinking about this recently (I use the Dvorak layout). Might it make sense to have a lower-level JavaScript API for listening to keystrokes based on position instead of letter/character? I’m not sure how that could work well with more unusual keyboards.

      August 28th, 2012 at 11:07

    2. Alon Zakai

      You can change the keybindings in the game, see the last question in

      https://github.com/kripken/BananaBread/wiki/FAQ

      August 28th, 2012 at 20:50

  2. richtaur

    Looks and runs great! The underwater effects are particularly awesome.

    August 28th, 2012 at 09:47

  3. Andrew Wooldridge

    Awesome! Can’t wait till someone creates the equivalent of “Ocarina of Time” for the web.

    August 28th, 2012 at 10:09

  4. Quarterly

    It would be nice if it wasn’t necessary to disable “Search for text when I start typing”

    August 28th, 2012 at 14:48

  5. Stephen F. Heffner

    Martin — XTRAN, our computer language expert system, can help you move code from other languages (including C, C++, C#, and Java) to JavaScript. XTRAN has been automating the analysis, re-engineering, and translation of many computer languages since 1984. Information is at http://WWW.Pennington.com. If you’re interested, please contact me at Heffner@Pennington.com.

    Regards, Steve Heffner

    August 28th, 2012 at 15:41

  6. Pepe

    Impressive. Any chances in seeing a future version that supports online multi-player?

    August 29th, 2012 at 07:22

    1. Martin Best

      It is something we are considering when WebRTC (Web Real Time Communication) lands which will allow peer to peer communication channels. It contains UDP and TCP like protocols so could work well. No commitment on that but we would very much like to see what we can do with that tech.

      August 29th, 2012 at 11:06

  7. Brad Candullo

    Very impressive, the start of something big.

    August 29th, 2012 at 07:29

    1. Martin Best

      We certainly hope so! Still work to do but definitely progress in the right direction.

      August 29th, 2012 at 11:08

  8. gre

    Hi,
    This is a very impressive demo,

    I’m wondering why it has been compiled from C++ and not directly made in pure HTML5 / Javascript.
    Is it a re-usability, performance, productivity, or simple preference reason?

    It’s like the Angry Birds desktop version which has been compiled from a Java library AFAIK.
    Is there any chance we can directly use Three.js for our games in the future? I see the web as a standard and unique high level language, why using another high language to implement our games, is it too early?

    What do you think?

    Thanks,
    gre

    August 29th, 2012 at 08:58

    1. Martin Best

      There are a few reasons:

      1. Compiled C++ to JS is often faster than handwritten JS, since it avoids things like GC, property accesses, etc., and focuses on things JS engines can optimize very well. However, you can apply those same techniques to the speed-intensive parts of your application.
      2. Others are already releasing product using hand written code and we are using their existing test cases to optimized for that use case.
      3. Porting tech like this has a lot of challenges so we thought this was an under serviced area where we could add significant value. It’s pretty difficult code to wrap your head around so we wanted to take on this challenge in house.
      4. We are not a game development house and we had a small budget, much less costly to port.

      August 29th, 2012 at 11:17

  9. Julien

    It’s impossible to play this game with a French keyboard, WASD keys aren’t at the same place and there is no ` key to enter the menu and change the keybinding

    August 29th, 2012 at 09:50

    1. An

      The FAQ says that hitting 0 should also work:

      “Enter the menu with 0 or ` then go to options->keys. Or, you can use the game console, for example /bind G left will bind G to moving left (note you need to press escape after / on Firefox due to the search bar). The other directions are right, forward and back (see data/defaults.cfg for more).”

      August 29th, 2012 at 11:19

    2. Martin Best

      Here is a link the the FAQ that covers how to fix this although the next post does also answer your question.

      https://github.com/kripken/BananaBread/wiki/FAQ

      August 29th, 2012 at 14:12

      1. Julien

        I just tried but the 0 of a French keyboard doesn’t seem to be functional to enter the menu (I don’t have a separate numpad on my laptop and numbers on the main keyboard are not directly accessible, you have to hit shift+0).

        August 30th, 2012 at 11:22

  10. Jean Bonbeur

    All that epic efforts to bring HTML5 games to the browser, and still the Gamepad API is nowhere to be found in a stable release of Firefox…

    August 31st, 2012 at 07:20

    1. Martin Best

      Gamepad is on our list, getting PointerLock and FullScreen was determined to be higher priority as more users have the necessary accessories to take advantage of them. The number of people that have Gamepads hooked up to their PCs or Smart phones is relatively low compared to those that have a mouse, touchpad, or touch screen interface.

      September 4th, 2012 at 13:50

  11. roliveira

    Wow!

    I’m very impressed with this demo, and i must say i loved the idea of using Cube 2, i’m a personal fan of this game. However the set of levels is quite limited, and there is no multiplayer.

    I’m aware that this is just a demo, but is there any plans to extend it to a full Cube 2 port?

    Best regards.

    September 2nd, 2012 at 12:12

    1. Martin Best

      We do have two more milestones planned, one for multiplayer support and the other to add support for editing. However, both of these are dependent on either community taking them on or continued internal funding to drive development. Since we have a very good Firefox platform reason to attempt multiplayer as a real word use case of WebRTC, I’m hopeful that we will have the chance to tackle that but no confirmed plans yet.

      September 4th, 2012 at 13:58

  12. John

    Eh, it crashes the moment the bullets start flying.

    October 15th, 2012 at 17:35

Comments are closed for this article.