I'm having 2 joysticks and want to get their position and size properties with JS. The official documentation s hard for me to understand, because it is very very theoretical and has no practical examples.
I tried using the console to get the properties by checking the value of the joysticks, but I miserably failed getting any information out of that.
All I need is to get both joystick centers and stick positions.
Here is my js:
/touchdevice is set to true the moment a touch action happens
if(touchdevice) {
/mstick and astick are predefined
mstick = document.querySelector("#mstick");
astick = document.querySelector("#astick");
window.mstick = nipplejs.create({
color: "#000000",
shape: "square",
zone: mstick,
threshold: 0.5,
fadeTime: 300
});
window.astick = nipplejs.create({
color: "#000000",
shape: "circle",
zone: astick,
threshold: 0.5,
fadeTime: 300
});
}
My friend and fellow developer colleague Wef324 (on Discord) helped me with this question. Here is the end result:
if (touchdevice) {
//mstick and astick are predefined
const mstick = document.querySelector("#mstick");
const astick = document.querySelector("#astick");
window.mstick = {
position: {
x:0, y:0
},
distance: 0,
};
window.astick = {
position: {
x:0, y:0
},
distance: 0,
};
window.mstickInstance = nipplejs.create({
color: "#000000",
shape: "square",
zone: mstick,
threshold: 0.5,
fadeTime: 300,
});
window.astickInstance = nipplejs.create({
color: "#000000",
shape: "circle",
zone: astick,
threshold: 0.5,
fadeTime: 300,
});
window.mstickInstance.on("move", (event, nipple) => {
window.mstick.position = nipple.position;
window.mstick.distance = nipple.distance;
window.mstick.direction = nipple.angle.radian;
console.log(window.mstick);
});
window.astickInstance.on("move", (event, nipple) => {
window.astick.position = nipple.position;
window.astick.distance = nipple.distance;
window.astick.direction = nipple.angle.radian;
console.log(window.astick);
});
}
This code basically saves picked values the "move"
event delivers with it and saves them into the corresponding window.stickname
variable`.