|
| 1 | +# p5.joystick.js |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +The **p5.joystick** library aims to facilitate integration with physical Joysticks. |
| 8 | + |
| 9 | +It also has an easy calibration system, allowing you to configure different types of joysticks with the standard button format. |
| 10 | + |
| 11 | +This library uses the [gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API). |
| 12 | + |
| 13 | +Through them it is possible to read directly the status of each joystick. This library also make possible an event based approach. |
| 14 | + |
| 15 | + |
| 16 | +## Installation |
| 17 | + |
| 18 | +It is necessary to insert p5.joystick.js in your html: |
| 19 | +```js |
| 20 | +<script src="js/p5.js"></script> |
| 21 | +<script src="p5.joystick.js"></script> |
| 22 | +<script src="sketch.js"></script> |
| 23 | +``` |
| 24 | + |
| 25 | +### Usage |
| 26 | + |
| 27 | +```js |
| 28 | +var joystick; |
| 29 | + |
| 30 | +function setup() { |
| 31 | + createCanvas(window.innerWidth, window.innerHeight); |
| 32 | + |
| 33 | + joystick = createJoystick(); |
| 34 | + if(!joystick.calibrated()) |
| 35 | + joystick.calibrate(true); |
| 36 | + joystick.onButtonPressed(onJoystick); |
| 37 | + joystick.onButtonReleased(onJoystick); |
| 38 | + joystick.onAxesPressed(onJoystick); |
| 39 | + joystick.onAxesReleased(onJoystick); |
| 40 | +} |
| 41 | + |
| 42 | +function draw(){ |
| 43 | + background(100); |
| 44 | + joystick.draw(width/2, height/2); |
| 45 | +} |
| 46 | + |
| 47 | +function onJoystick(e) { |
| 48 | + console.log("onJoystick", e); |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +## Calibrating |
| 53 | + |
| 54 | +Calibration associates each button on the virtual joystick with the physical joystick. |
| 55 | +You can make different combinations as you wish. |
| 56 | + |
| 57 | +The calibration is automatically saved and loaded into a cookie. |
| 58 | + |
| 59 | + |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +## Methods |
| 64 | + |
| 65 | +### createJoystick([debug]) |
| 66 | + |
| 67 | +Initializes built-in listeners to integrate with gamepad API. |
| 68 | + |
| 69 | +| Parameter | Type | Required | Description | |
| 70 | +| -------- | -------- | -------- | -------- | |
| 71 | +| debug | Boolean | No | If `true`, adds html elements to monitor all connected joysticks and the state of each button. | |
| 72 | + |
| 73 | +### draw(x, y, [width], [height]) |
| 74 | + |
| 75 | +Draws a joystick on the screen in the desired position and size. |
| 76 | + |
| 77 | +| Parameter | Type | Required | Description | |
| 78 | +| -------- | -------- | -------- | -------- | |
| 79 | +| x | Number | Yes | horizontal position on screen. | |
| 80 | +| y | Number | Yes | vertical position on the screen. | |
| 81 | +| width | Number | No | Width of the joystick. Standard value: 440. | |
| 82 | +| height | Number | No | Height of the joystick. Standard value: 200. | |
| 83 | + |
| 84 | +**Notice:** The drawing axis is centered, so the joystick is drawn around the x and y coordinates. |
| 85 | + |
| 86 | +### calibrate(enable) |
| 87 | + |
| 88 | +Enable/Disable calibration mode. |
| 89 | + |
| 90 | +| Parameter | Type | Required | Description | |
| 91 | +| -------- | -------- | -------- | -------- | |
| 92 | +| enable | Boolean | Yes | Enable/Disable calibration mode. | |
| 93 | + |
| 94 | +### getButtonPressedByName(name) |
| 95 | + |
| 96 | +Returns a boolean button state: `true` or `false`. |
| 97 | + |
| 98 | + |
| 99 | +| Parameter | Type | Required | Description | |
| 100 | +| -------- | -------- | -------- | -------- | |
| 101 | +| gamepadIndex | Integer | Yes | Joystick index. | |
| 102 | +| name | String | Yes | Button name: sholderLeft, sholderRight, axesUp, axesDown, axesLeft, axesRight, buttonBlue, buttonYellow, buttonRed, buttonGreen, start or select. | |
| 103 | + |
| 104 | +**Notice:** Only works when calibrated. |
| 105 | + |
| 106 | +### getButtonPressedByIndex(gamepadIndex, buttonIndex) |
| 107 | + |
| 108 | +Returns a boolean button state: `true` or `false`. |
| 109 | + |
| 110 | +| Parameter | Type | Required | Description | |
| 111 | +| -------- | -------- | -------- | -------- | |
| 112 | +| gamepadIndex | Integer | Yes | Joystick index. | |
| 113 | +| buttonIndex | Integer | Yes | Button index. | |
| 114 | + |
| 115 | +### getAxesValueByIndex(gamepadIndex, axesIndex) |
| 116 | + |
| 117 | +Returns a integer axis state: `-1`, `0`, `1`. |
| 118 | + |
| 119 | +| Parameter | Type | Required | Description | |
| 120 | +| -------- | -------- | -------- | -------- | |
| 121 | +| gamepadIndex | Integer | Yes | Joystick index. | |
| 122 | +| axesIndex | Integer | Yes | Axes index. | |
| 123 | + |
| 124 | +## Events |
| 125 | + |
| 126 | +Events return an object with the following properties: |
| 127 | + |
| 128 | +| Property | Type | Description | |
| 129 | +| -------- | -------- | -------- | |
| 130 | +| gamepadName | String | Joystick name. | |
| 131 | +| gamepadIndex | Integer | Joystick index. | |
| 132 | +| index | Integer | Button index. | |
| 133 | +| name | String | Button name: sholderLeft, sholderRight, axesUp, axesDown, axesLeft, axesRight, buttonBlue, buttonYellow, buttonRed, buttonGreen, start or select. Return empty "" if the joystick is not calibrated. | |
| 134 | +| pressed | Boolean | Button is pressed or not. | |
| 135 | +| type | String | Button type: axes or button. | |
| 136 | +| value | Integer | "axes" can return directions -1, 0 or 1, and buttons can return 0 or 1. | |
| 137 | + |
| 138 | +There are 4 types of events: |
| 139 | + |
| 140 | +### onButtonPressed |
| 141 | + |
| 142 | +Triggered when a button is pressed. |
| 143 | +```js |
| 144 | +joystick.onButtonPressed(function(eventObj){}); |
| 145 | +``` |
| 146 | + |
| 147 | +### onButtonReleased |
| 148 | + |
| 149 | +Triggered when a button is released. |
| 150 | +```js |
| 151 | +joystick.onButtonReleased(function(eventObj){}); |
| 152 | +``` |
| 153 | + |
| 154 | +### onAxesPressed |
| 155 | + |
| 156 | +Triggered when an axes is pressed. |
| 157 | +```js |
| 158 | +joystick.onAxesPressed(function(eventObj){}); |
| 159 | +``` |
| 160 | + |
| 161 | +### onAxesReleased |
| 162 | + |
| 163 | +Triggered when an axes is released. |
| 164 | +```js |
| 165 | +joystick.onAxesReleased(function(eventObj){}); |
| 166 | +``` |
0 commit comments