https://github.com/donmccurdy/aframe-gamepad-controls
:video_game: Gamepad controls for A-Frame VR.
https://github.com/donmccurdy/aframe-gamepad-controls
aframe gamepad webvr
Last synced: 9 months ago
JSON representation
:video_game: Gamepad controls for A-Frame VR.
- Host: GitHub
- URL: https://github.com/donmccurdy/aframe-gamepad-controls
- Owner: donmccurdy
- License: mit
- Archived: true
- Created: 2015-12-31T04:16:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-23T00:41:32.000Z (almost 8 years ago)
- Last Synced: 2025-01-13T11:11:20.960Z (over 1 year ago)
- Topics: aframe, gamepad, webvr
- Language: JavaScript
- Homepage: https://donmccurdy.github.io/aframe-gamepad-controls/
- Size: 118 KB
- Stars: 68
- Watchers: 8
- Forks: 29
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame `gamepad-controls`
> **NOTICE**: This project is no longer maintained. I recommend using `movement-controls` from [A-Frame Extras](https://github.com/donmccurdy/aframe-extras) instead.
Gamepad controls for A-Frame.
Demo: https://donmccurdy.github.io/aframe-gamepad-controls/
## Overview
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](https://proxy-controls.donmccurdy.com).
This component uses the HTML5 [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API). The underlying API supports Firefox, Chrome, Edge, and Opera ([as of 01/2016](http://caniuse.com/#search=gamepad)). Safari and Internet Explorer do not currently support gamepads.
## Usage (script)
```html
```
## Usage (NPM)
Install NPM module.
```
$ npm install aframe-gamepad-controls
```
Register `gamepad-controls` component.
```javascript
var AFRAME = require('aframe');
var GamepadControls = require('aframe-gamepad-controls');
AFRAME.registerComponent('gamepad-controls', GamepadControls);
```
Add markup.
```html
```
## Development
To edit the component or play with examples, [download the project](https://github.com/donmccurdy/aframe-gamepad-controls/archive/master.zip) and run:
```shell
npm install
npm run dev
```
The demo will run at [http://localhost:8000/](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](http://www.amazon.com/gp/product/B00XHOGEZG). 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.
The `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](https://proxy-controls.donmccurdy.com).
Example:
```html
```
## Gear VR
A-Frame supports the Gear VR controller with `gear-vr-controller`, but for Gear VR's without a controller, this component can be used to handle it's trackpad events.
For a cursor-based setup, `downEvents` must be set to `gamepadbuttondown`. For example:
```html
```
## Button Events
When buttons are pressed on the gamepad, a [GamepadButtonEvent](https://github.com/donmccurdy/aframe-gamepad-controls/blob/master/lib/GamepadButtonEvent.js) is emitted on the element. Components and entities may listen for these events and modify behavior as needed. Example:
```javascript
el.addEventListener('gamepadbuttondown', function (e) {
console.log('Button "%d" has been pressed.', e.index);
});
```
**GamepadButtonEvent:**
Property | Type | Description
---------|---------|--------------
type | string | Either `gamepadbuttondown` or `gamepadbuttonup`.
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.
**Markup-only Binding:**
For convenience, additional events are fired including the button index, providing a way to bind events to specific buttons using only markup. To play `pew-pew.wav` when `Button 7` is pressed (right trigger on an Xbox controller), you might do this:
```html
```
Finally, your code may call the `gamepad-controls` component directly to request the state of a button, as a [GamepadButton](https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton) instance:
```javascript
el.components['gamepad-controls'].getButton(index);
// Returns a GamepadButton instance.
```
## Options
Property | Default | Description
------------------|---------|-------------
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.
lookEnabled | true | `true`, or `false`. Enables view rotation via the right 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.