https://github.com/brean/svelte-gamepad-virtual-joystick
Gamepad bindings for your svelte web-app with a virtual joystick that can either be used as fallback when a joystick is not connected, as indicator of the gamepad state or to provie a virtual joystick and a gamepad at the same time to your user.
https://github.com/brean/svelte-gamepad-virtual-joystick
Last synced: 7 months ago
JSON representation
Gamepad bindings for your svelte web-app with a virtual joystick that can either be used as fallback when a joystick is not connected, as indicator of the gamepad state or to provie a virtual joystick and a gamepad at the same time to your user.
- Host: GitHub
- URL: https://github.com/brean/svelte-gamepad-virtual-joystick
- Owner: brean
- License: bsd-3-clause
- Created: 2024-04-25T13:23:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-08T20:36:36.000Z (8 months ago)
- Last Synced: 2025-02-08T21:26:25.115Z (8 months ago)
- Language: Svelte
- Size: 191 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
## Examples
See the [+page.svelte](https://github.com/brean/svelte-gamepad-virtual-joystick/blob/main/src/routes/%2Bpage.svelte) file for a basic demo.
Take a look at [SMUI Gamepad Components](https://github.com/brean/smui-gamepad-components) for an integration into [Svelte Material UI](https://sveltematerialui.com/)
## Application
This library is used to reimagine the control of 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