yoannmoinet / nipplejs

:video_game: A virtual joystick for touch capable interfaces.
https://yoannmoinet.github.io/nipplejs
MIT License
1.77k stars 181 forks source link

How to get 8 directions? #192

Closed Txori closed 2 years ago

Txori commented 2 years ago

Did anyone manage to get 8 directions from the data sent per the nipple? I tried using dir: and plain: without success. I almost get something working with:

var deg = data.angle.degree;
if (deg >= 337.5 || deg < 22.5) nipple_right = true;
if (deg >= 22.5 && deg < 67.5) {
    nipple_right = true;
    nipple_up = true;
}
if (deg >= 67.5 && deg < 112.5) nipple_up = true;
if (deg >= 112.5 && deg < 157.5) {
    nipple_left = true;
    nipple_up = true;
}
if (deg >= 157.5 && deg < 202.5) nipple_left = true;
if (deg >= 202.5 && deg < 247.5) {
    nipple_left = true;
    nipple_down = true;
}
if (deg >= 247.5 && deg < 292.5) nipple_down = true;
if (deg >= 292.5 && deg < 337.5) {
    nipple_right = true;
    nipple_down = true;
}

But it only works if one release the nipple between two angles, even if deg gets updated...

yoannmoinet commented 2 years ago

I don't think this is a bug. Can you share more of your code? What didn't work with dir: and plain:? How do you listen to the event? What did you try?

Txori commented 2 years ago

All right, after a good night of sleep, I managed to make my previous 8 dir handler to work. I simply had to reset before using it, and I simplified the deg tests:

nipple_up = false;
nipple_down = false;
nipple_left = false;
nipple_right = false;

if (deg >= 292.5 || deg < 67.5) nipple_right = true;
if (deg >= 22.5 && deg < 157.5) nipple_up = true;
if (deg >= 112.5 && deg < 247.5) nipple_left = true;
if (deg >= 202.5 && deg < 337.5) nipple_down = true;

or even shorter:

nipple_right = deg >= 292.5 || deg < 67.5;
nipple_up = deg >= 22.5 && deg < 157.5;
nipple_left = deg >= 112.5 && deg < 247.5;
nipple_down = deg >= 202.5 && deg < 337.5;

When it comes to the dir: / plain:, I tried something like this:

if (evt.type === "plain:up") {
    nipple_up = true;
    if (data.direction.angle === "left") nipple_left = true;
    if (data.direction.angle === "right") nipple_right = true;
}
if (evt.type === "plain:down") {
    nipple_down = true;
    if (data.direction.angle === "left") nipple_left = true;
    if (data.direction.angle === "right") nipple_right = true;
}
if (evt.type === "plain:left") {
    nipple_left = true;
    if (data.direction.angle === "up") nipple_up = true;
    if (data.direction.angle === "down") nipple_down = true;
}
if (evt.type === "plain:right") {
    nipple_right = true;
    if (data.direction.angle === "up") nipple_up = true;
    if (data.direction.angle === "dowm") nipple_down = true;
}

But that's surely a mess. Javascript isn't my thing, so I don't really know how to retrieve the evt.type without a plain string test. So I can't use plain and dir at the same time.

yoannmoinet commented 2 years ago

Ok, this is definitely not a bug. I think you should try to get help on stack overflow for this kind of problem.

wdda commented 10 months ago

@Txori Thank you very much, you saved my working day!

 joystickMove.on('move', (evt, data) => {
    if (typeof data.direction == 'undefined') {
      return false
    }

    controller.setForward(data)
  })
setForward (nippleData: any) {
  const deg = nippleData.angle.degree
  const oldState = {...this.move.forward}

  this.move.forward.right = deg >= 292.5 || deg < 67.5
  this.move.forward.front = deg >= 22.5 && deg < 157.5
  this.move.forward.left = deg >= 112.5 && deg < 247.5
  this.move.forward.back = deg >= 202.5 && deg < 337.5

  this.move.forward.isMoving = !(
      !this.move.forward.left &&
      !this.move.forward.right &&
      !this.move.forward.back &&
      !this.move.forward.front
  )

  if (!isEqual(this.move.forward, oldState)) {
    this.store.commit('SET_FORWARD', {
      forward: this.move.forward,
      playerId: this.playerId
    })
  }
}

@yoannmoinet Could you show an example of using control with 8 directions?