gp-controls

A polling interface for the HTML5 Gamepad API, similar to kb-controls.

Installation

gp-controls is written for browserify, and you can install it using NPM:

npm install gp-controls

Tested/Supported Controllers/Browsers

I've only had the chance to test with the Logitech Gamepad F310, but I can confirm it works on my Mac! PS3 controllers seem to work, but not in browsers. Xbox controllers should be seamless on Windows.

Tested in Chrome, and soon Firefox. Other browsers currently don't support the Gamepad API.

Usage

controller = require('gp-controls')([number,] bindings)

Creates a controller using bindings from gkey's generic controller:

• <axis-left-x>
• <axis-left-y>
• <axis-right-x>
• <axis-right-y>
• <action 1>
• <action 2>
• <action 3>
• <action 4>
• <shoulder-top-left>
• <shoulder-top-right>
• <shoulder-bottom-left>
• <shoulder-bottom-right>
• <meta 1>
• <meta 2>
• <stick-button 1>
• <stick-button 2>
• <up>
• <down>
• <left>
• <right>

Where buttons will be values between 0 and 1, and axes will be between -1 and

1. Optionally, you can pass a number between 0 and 3 to pick a specific controller by its index.

controller.poll()

Updates the state of the controls. This should be called during your requestAnimationFrame loop, before you check the controls themselves.

controller.enabled

After polling, this will be set to true if the controller is enabled/accessible.

controller.inputs

An object with the values of your controls. In the example below, it will have the properties move_x, move_y and fast.

Example

var raf = require('raf')
var controller = require('gp-controls')({
    '<axis-left-x>': 'move_x'
  , '<axis-left-y>': 'move_y'
  , '<action 1>': 'fast'
})

var canvas = document.createElement('canvas')
  , ctx = canvas.getContext('2d')
  , x = (canvas.width = window.innerWidth) / 2
  , y = (canvas.height = window.innerHeight) / 2

raf(document.body).on('data', function() {
  controller.poll()

  var speed = controller.inputs.fast ? 4 : 2
  x += speed * controller.inputs.move_x
  y += speed * controller.inputs.move_y

  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#000'
  ctx.fillRect(x - 12, y - 12, 24, 24)
})

document.body.appendChild(canvas)