twoBirds Plugin Gamepad
Welcome Birdies ;-)
Disclaimer
Work in progress...
Intro
twobirds-plugin-gamepad adds a gamepad device interface to the system.
It works like in this example: (tbd)
<!DOCTYPE html>
<html>
<head>
<title>twoBirds Gamepad Plugin</title>
<script type="text/javascript" src="js/tb/tb.js"></script>
<script type="text/javascript" src="js/gamepad.js"></script>
</head>
<body>
</body>
</html>Plugin your gamepad or joystick, hit a button, then on your console, do:
> tb.Gamepad.controllers // this is a hash object containing the controllers plugged in, denominated by their ID
// ( atm no two controllers of the same kind ( = same ID ) are allowed, therefore )
// on my system, I have a Logitech joystick, which will result in this output:
Object { 046d-c286-Logitech Logitech Force 3D Pro={...}}
// looking up the inner object (e.g. in the firebug DOM tab) will yield these results:
046d-c286-Logitech Logitech Force 3D Pro: {
gamepad: <system controller object>,
id: "046d-c286-Logitech Logitech Force 3D Pro",
callback: function(),
getMapping: getMapping(),
setMapping: setMapping(pMapping),
values: <twoBirds observable>
}Any controller in this object has an observable named 'values' that you can attach a callback to. This callback will be called whenever the controller states change - with the actual states as a parameter object.
So first, you may want to add the callback function into your controller like so:
> tb.Gamepad.controllers['046d-c286-Logitech Logitech Force 3D Pro'].values.observe( function( pValues ){ console.log( pValues ) } );If you now move your joystick or in general do whatever you want with the controller, your console will display it like so:
Object { axes=[6], buttons=[12], timestamp=3603221.83}
Object { axes=[6], buttons=[12], timestamp=3603262.065}
Object { axes=[6], buttons=[12], timestamp=3603300.815}
Object { axes=[6], buttons=[12], timestamp=3603357.7600000002}
Object { axes=[6], buttons=[12], timestamp=3603408.545}
Object { axes=[6], buttons=[12], timestamp=3603448.33}
Object { axes=[6], buttons=[12], timestamp=3603501.43}
Object { axes=[6], buttons=[12], timestamp=3603545.045}
Object { axes=[6], buttons=[12], timestamp=3603592.5100000002}
Object { axes=[6], buttons=[12], timestamp=3603661.4250000003}
Object { axes=[6], buttons=[12], timestamp=3603758.34}
Object { axes=[6], buttons=[12], timestamp=3607997.5500000003}
As you see, you will get an object containing controller axes, button states and a timestamp indicating how much time has elapsed since the controller was initialized.
Will this is enough to access the controller, it is not very convenient to work with.
There is a pretty easy way to convert these to named variables, though - you add a mapping just like this:
localStorage.setItem(
'device_mapping',
JSON.stringify(
{
'046d-c286-Logitech Logitech Force 3D Pro': {
axes: ('x y z t c1 c2').split(' '),
buttons: ('b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 b11').split(' ')
}
}
)
);
Since this resides in the client browsers localstore, you dont have to do it every time
So from now on, we have a mapping from the original axes & buttons to a simple hash object like this:
Object { x=0, y=0, z=0, mehr...}
Object { x=0, y=-0.2467726618051529, z=0, mehr...}
Object { x=-0.013000885024666786, y=-0.3039338290691376, z=0, mehr...}
Object { x=0, y=-0.14029358327388763, z=0, mehr...}
Object { x=0, y=0, z=0, mehr...}
Object { x=0.29090243577957153, y=0, z=0.06183050200343132, mehr...}
Object { x=0.02075258642435074, y=0, z=0, mehr...}
Object { x=-0.013000885024666786, y=-0.10132145136594772, z=0, mehr...}
For axes, you get their plain values, for buttons you get true or false ( indicating 'isPressed' ). If you click a button, you get two states therefore: one indicating is 'down' position and returning true, the next one indicationg 'up' via false.
You simply import these values as controller states into your game loop, and there you have it. Enjoy!
In case of questions contact me.