gp-controls

A polling interface for the HTML5 Gamepad API

npm install gp-controls
4 downloads in the last month

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

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)
npm loves you