Playing Around

with the

Gamepad API

Front-Trends

Andrzej Mazur@end3rEnclave Games
Front-Trends — Warsaw, Poland — May 7-9th 2014

Status

W3C Draft:

www.w3.org/TR/gamepad/

Editors:

  • Ted Mielczarek (Mozilla)
  • Scott Graham (Google)

Browser Support

Gamepad API browser support

Chrome

Gamepad API browser support - Chrome

Version 21+ (prefixes)

Firefox

Gamepad API browser support - Firefox

Version 29+ (Australis - April 29th 2014)

Version 24+ (prefixes⁄config)

Other browsers?

Gamepad API browser support - Opera, Safari, IE
  • Opera - only rumors
  • Safari - no support
  • IE - in development

Supported Devices

Gamepad devices
  • Best: wired Xbox 360 on Windows, worst: Xbox One
  • Tested: wireless Xbox 360 and PS3 on Mac (+driver)

Case Study: Hungry Fridge

Hungry Fridge - screen 1

The idea

GitHub Game Off II theme: Change

  • Good food vs bad food
  • Mobile vs desktop

Good food vs bad food

Hungry Fridge - screen 2

Mobile vs desktop

Hungry Fridge - screen 3

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.

Axis threshold
Config.threshold = 0.5;

Demo Time!

fridge.enclavegames.com

Summary

  • Easy to implement
  • No plugins
  • A lot of fun
  • Rich console-like experience...
  • ...in the browser!

Resources

Thanks! Questions?

 

 

Slides: end3r.com/slides/ft14-gamepad

 

 

Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r