js-gamepad-overlay
HTML5 gamepad overlay which aims to adapt the main functionality of the HTML5 gamepad api. Supports mouse and touch input.
This library does implement styling on a very low level. Every element is completely customizable.
features
- Gamepad buttons that are visible on the screen.
- Gamepad sticks that are visible on the screen.
- HTML5Gamepad Interface through toHTML5GamepadAPI()
getting started
; const gamepadOverlay = domHook: document
api
createNewButton()
Creates a new button.
parameters
- code – required – id of the button
- width – optional – defaults to 0 – width of the button
- height – optional – defaults to 0 – height of the button
- styles – optional – defaults to {} – css style object
- text – optional – defaults to "" – visible text on the button
- onPress – optional defaults to
() => null
– callback when the button is pressed - onRelease – optional defaults to
() => null
– callback when the button is released
createNewStick()
Creates a new stick with 2 axes.
parameters
- code – required – id of the stick
- radius – optional – defaults to 0 – radius of the stick
- styles – optional – defaults to {} – css style object of the stick
- snapBackDelay – optional – defaults to 0 – the delay of the stickButton to snap back after releasing it
- stickButtonScale – optional – defaults to 0.5 – size of the stickButton relative to the stick container
- stickButtonStyles – optional – defaults to {} – css style of the stick button
- onMove – optional defaults to
() => null
– callback when the stick is moved - onMoveEnd – optional defaults to
() => null
– callback when the stick is released
toHTML5GamepadAPI()
Returns an object similar to the HTML5GamepadAPI.
Gamepad
Objectstructure
axes: ... sticks: ... buttons: ...
Gamepad.sticks
codeStick0: code: "codeStick0" axes: ... ui: DOMElement buttonUi: DOMElement ...
Gamepad.axes
codeStick0-0: AxesValue codeStick0-1: AxesValue ...
Gamepad.buttons
buttonCode0: code: "buttonCode0" ui: DOMElement pressed: Boolean ...
Example
;// const GamepadOverlay = require("js-gamepad-overlay").default; const gamepadOverlay = domHook: document; gamepadOverlay; gamepadOverlay; console;console;console;console;