Gamepad controls for A-Frame.
Supports one or more gamepads, attached to an A-Frame scene. When used on a mobile device,
gamepad-controls can also receive input from a gamepad connected to a host machine, using ProxyControls.js.
<!-- A-Frame Library --><!-- Component --><!-- ... -->
Install NPM module.
$ npm install aframe-gamepad-controls
var AFRAME = ;var GamepadControls = ;AFRAME;
<!-- First-person controls --><!-- Third-person controls --><!-- Two players -->
To edit the component or play with examples, download the project and run:
npm installnpm run dev
The demo will run at http://localhost:8000/.
Mobile / Cardboard + Gamepad
In Chrome on Android, USB gamepads can be connected with an OTG adapter. For a Nexus 5X, I use this. I'm not aware of a way to connect a gamepad in iOS, but definitely let me know if there's something I'm missing.
gamepad-controls component can also receive remote events with WebRTC, if a
proxy-controls element is attached to the scene. More details about ProxyControls.js.
When buttons are pressed on the gamepad, a GamepadButtonEvent is emitted on the element. Components and entities may listen for these events and modify behavior as needed. Example:
|index||int||Index of the button affected, 0..N.|
|pressed||boolean||Whether or not the button is currently pressed.|
|value||float||Distance the button was pressed, if applicable. Value will be 0 or 1 in most cases, but may return a float on the interval [0..1] for trigger-like buttons.|
For convenience, additional events are fired including the button index, providing a way to bind events to specific buttons using only markup. To play
Button 7 is pressed (right trigger on an Xbox controller), you might do this:
Finally, your code may call the
gamepad-controls component directly to request the state of a button, as a GamepadButton instance:
elcomponents'gamepad-controls';// Returns a GamepadButton instance.
|controller||0||Which controller (0..3) the object should be attached to.|
|enabled||true||Enables all events on this controller.|
|movementEnabled||true||Enables movement via the left thumbstick.|
|flyEnabled||false||Whether or not movement is restricted to the entity’s initial plane.|
|invertAxisY||false||Invert Y axis of view rotation thumbstick.|
|debug||false||When true, shows debugging info in the console.|