# Problem with player rotation by mouse

**URL:** <https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867>\
**Category:** Phaser 3\
**Created:** [April 10, 2020, 11:43am UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867 "2020-04-10T11:43:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ogamrima](https://avatars.discourse-cdn.com/v4/letter/o/e68b1a/32.png) [@ogamrima](https://phaser.discourse.group/u/ogamrima)\
**Post date:** [April 10, 2020, 11:43am UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867/1 "2020-04-10T11:43:06Z")

</div>

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](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);
  }
}
```

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 10, 2020, 12:31pm UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867/2 "2020-04-10T12:31:38Z")

</div>

Hi,  
From the doc at:  
[https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#worldX\_\_anchor](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):

```javascript
update(time, delta) {
  this.input.mousePointer.updateWorldPoint()
  ...

```

---

<div class="post-metadata">

**Author:** ![ogamrima](https://avatars.discourse-cdn.com/v4/letter/o/e68b1a/32.png) [@ogamrima](https://phaser.discourse.group/u/ogamrima)\
**Post date:** [April 10, 2020, 12:36pm UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867/3 "2020-04-10T12:36:49Z")

</div>

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)”

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 10, 2020, 12:40pm UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867/4 "2020-04-10T12:40:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ogamrima](https://avatars.discourse-cdn.com/v4/letter/o/e68b1a/32.png) [@ogamrima](https://phaser.discourse.group/u/ogamrima)\
**Post date:** [April 10, 2020, 12:42pm UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867/5 "2020-04-10T12:42:57Z")

</div>

Nice it works! Thank you very much.

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

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 10, 2020, 12:43pm UTC](https://phaser.discourse.group/t/problem-with-player-rotation-by-mouse/5867/6 "2020-04-10T12:43:28Z")

</div>

Nice 🙂