Problem with player rotation by mouse

Hello, so I have this problem with rotating the player by mouse when the world’s and camera’s bounds are set to (0, 0, 3200, 2400) and the camera is following the player.

The code below works, but the problem is, that when you move with the player and don’t move with the pointer, this.input.mousePointer.WorldX,Y doesn’t refresh automatically, making the rotation only correct when player moves with the mouse.
I even included this.input.setPollAlways(), but it doesn’t seem to work.

You can try the movement here: https://ogamrima.github.io/index.html
Place the pointer somewhere and try moving with the player (WASD) across the map and not touching the mouse, I want the player to always face towards the pointer.

  class GamePlay extends Phaser.Scene {
  constructor() {
    super({
      key: "GamePlay",
    });
    this.speed = 400;
    this.w = 3200;
    this.h = 2400;
    this.mouseX = 0;
    this.mouseY = 0;
  }

  preload() {}
  create() {
    this.background = this.add.image(this.w / 2, this.h / 2, "background");
    this.player = this.physics.add.sprite(this.w / 2, this.h / 2, "player");

    this.player.setScale(0.25).setCollideWorldBounds();
    this.physics.world.setBounds(0, 0, this.w, this.h);
    this.cameras.main.zoom = 0.5;
    this.cameras.main.startFollow(this.player, true);
    this.cameras.main.setBounds(0, 0, this.w, this.h);
    this.input.setPollAlways();

    this.txt = this.add.text(
      this.cameras.main.scrollX,
      this.cameras.main.scrollY,
      "h ",
      {
        font: "25px Arial",
        fill: "yellow",
      }
    );

    this.moveKeys = this.input.keyboard.addKeys({
      up: Phaser.Input.Keyboard.KeyCodes.W,
      down: Phaser.Input.Keyboard.KeyCodes.S,
      left: Phaser.Input.Keyboard.KeyCodes.A,
      right: Phaser.Input.Keyboard.KeyCodes.D,
    });

    this.input.keyboard.on("keydown_W", (e) => {
      this.player.setVelocityY(-this.speed);
    });
    this.input.keyboard.on("keydown_S", (e) => {
      this.player.setVelocityY(this.speed);
    });
    this.input.keyboard.on("keydown_A", (e) => {
      this.player.setVelocityX(-this.speed);
    });
    this.input.keyboard.on("keydown_D", (e) => {
      this.player.setVelocityX(this.speed);
    });

    this.input.keyboard.on("keyup_W", (e) => {
      if (this.moveKeys["down"].isUp) {
        this.player.setVelocityY(0);
      }
    });
    this.input.keyboard.on("keyup_S", (e) => {
      if (this.moveKeys["up"].isUp) {
        this.player.setVelocityY(0);
      }
    });
    this.input.keyboard.on("keyup_A", (e) => {
      if (this.moveKeys["right"].isUp) {
        this.player.setVelocityX(0);
      }
    });
    this.input.keyboard.on("keyup_D", (e) => {
      if (this.moveKeys["left"].isUp) {
        this.player.setVelocityX(0);
      }
    });
  }

  update(time, delta) {
    this.mouseX = this.input.mousePointer.worldX;
    this.mouseY = this.input.mousePointer.worldY;
    this.player.rotation = Phaser.Math.Angle.Between(
      this.player.x,
      this.player.y,
      this.mouseX,
      this.mouseY
    );

    this.txt.text = this.mouseX + ", " + this.mouseY;
    this.txt.setPosition(this.cameras.main.scrollX, this.cameras.main.scrollY);
  }
}

Hi,
From the doc at:
https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#worldX__anchor

worldX :number
The x position of this Pointer, translated into the coordinate space of the most recent Camera it interacted with.
If you wish to use this value outside of an input event handler then you should update it first by calling the Pointer.updateWorldPoint method.

Try to update the pointer in the update function with (not tested):

update(time, delta) {
  this.input.mousePointer.updateWorldPoint()
  ...
1 Like

I feel like this is going the right direction, but it throws this error “Uncaught TypeError: Cannot read property ‘resolution’ of undefined
at Pointer.updateWorldPoint (phaser.js:72714)
at GamePlay.update (GamePlay.js:128)
at Systems.step (phaser.js:35506)
at SceneManager.update (phaser.js:77851)
at Game.step (phaser.js:139643)
at TimeStep.step (phaser.js:67227)
at step (phaser.js:67474)”

It seems updateWorldPoint need a parameter

updateWorldPoint(camera)
Takes a Camera and updates this Pointer’s worldX and worldY values so they are the result of a translation through the given Camera.
Note that the values will be automatically replaced the moment the Pointer is updated by an input event, such as a mouse move, so should be used immediately.

2 Likes

Nice it works! Thank you very much.

update(time, delta){
this.input.mousePointer.updateWorldPoint(this.cameras.main);
}

Nice :slight_smile:

1 Like