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 CHANGED
@@ -1,53 +1,76 @@
1
1
  # 🎮 PixiJS Input Devices  [![License](https://badgen.net/npm/license/pixijs-input-devices)](https://github.com/reececomo/pixijs-input-devices/blob/main/LICENSE) [![Tests](https://github.com/reececomo/pixijs-input-devices/actions/workflows/tests.yml/badge.svg)](https://github.com/reececomo/pixijs-input-devices/actions/workflows/tests.yml) [![Downloads per month](https://img.shields.io/npm/dm/pixijs-input-devices.svg)](https://www.npmjs.com/package/pixijs-input-devices) [![NPM version](https://img.shields.io/npm/v/pixijs-input-devices.svg)](https://www.npmjs.com/package/pixijs-input-devices)
2
2
 
3
- ⚡ Simple keyboard & gamepad management for PixiJS
3
+ ⚡ Simple & powerful input device support for a variety of devices in PixiJS
4
4
 
5
5
  | | |
6
6
  | ------ | ------ |
7
- | 🎮 Interface [keyboards](#keyboarddevice), [gamepads](#gamepaddevice), and [more](#custom-devices)! | 🚀 Flexible [update](#real-time) and [event-driven](#keyboarddevice-events) APIs |
8
- | ⚡ Optimized for [INP performance](https://web.dev/articles/inp) | 🪄 Built-in [named binds](#named-binds) |
9
- | 🔮 Highly configurable | 🌐 Built-in [international keyboard](#keyboard-layout---detection) support |
10
- | ✅ Cross-platform &amp; 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> | 🧭 Built-in [UI navigation](#uinavigation-api) _(optional)_ |
7
+ | 🎮 Instant [keyboard](#keyboarddevice), [gamepads](#gamepaddevice), and [custom device](#custom-devices) support | 🚀 [Real-time](#real-time) &amp; [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 &amp; 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
- ## Sample Usage
15
-
16
- *Handle device inputs with ease.*
14
+ ## Basic Usage
17
15
 
18
16
  ```ts
19
- import { InputDevice, GamepadDevice } from "pixijs-input-devices";
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
- // Set named binds
37
+ ```ts
38
+ import { GamepadDevice, KeyboardDevice } from "pixijs-input-devices";
39
+
40
+ // ⌨️ keyboard
23
41
  KeyboardDevice.global.configureBinds({
24
- jump: [ "Space" ]
25
- })
42
+ jump: ["Space"],
43
+ left: ["KeyA", "ArrowLeft"],
44
+ right: ["KeyD", "ArrowRight"],
45
+ });
26
46
 
47
+ // 🎮 gamepads
27
48
  GamepadDevice.configureDefaultBinds({
28
- jump: [ "A", "LeftStickUp" ]
29
- })
49
+ left: ["DpadLeft"],
50
+ right: ["DpadRight"],
51
+ jump: ["Face1"],
52
+ });
53
+ ```
30
54
 
31
- // Use binds
32
- for ( const device of InputDevice.devices ) {
33
- if ( device.pressedBind("jump") ) // ...
34
- }
55
+ > [!TIP]
56
+ > See [**Named binds**](#named-binds) for more information on configuring devices.
35
57
 
36
- // Event-driven
37
- InputDevice.onBind( "jump", ({ device }) => {
38
- if ( device.type === "gamepad" ) {
39
- device.playVibration({ duration: 50 })
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
- ## Getting Started with PixiJS Input Devices
68
+ ## 💿 Install
45
69
 
46
70
  *Everything you need to quickly integrate device management.*
47
71
 
48
- **PixiJS Input Devices** adds first-class support for input devices, and
49
- provides a simple, but powerful navigation manager that can enable devices to
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
- Ticker.shared.add(ticker => InputDevice.update());
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( app.stage )
98
- registerPixiJSNavigationMixin( PIXI.Container )
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 // Array<GamepadDevice>
112
- InputDevice.custom // Array<CustomDevice>
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 ( const device of InputDevice.devices ) { // …
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.isMobile` | `boolean` | Whether the context is mobile (including tablets). |
126
- | `InputDevice.isTouchCapable` | `boolean` | Whether the context has touchscreen capability. |
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[]` | Custom devices. |
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( "deviceadded", ({ device }) => {
139
- // a device was connected
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( "deviceadded" ) // stop listening
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 ( keyboard.key.ControlLeft ) { // …
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( "KeyZ" ) // Я
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 &ndash; 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( key )` uses the [KeyboardLayoutMap API](https://caniuse.com/mdn-api_keyboardlayoutmap)
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( "KeyW" ) // "Ц"
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
- | `"bind"` | `{name,event,keyCode,keyLabel,device}` | A **named bind** key was pressed. |
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
- let gamepad = InputDevice.gamepads[0]
262
+ const gamepad = InputDevice.gamepads[0];
219
263
 
220
- if ( gamepad.button.Start ) { // …
221
- if ( gamepad.leftTrigger > 0.25 ) { // …
222
- if ( gamepad.leftJoystick.x > 0.5 ) { // …
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 `playVibration()` method to play a haptic vibration, in supported browsers.
286
+ Use the `playHaptic()` method to play a haptic vibration effect on supported devices.
232
287
 
233
288
  ```ts
234
- gamepad.playVibration({
289
+ device.playHaptic({
235
290
  duration: 150,
236
- weakMagnitude: 0.75,
237
- strongMagnitude: 0.25,
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 Index | GamepadCode | Description | Xbox | Playstation | Nintendo<sup>[[?]](#gamepad---nintendo-layout-remapping)</sup> |
331
+ | Button # | GamepadCode | Description | Xbox Series X | Playstation 5 DualSense® | Nintendo Switch™ Pro |
247
332
  |:---:|:---|:---|:---:|:---:|:---:|
248
- | `0` | `"A"` | **Face Button 0** | A | Cross | A |
249
- | `1` | `"B"` | **Face Button 1** | B | Circle | X* |
250
- | `2` | `"X"` | **Face Button 2** | X | Square | B* |
251
- | `3` | `"Y"` | **Face Button 3** | Y | Triangle | Y |
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** | Back | Options | Minus |
257
- | `9` | `"Start"` | **Start** | Start | Select | Plus |
258
- | `10` | `"LeftStickClick"` | **Left Stick Click** | LSB | L3 | L3 |
259
- | `11` | `"RightStickClick"` | **Right Stick Click** | RSB | R3 | R3 |
260
- | `12` | `"DPadUp"` | **D-Pad Up** | ⬆️ | ⬆️ | ⬆️ |
261
- | `13` | `"DPadDown"` | **D-Pad Down** | ⬇️ | ⬇️ | ⬇️ |
262
- | `14` | `"DPadLeft"` | **D-Pad Left** | ⬅️ | ⬅️ | ⬅️ |
263
- | `15` | `"DPadRight"` | **D-Pad Right** | ➡️ | ➡️ | ➡️ |
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 (Left/Right)** | ⬅️➡️ |
272
- | `1` | `"LeftStickUp"`<br/>`"LeftStickDown"` | **Left Stick (Up/Down)** | ⬆️⬇️ |
273
- | `2` | `"RightStickLeft"`<br/>`"RightStickRight"` | **Right Stick (Left/Right)** | ⬅️➡️ |
274
- | `3` | `"RightStickUp"`<br/>`"RightStickDown"` | **Right Stick (Up/Down)** | ⬆️⬇️ |
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.threshold` option in `GamepadDevice.defaultOptions` to control when this is triggered.
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 // "nintendo" | "xbox" | "playstation" | "logitech" | "steam" | "standard"
367
+ gamepad.layout // "xbox_one"
283
368
  ```
284
369
 
285
- Layout detection is **highly non-standard** across major browsers, it should generally be used for aesthetic
286
- improvements (e.g. showing [device-specific icons](https://thoseawesomeguys.com/prompts/)).
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)**_ &ndash; The A,B,X,Y button codes will refer the standard face button positions (Left=X, Top=Y, Bottom=A, Right=B).
300
- > - `"accurate"` &ndash; The A,B,X,Y button codes will refer to the exact Nintendo labels (Left=Y, Top=X, Bottom=B, Right=A).
301
- > - `"none"` &ndash; 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
- | `"bind"` | `{name,button,buttonCode,device}` | A **named bind** button was pressed. |
377
+ | `"binddown"` | `{name,button,buttonCode,device}` | A **named bind** button was pressed. |
332
378
  | **Button presses:** | | |
333
- | `"A"` | `{button,buttonCode,device}` | Standard layout button `"A"` was pressed. Equivalent to `0`. |
334
- | `"B"` | `{button,buttonCode,device}` | Standard layout button `"B"` was pressed. Equivalent to `1`. |
335
- | `"X"` | `{button,buttonCode,device}` | Standard layout button `"X"` was pressed. Equivalent to `2`. |
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 myDevice: CustomDevice = {
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( myDevice )
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: [ "A", "LeftStickUp" ],
380
- crouch: [ "B", "X", "RightTrigger" ],
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.onBind( "toggleGraphics", ( e ) => toggleGraphics() )
436
+ InputDevice.onBindDown("toggleGraphics", (e) => toggleGraphics())
392
437
 
393
438
  // listen to specific devices:
394
- InputDevice.keyboard.onBind( "jump", ( e ) => doJump() )
395
- InputDevice.gamepads[0].onBind( "jump", ( e ) => doJump() )
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 ( keyboard.pressedBind( "jump" ) ) jump = true
405
- if ( keyboard.pressedBind( "crouch" ) ) crouch = true
406
- if ( keyboard.key.ArrowLeft ) moveX = -1
407
- else if ( keyboard.key.ArrowRight ) moveX = 1
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 ( const gamepad of InputDevice.gamepads ) {
410
- if ( gamepad.pressedBind( "jump" ) ) jump = true
411
- if ( gamepad.pressedBind( "crouch" ) ) crouch = true
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 ( gamepad.leftJoystick.x != 0 ) moveX = gamepad.leftJoystick.x
416
- if ( gamepad.leftTrigger > 0 ) moveX *= ( 1 - gamepad.leftTrigger )
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( app.stage ) // any root container
430
- registerPixiJSNavigationMixin( PIXI.Container )
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.useFallbackHoverEffect` to `false`.
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" | "DPadLeft", "LeftStickLeft"
506
- `"navigate.right"` | "ArrowRight", "KeyD" | "DPadRight", "LeftStickRight"
507
- `"navigate.up"` | "ArrowUp", "KeyW" | "DPadUp", "LeftStickUp"
508
- `"navigate.down"` | "ArrowDown", "KeyS" | "DPadDown", "LeftStickDown"
509
- `"navigate.trigger"` | "Enter", "Space" | "A"
510
- `"navigate.back"` | "Escape", "Backspace" | "B", "Back"
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( myModalView )
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 ( const device of InputDevice.devices )
583
+ for (const device of InputDevice.devices)
539
584
  {
540
- if ( device.meta.localPlayerId === 123 )
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( now )
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( onscreen )
572
- InputDevice.remove( onscreen )
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 ( gameMode === "multiplayer" )
649
+ if (gameMode === "multiplayer")
602
650
  {
603
- player1.jump = device.pressedBind( "p1_jump" )
604
- player1.defend = device.pressedBind( "p1_defend" )
605
- player1.moveX += device.pressedBind( "p1_left" ) ? -1 : 0
606
- player1.moveX += device.pressedBind( "p1_right" ) ? 1 : 0
607
-
608
- player2.jump = device.pressedBind( "p2_jump" )
609
- player2.defend = device.pressedBind( "p2_defend" )
610
- player2.moveX += device.pressedBind( "p2_left" ) ? -1 : 0
611
- player2.moveX += device.pressedBind( "p2_right" ) ? 1 : 0
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.pressedBind( "jump" )
616
- player1.defend = device.pressedBind( "defend" )
617
- player1.moveX += device.pressedBind( "left" ) ? -1 : 0
618
- player1.moveX += device.pressedBind( "right" ) ? 1 : 0
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( player2 )
668
+ updateComputerPlayerInput(player2)
621
669
  }
622
670
  ```