Svelte Material3 UI Gamepad components

Using noph components with svelte-gamepad-virtual-joystick

Application

Use Material 3 (noph.dev) with joystick controls to control robots or build prototype games.

Installation and usage

This library can be installed using npm:

npm i -D noph-gamepad-components

To use it in your project, you can simply switch most of the noph-components with the ones in this repository, Button should be a straight forward replacement for your noph-components as its are just wrapper around it.

This shows the normal button but now you can also activate it by pressing 'e' on your keyboard or the first button on a connected gamepad ("X" on the Playstation 4 Dual Shock-controller). If you want to change that behavior just provide an input_mapping (take a look at the example application).

Don't forget to also add the InputManager from svelte-gamepad-virtual-joystick.

Example

A usage example with multiple components can be seen in routs/+page.svelte,

To view this example run

npm run dev

Supported Components

License

This library noph-gamepad-components is published under the BSD-3 license, same as Svelte Gamepad and virtual JoyStick

noph UI as well as the components based on it (in noph_ext) are published under the MIT license, see NOPH_LICENSE.

This licensing model assures that components can simply be copied over from the noph_ext-folder of this library to the main library and components can easily be merged with svelte-gampead-virtual-joystick if needed.