Switching Animations

Phaser 3
1

Hey there,
I’m not sure how to do this correctly but currently I have my sprite following my mouse pointer’s movements and I want to change my character’s animation depending on the angle between the sprite and the mouse pointer. This is what I have so far. I probably got the if statement wrong…

this.cameras.main.startFollow(player); //camera follows player

this.input.on('pointermove', function (pointer) {
  //converting canvas coordinates to world coordinates
  const transformedPoint = this.cameras.main.getWorldPoint(pointer.x, pointer.y);
  //slime follows the mouse pointer
  this.physics.moveToObject(this.player, transformedPoint, 240);

if(Phaser.Math.Angle.Between(this.player, transformedPoint) >= -70 && <= 70) {
        this.player.flipX = false;
        this.player.play("walkright");
      } else if(Phaser.Math.Angle.Between(this.player, transformedPoint) <= 110 && >= 110) {
        this.player.flipX = true;
        this.player.play("walkright");
      } else {
        this.player.play("walkdown");
      }
  }, this);
2

You probably want to user Angle.BetweenPoints. Either way, the return value will be in radians, not degrees, so you need to convert to degrees to get values like “-70”.

Also in your if statement you have to check the degrees against both conditions. You can’t say “if(Deg >= -70 && <= 70)” or you’ll get a syntax error.

let Rad = Phaser.Math.Angle.BetweenPoints(this.player, transformedPoint);
let Deg = Phaser.Math.RadToDeg(Rad);
if(Deg >= -70 && Deg <= 70 ){// do stuff }

https://jsfiddle.net/paynterc/830yu49n/5/