0.8.0 • Published 4 years ago
js-gamepad-overlay v0.8.0
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());