Take Control

of the Game

with the Gamepad API

Meet.js Lublin 2015

Andrzej Mazur@end3rEnclave Games
Meet.js Lublin — Lublin, Poland — September 3rd 2015

HTML5 Game Developer

Andrzej Mazur

Status

W3C Working Draft

www.w3.org/TR/gamepad/

Core editors:

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

Gamepad API demo

Gamepad API demo

end3r.github.io/Gamepad-API-Content-Kit/demo/index.html

Browser Support

Gamepad API browser support

Chrome

Gamepad API browser support - Chrome

Version 21+ (prefixes), 35+ (default) [45]

Firefox

Gamepad API browser support - Firefox

Version 24+ (prefixes), 29+ (default) [40]

Opera

Gamepad API browser support - Opera

Version 15+ (prefixes), 22+ (default) [31]

Safari

Gamepad API browser support - Safari

No support

Internet Explorer

Gamepad API browser support - IE

No support

Edge

Gamepad API browser support - Edge

Version 12+

Can I Use?

Gamepad API - Can I Use caniuse.com/gamepad

Supported Devices

Gamepad devices

Most popular: XBox 360/One, PS3/PS4 on Windows/Mac.

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;

Case Study: Hungry Fridge

Hungry Fridge - main menu

The idea

GitHub Game Off II theme: Change

  • Good food vs bad food
  • Mobile vs desktop

Good food vs bad food

Hungry Fridge - how to play on mobile

Mobile

Hungry Fridge - gameplay on mobile

Desktop

Hungry Fridge - gameplay on desktop

Let's play!

fridge.enclavegames.com

Web API

Dead Trigger 2

Full Screen, Pointer Lock, Gamepad

Using the Gamepad API

to control the slides

about the Gamepad API

We need to go deeper

Firefox OS TV

Panasonic Firefox OS TV

WebVR and the future of the Web

WebVR Oculus Touch

Resources

Gamepad API resources end3r.github.io/Gamepad-API-Content-Kit/#resources

Summary

Gamepad API is OK!

Supported, easy to implement, no plugins.

Rich console-like experience in the browser!

js13kGames

js13kgames.com

Thanks! Questions?

 

 

end3r.com/slides/meetjslublin-gamepad

 

 

Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r