Svelte Gamepad and virtual JoyStick

Svelte library for complex input to your app, provides Gamepad integration with different UI-interfaces:

• Button A button that can either be pressed by touch or mouse, a key on the keyboard or a button on your gamepad
• Joystick A joystick with X/Y axes that can be controlled by touch/mouse input, an analog stick of your gamepad or keyboard buttons

The virtual Joystick can either be used as fallback when a real gamepad is not connected but a touchscreen is present, as indicator of the gamepad state or to provide a virtual joystick to the user.

Provides custom focus and context management.

Examples

See the +page.svelte file for a basic demo.

You can find Material 3 components using noph.dev as Noph gamepad components.

For Material 2 Take a look at SMUI Gamepad Components for an integration into Svelte Material UI.

Application

This library is used to control robotic systems, but can also be useful in web game development prototyping.

Installation

This library can be installed using npm:

npm i -D svelte-gamepad-virtual-joystick

Sources

based on code from

• https://github.com/arturcarvalho/svelte-gamepad/ (I first thought to just use it and updated to use vite and integrate more complex button/axis handling but I also wanted to support more than 4 gamepads, have a virtual joystick and keyboard controls so this became its own thing instead of just a fork)
• nipple.js (nipple.js itself is not svelte compatible because it directly accesses window)

Deploy to NPM

TODO!

License

BSD-3