js-gamepad-overlay

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());