Mozilla

Paving the way for open games on the Web with the Gamepad and Mouse Lock APIs

In this post I’ll be introducing the Gamepad and Mouse Lock APIs, two additions to Firefox that are paving the way for high quality games on the Web.

Update: The Gamepad API, Mouse Lock API, and Full Screen API are now all available within a single experimental build of Firefox.

The Web is proving to be a valuable and capable platform for games, particularly those produced using open technologies baked into the browser. These HTML and JavaScript games are beginning to shine, all thanks to the amazing APIs and functionality that come with Firefox and other modern browsers.

The Gamepad and Mouse Lock APIs are just two of the new additions coming to Firefox that are going to help mature this platform. We’ll be posting more about them as they develop but let’s take a quick look at them today.

Breaking free from the keyboard with the Gamepad API

The ability to control games with a gamepad is something that has only been available to consoles and desktop computer games, until today. You can now connect a gamepad to your computer via USB or bluetooth and immediately access it within Firefox using JavaScript, it’s that cool.

Accessing gamepads using JavaScript is massively valuable for games developers who want to break away from traditional keyboard and mouse input. Combined with the Full Screen API it can allow you to create a much more immersive experience that feels more like a console than a browser.

The Gamepad API is being worked on at Mozilla by Ted Mielczarek and others from our Paladin team.

Use it today

You can use the Gamepad API today in a custom build of Firefox, that also contains the Mouse Lock API (more details on that below). When you have installed the build you can then use the demonstration file to test it out. The wiki page contains information about implementing the API in your own project.

I have put together a short video showing off the Gamepad API an action with an xBox 360 controller:

More information

The Gamepad API has a draft W3C specification edited by Scott Graham from Google and our very own Ted Mielczarek. Find out more about our progress with the Gamepad API on the Mozilla wiki.

Making the mouse behave with the Mouse Lock API

Until recently, it has been impossible to lock down the mouse cursor and contain movement within the browser. This has made it incredibly difficult for developers to implement games and visualisations that allow a player to look around in a large or 3D world. What would happen is the player would start looking around but would be prevented from looking when the mouse would go off the edge of the browser or hit the side of the monitor.

The Mouse Lock API solves this by hiding the cursor and locking it to the centre of the screen. When the API is enabled and the mouse is moved the developer is given details about the distance the mouse has travelled, rather than the coordinates of the mouse on the screen. These distance values allow infinite movement on the X and Y axis, letting the player to look around a 3D world without hitting any restrictions.

It is being worked on at Mozilla by David Humphrey and his students at Seneca College in Canada.

Use it today

You can use the Mouse Lock API today in the same custom build of Firefox that contains the Gamepad API. When you have installed the build you can then use the demonstration files to test it out.

David has also put together a short video showing off the Mouse Lock API in action:

More information

The Mouse Lock API has a draft W3C specification edited by Vincent Scheib from Google. Find out more about our progress with the Mouse Lock API on Bugzilla. You can also check out David Humphrey’s series of posts on the development of the Mouse Lock API.

10 comments

Comments are now closed.

  1. Andrei Eichler wrote on December 1st, 2011 at 10:17:

    Is it possible to make mouse lock work with touch based devices, or link it with the stick of the xbox controller

  2. Jon Buckley wrote on December 8th, 2011 at 14:44:

    Mouse lock will certainly work with touchpad pointing devices like those on a laptop, but not other touch-based devices. I’m not sure what you mean by linking it with the stick of an Xbox controller, but you could combine the Mouselock API and Gamepads APIs for split-screen multiplayer, or something equally cool!

  3. John Hammink wrote on December 11th, 2011 at 17:17:

    Hey Rob! Nice post – I was planning to reblog it when I noticed that the links to the experimental builds are broken. Have these features landed in the nightlies?

    1. Rob Hawkes wrote on December 12th, 2011 at 13:43:

      Thanks for pointing out the broken links, the FF build links expired and I’ve added more permanent links to the latest version.

      These features haven’t landed in the main Nightly branch yet, however I imagine it won’t be long before that happens.

  4. John Hammink wrote on December 12th, 2011 at 18:14:

    Here are the results I got, when running the demos:

    Tested on try-build on Mac OSX 10.7.2; and Ubuntu 11.10

    Mozilla’s Fullscreen API: Worked on Mac OSX; did not work on Linux

    Cross-Browser Fullscreen API: Worked on both.

    Gamepad API: Worked for me neither on Linux nor Mac NOTE: we only have PS3/Xbox/Kinect controllers (not generic ones). Will try again with generic ones.

    Mouselock Demos:
    Linux: Simple MouseLock; Mouselock Basic worked; others did not (mostly due to missing WebGL etc, I’m guessing). Will try later.

    Mac: Simple MouseLock; Mouselock Basic; Scroll around the world; Cubic VR FPS demo; Quake 3 demos all work!

    1. Rob Hawkes wrote on December 13th, 2011 at 02:27:

      Thanks for the feedback, John. I don’t have experience with Linux but I do with 10.7.2 (what I use here) and it’s interesting that you had problems with the Gamepad API.

      The PS3 controller should work without doing anything fancy so long as you connect it to the Mac via USB. You’ll get some flashing lights on the back and you’ll need to press a button after loading the demo for the controller to be recognised.

      If you don’t see anything in the console and can’t crack it I’d advise jumping in the #paladin channel on Mozilla IRC and asking the devs, they’ll know more about the specifics than I do.

  5. momendo wrote on December 14th, 2011 at 13:16:

    What about motion sensing, pressure sensitivity (analog buttons), and haptic feedback support with PS3 dual-shock 3 controllers?

    http://en.wikipedia.org/wiki/DualShock

    1. Rob Hawkes wrote on December 16th, 2011 at 10:32:

      These are all things that we’d love to support. I know that rumble feedback is already working on Linux and is being working on for the other platforms. As for orientation-detection and pressure sensitivity, it’s something that we’re exploring but as far as I know we’re trying to focus on getting the basics right first. I know from personal experience that pressure-sensitive triggers are working on the xBox 360 controller.

  6. KATIE VETRANO wrote on January 13th, 2012 at 17:19:

    DEAR FIREFOX
    CAN YOU HELP ME TO DOWNLOAD FIRFOX FOR MAC.

    1. Rob Hawkes wrote on January 16th, 2012 at 04:52:

      Hi, you can download Firefox for the Mac from this URL: http://www.mozilla.org/en-US/firefox/fx/

Comments are closed for this article.