Status

W3C Working Draft

www.w3.org/TR/gamepad/

Browser Support

Chrome 35+, Firefox 29+ Opera 22+, Edge 12+

Chrome for Android 45+

Can I Use?

Gamepad API Implementation

Privacy: interact first while the page is visible to get the event.

Connecting the Gamepad

window.addEventListener("gamepadconnected", function(e) {
	console.log("Gamepad connected: "+e.gamepad.id);
});

Detecting disconnection

window.addEventListener("gamepaddisconnected", function(e) {
	console.log("Gamepad disconnected: "+e.gamepad.id);
});

The Gamepad Object

• id - information about the controller
• index - unique integer of the connected device
• connected - true if connected
• mapping - layout of the buttons, "standard"
• axes - array of floating point values, state of each axis
• buttons - array of GamepadButton objects, state of each button, pressed and value properties

Detecting button presses

function addgamepad(gamepad) {
  controllers[gamepad.index] = gamepad;
  window.requestAnimationFrame(updateStatus);
}

function updateStatus() {
  for(c in controllers) {
    var controller = controllers[c];
    for(var i=0; i<controller.buttons.length; i++) {
      var buttonPressed = controller.buttons[i].pressed;
      if(buttonPressed) {
        console.log("Button id="+i+" was pressed");
      } else {
        console.log("Button id="+i+" was released");
      }
    }
  }
}

Axis threshold

Buttons: integer, 0 or 1.

Axes: float, -1 to 1.

Config.threshold = 0.5;

Case Study: Hungry Fridge

Mobile

Desktop

Let's play!

fridge.enclavegames.com

Web API

Full Screen, Pointer Lock, Gamepad

Firefox OS TV

WebVR and the future of the Web