pixijs-input-devices 0.5.8 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +227 -179
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +104 -96
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -12
package/README.md
CHANGED
|
@@ -1,53 +1,76 @@
|
|
|
1
1
|
# 🎮 PixiJS Input Devices [](https://github.com/reececomo/pixijs-input-devices/blob/main/LICENSE) [](https://github.com/reececomo/pixijs-input-devices/actions/workflows/tests.yml) [](https://www.npmjs.com/package/pixijs-input-devices) [](https://www.npmjs.com/package/pixijs-input-devices)
|
|
2
2
|
|
|
3
|
-
⚡ Simple
|
|
3
|
+
⚡ Simple & powerful input device support for a variety of devices in PixiJS
|
|
4
4
|
|
|
5
5
|
| | |
|
|
6
6
|
| ------ | ------ |
|
|
7
|
-
| 🎮
|
|
8
|
-
| ⚡ Optimized for [
|
|
9
|
-
| 🔮 Highly configurable |
|
|
10
|
-
| ✅ Cross-platform & mobile-friendly <sup>[[1]](https://caniuse.com/mdn-api_keyboardlayoutmap) [[2]](https://caniuse.com/mdn-api_gamepad_vibrationactuator) [[3]](https://chromestatus.com/feature/5989275208253440)</sup> |
|
|
7
|
+
| 🎮 Instant [keyboard](#keyboarddevice), [gamepads](#gamepaddevice), and [custom device](#custom-devices) support | 🚀 [Real-time](#real-time) & [event-driven](#keyboarddevice-events) APIs |
|
|
8
|
+
| ⚡ Optimized for [performance](https://web.dev/articles/inp) | 🧭 Built-in [UI navigation](#uinavigation-api) |
|
|
9
|
+
| 🔮 Highly configurable (with sensible defaults) | 🪄 Supports [input binding](#named-binds) |
|
|
10
|
+
| ✅ Cross-platform & mobile-friendly <sup>[[1]](https://caniuse.com/mdn-api_keyboardlayoutmap) [[2]](https://caniuse.com/mdn-api_gamepad_vibrationactuator) [[3]](https://chromestatus.com/feature/5989275208253440)</sup> | 🌐 Automatic [Intl layouts](#keyboard-layout---detection) detection |
|
|
11
11
|
| 🍃 Zero dependencies & tree-shakeable | ✨ Supports PixiJS v8, v7, v6.3+ |
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
*Handle device inputs with ease.*
|
|
14
|
+
## Basic Usage
|
|
17
15
|
|
|
18
16
|
```ts
|
|
19
|
-
import { InputDevice
|
|
17
|
+
import { InputDevice } from "pixijs-input-devices";
|
|
18
|
+
|
|
19
|
+
let moveX = 0.0,
|
|
20
|
+
jump = false;
|
|
21
|
+
|
|
22
|
+
for (const device of InputDevice.devices)
|
|
23
|
+
{
|
|
24
|
+
if (device.bindDown("left")) moveX = -1;
|
|
25
|
+
if (device.bindDown("right")) moveX = 1;
|
|
26
|
+
if (device.bindDown("jump")) jump = true;
|
|
27
|
+
|
|
28
|
+
if (device.type === "gamepad" && device.leftJoystick.x != 0.0)
|
|
29
|
+
{
|
|
30
|
+
moveX = device.leftJoystick.x;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
20
34
|
|
|
35
|
+
#### Configure binds
|
|
21
36
|
|
|
22
|
-
|
|
37
|
+
```ts
|
|
38
|
+
import { GamepadDevice, KeyboardDevice } from "pixijs-input-devices";
|
|
39
|
+
|
|
40
|
+
// ⌨️ keyboard
|
|
23
41
|
KeyboardDevice.global.configureBinds({
|
|
24
|
-
jump:
|
|
25
|
-
|
|
42
|
+
jump: ["Space"],
|
|
43
|
+
left: ["KeyA", "ArrowLeft"],
|
|
44
|
+
right: ["KeyD", "ArrowRight"],
|
|
45
|
+
});
|
|
26
46
|
|
|
47
|
+
// 🎮 gamepads
|
|
27
48
|
GamepadDevice.configureDefaultBinds({
|
|
28
|
-
|
|
29
|
-
|
|
49
|
+
left: ["DpadLeft"],
|
|
50
|
+
right: ["DpadRight"],
|
|
51
|
+
jump: ["Face1"],
|
|
52
|
+
});
|
|
53
|
+
```
|
|
30
54
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if ( device.pressedBind("jump") ) // ...
|
|
34
|
-
}
|
|
55
|
+
> [!TIP]
|
|
56
|
+
> See [**Named binds**](#named-binds) for more information on configuring devices.
|
|
35
57
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
58
|
+
#### Events
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
// targeted
|
|
62
|
+
device.onBindDown("menu", ({ device }) => { });
|
|
63
|
+
|
|
64
|
+
// global
|
|
65
|
+
InputDevice.onBindDown("menu", ({ device }) => { });
|
|
42
66
|
```
|
|
43
67
|
|
|
44
|
-
##
|
|
68
|
+
## 💿 Install
|
|
45
69
|
|
|
46
70
|
*Everything you need to quickly integrate device management.*
|
|
47
71
|
|
|
48
|
-
**PixiJS Input Devices**
|
|
49
|
-
|
|
50
|
-
navigate existing pointer-based UIs.
|
|
72
|
+
**PixiJS Input Devices** provides an input manager, and a navigation manager that enables
|
|
73
|
+
non-pointer devices to navigate pointer-based user interfaces (UIs).
|
|
51
74
|
|
|
52
75
|
The key concepts are:
|
|
53
76
|
|
|
@@ -76,10 +99,11 @@ yarn add pixijs-input-devices --dev
|
|
|
76
99
|
**2.** Register the update loop:
|
|
77
100
|
|
|
78
101
|
```ts
|
|
79
|
-
import { Ticker } from 'pixi.js'
|
|
80
|
-
import { InputDevice } from 'pixijs-input-devices'
|
|
102
|
+
import { Ticker } from 'pixi.js'
|
|
103
|
+
import { InputDevice } from 'pixijs-input-devices'
|
|
81
104
|
|
|
82
|
-
|
|
105
|
+
|
|
106
|
+
Ticker.shared.add(() => InputDevice.update())
|
|
83
107
|
```
|
|
84
108
|
|
|
85
109
|
> [!TIP]
|
|
@@ -88,14 +112,15 @@ Ticker.shared.add(ticker => InputDevice.update());
|
|
|
88
112
|
**3.** (Optional) enable the UINavigation API
|
|
89
113
|
|
|
90
114
|
```ts
|
|
91
|
-
import * as PIXI from 'pixi.js'
|
|
92
|
-
import { UINavigation, registerPixiJSNavigationMixin } from 'pixijs-input-devices'
|
|
115
|
+
import * as PIXI from 'pixi.js'
|
|
116
|
+
import { UINavigation, registerPixiJSNavigationMixin } from 'pixijs-input-devices'
|
|
117
|
+
|
|
93
118
|
|
|
94
119
|
const app = new PIXI.Application(/*…*/)
|
|
95
120
|
|
|
96
121
|
// enable the navigation API
|
|
97
|
-
UINavigation.configureWithRoot(
|
|
98
|
-
registerPixiJSNavigationMixin(
|
|
122
|
+
UINavigation.configureWithRoot(app.stage)
|
|
123
|
+
registerPixiJSNavigationMixin(PIXI.Container)
|
|
99
124
|
```
|
|
100
125
|
|
|
101
126
|
✨ You are now ready to use inputs!
|
|
@@ -108,46 +133,65 @@ The `InputDevice` singleton controls all device discovery.
|
|
|
108
133
|
|
|
109
134
|
```ts
|
|
110
135
|
InputDevice.keyboard // KeyboardDevice
|
|
111
|
-
InputDevice.gamepads //
|
|
112
|
-
InputDevice.custom //
|
|
136
|
+
InputDevice.gamepads // GamepadDevice[]
|
|
137
|
+
InputDevice.custom // Device[]
|
|
113
138
|
```
|
|
114
139
|
|
|
115
140
|
You can access all **active/connected** devices using `.devices`:
|
|
116
141
|
|
|
117
142
|
```ts
|
|
118
|
-
for (
|
|
143
|
+
for (const device of InputDevice.devices) { // …
|
|
119
144
|
```
|
|
120
145
|
|
|
121
146
|
#### InputDevice - properties
|
|
122
147
|
|
|
148
|
+
The `InputDevice` manager provides the following **context capability** properties:
|
|
149
|
+
|
|
123
150
|
| Property | Type | Description |
|
|
124
151
|
|---|---|---|
|
|
125
|
-
| `InputDevice.
|
|
126
|
-
| `InputDevice.
|
|
152
|
+
| `InputDevice.hasMouseLikePointer` | `boolean` | Whether the context has a mouse/trackpad. |
|
|
153
|
+
| `InputDevice.isMobile` | `boolean` | Whether the context is mobile capable. |
|
|
154
|
+
| `InputDevice.isTouchCapable` | `boolean` | Whether the context is touchscreen capable. |
|
|
155
|
+
|
|
156
|
+
As well as shortcuts to **connected devices**:
|
|
157
|
+
|
|
158
|
+
| Accessor | Type | Description |
|
|
159
|
+
|---|---|---|
|
|
127
160
|
| `InputDevice.lastInteractedDevice` | `Device?` | The most recently interacted device (or first if multiple). |
|
|
128
161
|
| `InputDevice.devices` | `Device[]` | All active, connected devices. |
|
|
129
162
|
| `InputDevice.keyboard` | `KeyboardDevice` | The global keyboard. |
|
|
130
163
|
| `InputDevice.gamepads` | `GamepadDevice[]` | Connected gamepads. |
|
|
131
|
-
| `InputDevice.custom` | `CustomDevice[]` |
|
|
164
|
+
| `InputDevice.custom` | `CustomDevice[]` | Any custom devices. |
|
|
132
165
|
|
|
133
166
|
#### InputDevice - on() Events
|
|
134
167
|
|
|
135
168
|
Access global events directly through the manager:
|
|
136
169
|
|
|
137
170
|
```ts
|
|
138
|
-
InputDevice.on(
|
|
139
|
-
//
|
|
171
|
+
InputDevice.on("deviceadded", ({ device }) => {
|
|
172
|
+
// new device was connected or became available
|
|
140
173
|
// do additional setup here, show a dialog, etc.
|
|
141
174
|
})
|
|
142
175
|
|
|
143
|
-
InputDevice.off(
|
|
176
|
+
InputDevice.off("deviceadded") // stop listening
|
|
144
177
|
```
|
|
145
178
|
|
|
146
179
|
| Event | Description | Payload |
|
|
147
180
|
|---|---|---|
|
|
148
181
|
| `"deviceadded"` | `{device}` | A device has been added. |
|
|
149
182
|
| `"deviceremoved"` | `{device}` | A device has been removed. |
|
|
183
|
+
| `"lastdevicechanged"` | `{device}` | The _last interacted device_ has changed. |
|
|
184
|
+
|
|
150
185
|
|
|
186
|
+
#### InputDevice - onBindDown() Events
|
|
187
|
+
|
|
188
|
+
You may also subscribe globally to **named bind** events:
|
|
189
|
+
|
|
190
|
+
```ts
|
|
191
|
+
InputDevice.onBindDown("my_custom_bind", (event) => {
|
|
192
|
+
// a bound input waas triggered
|
|
193
|
+
})
|
|
194
|
+
```
|
|
151
195
|
|
|
152
196
|
### KeyboardDevice
|
|
153
197
|
|
|
@@ -156,7 +200,7 @@ Unlike gamepads & custom devices, there is a single global keyboard device.
|
|
|
156
200
|
```ts
|
|
157
201
|
let keyboard = InputDevice.keyboard
|
|
158
202
|
|
|
159
|
-
if (
|
|
203
|
+
if (keyboard.key.ControlLeft) { // …
|
|
160
204
|
```
|
|
161
205
|
|
|
162
206
|
> [!NOTE]
|
|
@@ -168,7 +212,7 @@ if ( keyboard.key.ControlLeft ) { // …
|
|
|
168
212
|
```ts
|
|
169
213
|
keyboard.layout // "AZERTY" | "JCUKEN" | "QWERTY" | "QWERTZ"
|
|
170
214
|
|
|
171
|
-
keyboard.getKeyLabel(
|
|
215
|
+
keyboard.getKeyLabel("KeyZ") // Я
|
|
172
216
|
```
|
|
173
217
|
|
|
174
218
|
> [!NOTE]
|
|
@@ -176,7 +220,7 @@ keyboard.getKeyLabel( "KeyZ" ) // Я
|
|
|
176
220
|
> Almost every keyboard is one of these four (or a regional derivative – e.g. Hangeul,
|
|
177
221
|
> Kana). There is no built-in detection for specialist or esoteric layouts (e.g. Dvorak, Colemak, BÉPO).
|
|
178
222
|
>
|
|
179
|
-
> The `keyboard.getKeyLabel(
|
|
223
|
+
> The `keyboard.getKeyLabel(key)` uses the [KeyboardLayoutMap API](https://caniuse.com/mdn-api_keyboardlayoutmap)
|
|
180
224
|
> when available, before falling back to default AZERTY, JCUKEN, QWERTY or QWERTZ key values.
|
|
181
225
|
|
|
182
226
|
The keyboard layout is automatically detected from (in order):
|
|
@@ -191,7 +235,7 @@ You can also manually force the layout:
|
|
|
191
235
|
// force layout
|
|
192
236
|
InputDevice.keyboard.layout = "JCUKEN"
|
|
193
237
|
|
|
194
|
-
InputDevice.keyboard.getKeyLabel(
|
|
238
|
+
InputDevice.keyboard.getKeyLabel("KeyW") // "Ц"
|
|
195
239
|
InputDevice.keyboard.layoutSource // "manual"
|
|
196
240
|
```
|
|
197
241
|
|
|
@@ -200,7 +244,7 @@ InputDevice.keyboard.layoutSource // "manual"
|
|
|
200
244
|
| Event | Description | Payload |
|
|
201
245
|
|---|---|---|
|
|
202
246
|
| `"layoutdetected"` | `{layout,layoutSource,device}` | The keyboard layout (`"QWERTY"`, `"QWERTZ"`, `"AZERTY"`, or `"JCUKEN"`) has been detected, either from the native API or from keypresses. |
|
|
203
|
-
| `"
|
|
247
|
+
| `"binddown"` | `{name,event,keyCode,keyLabel,device}` | A **named bind** key was pressed. |
|
|
204
248
|
| **Key presses:** | | |
|
|
205
249
|
| `"KeyA"` | `{event,keyCode,keyLabel,device}` | The `"KeyA"` was pressed. |
|
|
206
250
|
| `"KeyB"` | `{event,keyCode,keyLabel,device}` | The `"KeyB"` was pressed. |
|
|
@@ -215,11 +259,22 @@ Gamepads are automatically detected via the browser API when first interacted wi
|
|
|
215
259
|
Gamepad accessors are modelled around the "Standard Controller Layout":
|
|
216
260
|
|
|
217
261
|
```ts
|
|
218
|
-
|
|
262
|
+
const gamepad = InputDevice.gamepads[0];
|
|
219
263
|
|
|
220
|
-
if (
|
|
221
|
-
|
|
222
|
-
|
|
264
|
+
if (gamepad.button.DpadDown)
|
|
265
|
+
{
|
|
266
|
+
// button pressed
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
if (gamepad.leftTrigger > 0.25)
|
|
270
|
+
{
|
|
271
|
+
// trigger pulled
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
if (gamepad.leftJoystick.x < -0.33)
|
|
275
|
+
{
|
|
276
|
+
// joystick moved
|
|
277
|
+
}
|
|
223
278
|
```
|
|
224
279
|
|
|
225
280
|
> [!TIP]
|
|
@@ -228,39 +283,69 @@ if ( gamepad.leftJoystick.x > 0.5 ) { // …
|
|
|
228
283
|
|
|
229
284
|
#### Vibration & Haptics
|
|
230
285
|
|
|
231
|
-
Use the `
|
|
286
|
+
Use the `playHaptic()` method to play a haptic vibration effect on supported devices.
|
|
232
287
|
|
|
233
288
|
```ts
|
|
234
|
-
|
|
289
|
+
device.playHaptic({
|
|
235
290
|
duration: 150,
|
|
236
|
-
|
|
237
|
-
|
|
291
|
+
rumble: 0.75,
|
|
292
|
+
buzz: 0.25,
|
|
293
|
+
rightTrigger: 0.1, // limited support
|
|
238
294
|
// …
|
|
239
|
-
})
|
|
295
|
+
});
|
|
240
296
|
```
|
|
241
297
|
|
|
298
|
+
and to cancel all haptics:
|
|
299
|
+
|
|
300
|
+
```ts
|
|
301
|
+
device.stopHaptics();
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
##### Multiple simultaneous haptics on Gamepads
|
|
305
|
+
|
|
306
|
+
Haptics automatically manage their queue under-the-hood, so you can combine or queue
|
|
307
|
+
them very easily.
|
|
308
|
+
|
|
309
|
+
```ts
|
|
310
|
+
device.playHaptic({ duration: 150, buzz: 0.75 });
|
|
311
|
+
device.playHaptic({ duration: 500, rumble: 0.5 });
|
|
312
|
+
device.playHaptic({ duration: 250, rumble: 1.0 });
|
|
313
|
+
device.playHaptic({
|
|
314
|
+
startDelay: 450,
|
|
315
|
+
duration: 300
|
|
316
|
+
leftTrigger: 0.25,
|
|
317
|
+
rightTrigger: 0.25,
|
|
318
|
+
buzz: 1.0,
|
|
319
|
+
rumble: device.supportsTriggerRumble ? 0.5 : 1.0,
|
|
320
|
+
});
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
> [!TIP]
|
|
324
|
+
> **Configure gamepad vibration:** On gamepads you can use `device.options.vibration.enabled`
|
|
325
|
+
> and `device.options.vibration.intensity` to control vibration.
|
|
326
|
+
|
|
242
327
|
#### Gamepad Button Codes
|
|
243
328
|
|
|
244
329
|
The gamepad buttons reference **Standard Controller Layout**:
|
|
245
330
|
|
|
246
|
-
| Button
|
|
331
|
+
| Button # | GamepadCode | Description | Xbox Series X | Playstation 5 DualSense® | Nintendo Switch™ Pro |
|
|
247
332
|
|:---:|:---|:---|:---:|:---:|:---:|
|
|
248
|
-
| `0` | `"
|
|
249
|
-
| `1` | `"
|
|
250
|
-
| `2` | `"
|
|
251
|
-
| `3` | `"
|
|
333
|
+
| `0` | `"Face1"` | **Face Button 1** | A | Cross | B |
|
|
334
|
+
| `1` | `"Face2"` | **Face Button 2** | B | Circle | A |
|
|
335
|
+
| `2` | `"Face3"` | **Face Button 3** | X | Square | Y |
|
|
336
|
+
| `3` | `"Face4"` | **Face Button 4** | Y | Triangle | X |
|
|
252
337
|
| `4` | `"LeftShoulder"` | **Left Shoulder** | LB | L1 | L |
|
|
253
338
|
| `5` | `"RightShoulder"` | **Right Shoulder** | RB | R1 | R |
|
|
254
339
|
| `6` | `"LeftTrigger"` | **Left Trigger** | LT | L2 | ZL |
|
|
255
340
|
| `7` | `"RightTrigger"` | **Right Trigger** | RT | R2 | ZR |
|
|
256
|
-
| `8` | `"Back"` | **Back** |
|
|
257
|
-
| `9` | `"Start"` | **Start** |
|
|
258
|
-
| `10` | `"LeftStickClick"` | **Left Stick Click** | LSB | L3 | L3 |
|
|
259
|
-
| `11` | `"RightStickClick"` | **Right Stick Click** | RSB | R3 | R3 |
|
|
260
|
-
| `12` | `"
|
|
261
|
-
| `13` | `"
|
|
262
|
-
| `14` | `"
|
|
263
|
-
| `15` | `"
|
|
341
|
+
| `8` | `"Back"` | **Back** | View | Options | Minus |
|
|
342
|
+
| `9` | `"Start"` | **Start** | Menu | Select | Plus |
|
|
343
|
+
| `10` | `"LeftStickClick"` | **Left Stick (Click)** | LSB | L3 | L3 |
|
|
344
|
+
| `11` | `"RightStickClick"` | **Right Stick (Click)** | RSB | R3 | R3 |
|
|
345
|
+
| `12` | `"DpadUp"` | **D-Pad Up** | ⬆️ | ⬆️ | ⬆️ |
|
|
346
|
+
| `13` | `"DpadDown"` | **D-Pad Down** | ⬇️ | ⬇️ | ⬇️ |
|
|
347
|
+
| `14` | `"DpadLeft"` | **D-Pad Left** | ⬅️ | ⬅️ | ⬅️ |
|
|
348
|
+
| `15` | `"DpadRight"` | **D-Pad Right** | ➡️ | ➡️ | ➡️ |
|
|
264
349
|
|
|
265
350
|
#### Gamepad Axis Codes
|
|
266
351
|
|
|
@@ -268,71 +353,32 @@ Bindable helpers are available for the joysticks too:
|
|
|
268
353
|
|
|
269
354
|
| Axis # | GamepadCode | Standard | Layout
|
|
270
355
|
|:---:|:---:|:---:|:---:|
|
|
271
|
-
| `0` | `"LeftStickLeft"`<br/>`"LeftStickRight"` | **Left Stick (
|
|
272
|
-
| `1` | `"LeftStickUp"`<br/>`"LeftStickDown"` | **Left Stick (
|
|
273
|
-
| `2` | `"RightStickLeft"`<br/>`"RightStickRight"` | **Right Stick (
|
|
274
|
-
| `3` | `"RightStickUp"`<br/>`"RightStickDown"` | **Right Stick (
|
|
356
|
+
| `0` | `"LeftStickLeft"`<br/>`"LeftStickRight"` | **Left Stick (X-Axis)** | ⬅️➡️ |
|
|
357
|
+
| `1` | `"LeftStickUp"`<br/>`"LeftStickDown"` | **Left Stick (Y-Axis)** | ⬆️⬇️ |
|
|
358
|
+
| `2` | `"RightStickLeft"`<br/>`"RightStickRight"` | **Right Stick (X-Axis)** | ⬅️➡️ |
|
|
359
|
+
| `3` | `"RightStickUp"`<br/>`"RightStickDown"` | **Right Stick (Y-Axis)** | ⬆️⬇️ |
|
|
275
360
|
|
|
276
361
|
> [!TIP]
|
|
277
|
-
> Set the `joystick.
|
|
362
|
+
> Set the `joystick.pressThreshold` option in `GamepadDevice.defaultOptions` to adjust event sensitivity.
|
|
278
363
|
|
|
279
364
|
#### Gamepad Layouts
|
|
280
365
|
|
|
281
366
|
```ts
|
|
282
|
-
gamepad.layout
|
|
367
|
+
gamepad.layout // "xbox_one"
|
|
283
368
|
```
|
|
284
369
|
|
|
285
|
-
|
|
286
|
-
improvements (e.
|
|
287
|
-
|
|
288
|
-
There is some limited layout remapping support built-in for Nintendo controllers, which appear to be the
|
|
289
|
-
only major brand controller that deviates from the standard.
|
|
290
|
-
|
|
291
|
-
##### Gamepad - Nintendo Layout Remapping
|
|
292
|
-
|
|
293
|
-
> [!CAUTION]
|
|
294
|
-
> ***Nintendo:** Both the labels and physical positions of the A,B,X,Y buttons are different
|
|
295
|
-
> on Nintendo controllers.
|
|
296
|
-
>
|
|
297
|
-
> Set `GamepadDevice.defaultOptions.nintendoRemapMode` to apply the remapping as required.
|
|
298
|
-
>
|
|
299
|
-
> - `"physical"` _**(default)**_ – The A,B,X,Y button codes will refer the standard face button positions (Left=X, Top=Y, Bottom=A, Right=B).
|
|
300
|
-
> - `"accurate"` – The A,B,X,Y button codes will refer to the exact Nintendo labels (Left=Y, Top=X, Bottom=B, Right=A).
|
|
301
|
-
> - `"none"` – The A,B,X,Y button codes mapping stay at the default indices (Left=Y, Top=B, Bottom=X, Right=A).
|
|
302
|
-
>
|
|
303
|
-
> ```
|
|
304
|
-
> standard nintendo nintendo nintendo
|
|
305
|
-
> layout "physical" "accurate" "none"
|
|
306
|
-
> reference (default)
|
|
307
|
-
>
|
|
308
|
-
> Y Y X B
|
|
309
|
-
> X B X B Y A Y A
|
|
310
|
-
> A A B X
|
|
311
|
-
>
|
|
312
|
-
> 3 3 2 1
|
|
313
|
-
> 2 1 2 1 3 0 3 0
|
|
314
|
-
> 0 0 1 2
|
|
315
|
-
> ```
|
|
316
|
-
|
|
317
|
-
You can manually override this per-gamepad, or for all gamepads:
|
|
318
|
-
|
|
319
|
-
```ts
|
|
320
|
-
// set default
|
|
321
|
-
GamepadDevice.defaultOptions.nintendoRemapMode = "none"
|
|
322
|
-
|
|
323
|
-
// set for a single gamepad
|
|
324
|
-
gamepad.options.nintendoRemapMode = "accurate"
|
|
325
|
-
```
|
|
370
|
+
Gamepad device layout reporting is a non-standard API, and should only be used for aesthetic
|
|
371
|
+
enhancements improvements (i.e. [display layout-specific icons](https://thoseawesomeguys.com/prompts/)).
|
|
326
372
|
|
|
327
373
|
#### GamepadDevice Events
|
|
328
374
|
|
|
329
375
|
| Event | Description | Payload |
|
|
330
376
|
|---|---|---|
|
|
331
|
-
| `"
|
|
377
|
+
| `"binddown"` | `{name,button,buttonCode,device}` | A **named bind** button was pressed. |
|
|
332
378
|
| **Button presses:** | | |
|
|
333
|
-
| `"
|
|
334
|
-
| `"
|
|
335
|
-
| `"
|
|
379
|
+
| `"Face1"` | `{button,buttonCode,device}` | Standard layout button `"Face1"` was pressed. Equivalent to `0`. |
|
|
380
|
+
| `"Face2"` | `{button,buttonCode,device}` | Standard layout button `"Face2"` was pressed. Equivalent to `1`. |
|
|
381
|
+
| `"Face3"` | `{button,buttonCode,device}` | Standard layout button `"Face3"` was pressed. Equivalent to `2`. |
|
|
336
382
|
| … | … | … |
|
|
337
383
|
| **Button presses (no label):** | | |
|
|
338
384
|
| `0` or `Button.A` | `{button,buttonCode,device}` | Button at offset `0` was pressed. |
|
|
@@ -347,17 +393,16 @@ You can add custom devices to the device manager so it will be polled togehter a
|
|
|
347
393
|
```ts
|
|
348
394
|
import { type CustomDevice, InputDevice } from "pixijs-input-devices"
|
|
349
395
|
|
|
350
|
-
export const
|
|
351
|
-
id: "on-screen-buttons",
|
|
396
|
+
export const onScreenButtonsDevice: CustomDevice = {
|
|
352
397
|
type: "custom",
|
|
398
|
+
id: "OnScreen",
|
|
353
399
|
meta: {},
|
|
354
|
-
|
|
355
|
-
update: ( now: number ) => {
|
|
400
|
+
update: (now: number) => {
|
|
356
401
|
// polling update
|
|
357
402
|
}
|
|
358
|
-
}
|
|
403
|
+
};
|
|
359
404
|
|
|
360
|
-
InputDevice.add(
|
|
405
|
+
InputDevice.add(onScreenButtonsDevice);
|
|
361
406
|
```
|
|
362
407
|
|
|
363
408
|
## Named Binds
|
|
@@ -376,8 +421,8 @@ InputDevice.keyboard.configureBinds({
|
|
|
376
421
|
|
|
377
422
|
// all gamepads:
|
|
378
423
|
GamepadDevice.configureDefaultBinds({
|
|
379
|
-
jump: [ "
|
|
380
|
-
crouch: [ "
|
|
424
|
+
jump: [ "Face1", "LeftStickUp" ],
|
|
425
|
+
crouch: [ "Face2", "Face3", "RightTrigger" ],
|
|
381
426
|
toggleGraphics: [ "RightStickUp", "RightStickDown" ],
|
|
382
427
|
})
|
|
383
428
|
```
|
|
@@ -388,11 +433,11 @@ These can then be used with either the real-time and event-based APIs.
|
|
|
388
433
|
|
|
389
434
|
```ts
|
|
390
435
|
// listen to all devices:
|
|
391
|
-
InputDevice.
|
|
436
|
+
InputDevice.onBindDown("toggleGraphics", (e) => toggleGraphics())
|
|
392
437
|
|
|
393
438
|
// listen to specific devices:
|
|
394
|
-
InputDevice.keyboard.
|
|
395
|
-
InputDevice.gamepads[0].
|
|
439
|
+
InputDevice.keyboard.onBindDown("jump", (e) => doJump())
|
|
440
|
+
InputDevice.gamepads[0].onBindDown("jump", (e) => doJump())
|
|
396
441
|
```
|
|
397
442
|
|
|
398
443
|
#### Real-time:
|
|
@@ -401,19 +446,19 @@ InputDevice.gamepads[0].onBind( "jump", ( e ) => doJump() )
|
|
|
401
446
|
let jump = false, crouch = false, moveX = 0
|
|
402
447
|
|
|
403
448
|
const keyboard = InputDevice.keyboard
|
|
404
|
-
if (
|
|
405
|
-
if (
|
|
406
|
-
if (
|
|
407
|
-
else if (
|
|
449
|
+
if (keyboard.bindDown("jump")) jump = true
|
|
450
|
+
if (keyboard.bindDown("crouch")) crouch = true
|
|
451
|
+
if (keyboard.key.ArrowLeft) moveX = -1
|
|
452
|
+
else if (keyboard.key.ArrowRight) moveX = 1
|
|
408
453
|
|
|
409
|
-
for (
|
|
410
|
-
if (
|
|
411
|
-
if (
|
|
454
|
+
for (const gamepad of InputDevice.gamepads) {
|
|
455
|
+
if (gamepad.bindDown("jump")) jump = true
|
|
456
|
+
if (gamepad.bindDown("crouch")) crouch = true
|
|
412
457
|
|
|
413
458
|
// gamepads have additional analog inputs
|
|
414
459
|
// we're going to apply these only if touched
|
|
415
|
-
if (
|
|
416
|
-
if (
|
|
460
|
+
if (gamepad.leftJoystick.x != 0) moveX = gamepad.leftJoystick.x
|
|
461
|
+
if (gamepad.leftTrigger > 0) moveX *= (1 - gamepad.leftTrigger)
|
|
417
462
|
}
|
|
418
463
|
```
|
|
419
464
|
|
|
@@ -426,8 +471,8 @@ _Traverse a UI using input devices._
|
|
|
426
471
|
Set up navigation once using:
|
|
427
472
|
|
|
428
473
|
```ts
|
|
429
|
-
UINavigation.configureWithRoot(
|
|
430
|
-
registerPixiJSNavigationMixin(
|
|
474
|
+
UINavigation.configureWithRoot(app.stage) // any root container
|
|
475
|
+
registerPixiJSNavigationMixin(PIXI.Container)
|
|
431
476
|
```
|
|
432
477
|
|
|
433
478
|
Navigation should now work automatically if your buttons handle these events:
|
|
@@ -494,7 +539,7 @@ Containers are extended with a few properties/accessors:
|
|
|
494
539
|
> [!WARNING]
|
|
495
540
|
> **Fallback Hover Effect:** If there is no `"pointerover"` or `"mouseover"` handler detected on a container, `UINavigation`
|
|
496
541
|
> will apply abasic alpha effect to the selected item to indicate which container is currently the navigation target. This
|
|
497
|
-
> can be disabled by setting `UINavigation.options.
|
|
542
|
+
> can be disabled by setting `UINavigation.options.enableFallbackOverEffect` to `false`.
|
|
498
543
|
|
|
499
544
|
### Default Binds
|
|
500
545
|
|
|
@@ -502,12 +547,12 @@ The keyboard and gamepad devices are preconfigured with the following binds, fee
|
|
|
502
547
|
|
|
503
548
|
Navigation Intent Bind | Keyboard | Gamepad
|
|
504
549
|
---|---|---
|
|
505
|
-
`"navigate.left"` | "ArrowLeft", "KeyA" | "
|
|
506
|
-
`"navigate.right"` | "ArrowRight", "KeyD" | "
|
|
507
|
-
`"navigate.up"` | "ArrowUp", "KeyW" | "
|
|
508
|
-
`"navigate.down"` | "ArrowDown", "KeyS" | "
|
|
509
|
-
`"navigate.trigger"` | "Enter", "Space" | "
|
|
510
|
-
`"navigate.back"` | "Escape", "Backspace" | "
|
|
550
|
+
`"navigate.left"` | "ArrowLeft", "KeyA" | "DpadLeft", "LeftStickLeft"
|
|
551
|
+
`"navigate.right"` | "ArrowRight", "KeyD" | "DpadRight", "LeftStickRight"
|
|
552
|
+
`"navigate.up"` | "ArrowUp", "KeyW" | "DpadUp", "LeftStickUp"
|
|
553
|
+
`"navigate.down"` | "ArrowDown", "KeyS" | "DpadDown", "LeftStickDown"
|
|
554
|
+
`"navigate.trigger"` | "Enter", "Space" | "Face1"
|
|
555
|
+
`"navigate.back"` | "Escape", "Backspace" | "Face2", "Back"
|
|
511
556
|
|
|
512
557
|
### Manual control for submenus & modal views
|
|
513
558
|
|
|
@@ -515,7 +560,7 @@ You can manually take control of navigation using:
|
|
|
515
560
|
|
|
516
561
|
```ts
|
|
517
562
|
// take control
|
|
518
|
-
UINavigation.pushResponder(
|
|
563
|
+
UINavigation.pushResponder(myModalView)
|
|
519
564
|
|
|
520
565
|
// relinquish control
|
|
521
566
|
UINavigation.popResponder()
|
|
@@ -535,9 +580,9 @@ InputDevice.on("deviceconnected", ({ device }) =>
|
|
|
535
580
|
device.meta.localPlayerId = 123
|
|
536
581
|
)
|
|
537
582
|
|
|
538
|
-
for (
|
|
583
|
+
for (const device of InputDevice.devices)
|
|
539
584
|
{
|
|
540
|
-
if (
|
|
585
|
+
if (device.meta.localPlayerId === 123)
|
|
541
586
|
{
|
|
542
587
|
// use assigned input device!
|
|
543
588
|
}
|
|
@@ -550,26 +595,29 @@ You can easily map an on-screen input device using the `CustomDevice` interface.
|
|
|
550
595
|
|
|
551
596
|
```ts
|
|
552
597
|
export class OnScreenInputContainer extends Container implements CustomDevice {
|
|
553
|
-
id = "onscreen"
|
|
554
|
-
type = "custom" as const
|
|
555
|
-
meta: Record<string, any> = {}
|
|
598
|
+
id = "onscreen"
|
|
599
|
+
type = "custom" as const
|
|
600
|
+
meta: Record<string, any> = {}
|
|
556
601
|
|
|
557
602
|
inputs = {
|
|
558
603
|
moveX: 0.0
|
|
559
604
|
jump: false,
|
|
560
605
|
}
|
|
561
606
|
|
|
562
|
-
update(
|
|
607
|
+
update(now)
|
|
563
608
|
{
|
|
564
|
-
this.moveX = this._virtualJoystick.x
|
|
565
|
-
this.jump = this._jumpButton.isTouching()
|
|
609
|
+
this.inputs.moveX = this._virtualJoystick.x
|
|
610
|
+
this.inputs.jump = this._jumpButton.isTouching()
|
|
566
611
|
}
|
|
612
|
+
|
|
613
|
+
// e.g. disable named binds for onscreen joysticks:
|
|
614
|
+
bindDown(name){ return false }
|
|
567
615
|
}
|
|
568
616
|
|
|
569
|
-
const onscreen = new OnScreenInputContainer()
|
|
617
|
+
const onscreen = new OnScreenInputContainer()
|
|
570
618
|
|
|
571
|
-
InputDevice.add(
|
|
572
|
-
InputDevice.remove(
|
|
619
|
+
InputDevice.add(onscreen)
|
|
620
|
+
InputDevice.remove(onscreen)
|
|
573
621
|
```
|
|
574
622
|
|
|
575
623
|
### Two Users; One Keyboard
|
|
@@ -591,32 +639,32 @@ InputDevice.keyboard.configureBinds({
|
|
|
591
639
|
p2_jump: [ "ArrowUp" ],
|
|
592
640
|
p2_defend: [ "ArrowDown" ],
|
|
593
641
|
p2_left: [ "ArrowLeft" ],
|
|
594
|
-
p2_right: [ "ArrowRight" ]
|
|
642
|
+
p2_right: [ "ArrowRight" ]
|
|
595
643
|
})
|
|
596
644
|
```
|
|
597
645
|
|
|
598
646
|
and then switch groups depending on the mode:
|
|
599
647
|
|
|
600
648
|
```ts
|
|
601
|
-
if (
|
|
649
|
+
if (gameMode === "multiplayer")
|
|
602
650
|
{
|
|
603
|
-
player1.jump = device.
|
|
604
|
-
player1.defend = device.
|
|
605
|
-
player1.moveX += device.
|
|
606
|
-
player1.moveX += device.
|
|
607
|
-
|
|
608
|
-
player2.jump = device.
|
|
609
|
-
player2.defend = device.
|
|
610
|
-
player2.moveX += device.
|
|
611
|
-
player2.moveX += device.
|
|
651
|
+
player1.jump = device.bindDown("p1_jump")
|
|
652
|
+
player1.defend = device.bindDown("p1_defend")
|
|
653
|
+
player1.moveX += device.bindDown("p1_left") ? -1 : 0
|
|
654
|
+
player1.moveX += device.bindDown("p1_right") ? 1 : 0
|
|
655
|
+
|
|
656
|
+
player2.jump = device.bindDown("p2_jump")
|
|
657
|
+
player2.defend = device.bindDown("p2_defend")
|
|
658
|
+
player2.moveX += device.bindDown("p2_left") ? -1 : 0
|
|
659
|
+
player2.moveX += device.bindDown("p2_right") ? 1 : 0
|
|
612
660
|
}
|
|
613
661
|
else
|
|
614
662
|
{
|
|
615
|
-
player1.jump = device.
|
|
616
|
-
player1.defend = device.
|
|
617
|
-
player1.moveX += device.
|
|
618
|
-
player1.moveX += device.
|
|
663
|
+
player1.jump = device.bindDown("jump")
|
|
664
|
+
player1.defend = device.bindDown("defend")
|
|
665
|
+
player1.moveX += device.bindDown("left") ? -1 : 0
|
|
666
|
+
player1.moveX += device.bindDown("right") ? 1 : 0
|
|
619
667
|
|
|
620
|
-
updateComputerPlayerInput(
|
|
668
|
+
updateComputerPlayerInput(player2)
|
|
621
669
|
}
|
|
622
670
|
```
|