javascriptjoystick

How do I get the values of a nipple.js joystick


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

Solution

  • 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`.