Wondering what’s next for npm?Check out our public roadmap! »

js-gamepad-overlay

0.8.0 • Public • Published

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

<div id="gamepadContainer"></div>
import GamepadOverlay from "js-gamepad-overlay";
 
const gamepadOverlay = new GamepadOverlay({
    domHook: document.getElementById("gamepadContainer")
})

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

import GamepadOverlay from "js-gamepad-overlay";
// const GamepadOverlay = require("js-gamepad-overlay").default;
 
const gamepadOverlay = new GamepadOverlay({domHook: document.querySelector("body")});
 
gamepadOverlay.createNewButton({
    code: 0,
    width: 50,
    height: 50,
    styles:{
        position: "absolute",
        left: "300px",
        bottom: "100px",
        borderRadius: "50%",
        backgroundColor: "transparent",
        border: "2px solid grey",
        fontSize: "20px",
        fontWeight: "bold"
    },
    text: "A",
    onPress: (button) => {button.ui.style.backgroundColor = "gray";},
    onRelease: (button) => {button.ui.style.backgroundColor = "transparent";}
});
 
gamepadOverlay.createNewStick({
    code: 0,
    radius: 50,
    styles: {
        position: "absolute",
        bottom: "100px",
        left: "100px",
        border: "2px solid grey",
    },
    stickButtonStyles: {
        border: "2px solid grey"
    },
    onMove: (stick) => {stick.buttonUi.style.transition = "0s ease";},
    onMoveEnd: (stick) => {stick.buttonUi.style.transition = "0.15s ease";}
});
 
console.log(gamepadOverlay.axes);
console.log(gamepadOverlay.sticks);
console.log(gamepadOverlay.buttons);
console.log(gamepadOverlay.toHTML5GamepadAPI());
 

Install

npm i js-gamepad-overlay

DownloadsWeekly Downloads

9

Version

0.8.0

License

MIT

Unpacked Size

20.7 kB

Total Files

5

Last publish

Collaborators

  • avatar