Change direction of player according to mouse position

[gnarvin]

Hi, Im making a simple top down style shooter and I want to have the player facing either right or left according to the position of the mouse. Basicly my canvas is 1024 wide, and if the mouse is less then 512 I want the player to face left greater than they face right. Ive looked into and there seems to be alot of was to go about it but I didnt know if Phaser had any way of doing iot easier, so here I am trying to find out.

 

How would you best implement this very basic idea.

 

Heres an example gif from another game.

if you're curious about this example game I found it on TIG  its called Tiny Wizard

[lewster32]

If you use game.input.activePointer.position.x you can determine whether the mouse is to the left or the right of your player:

update() {  if (game.input.activePointer.x < player.x) {    // mouse pointer is to the left  }  else {    // mouse pointer is to the right  }}

This also works if the player moves a little bit relative to the centre of the screen like in the above gif, as it's relative to the player's position at the time it's checked.

[Dumtard]

Can also have a look at this, it maybe something you want as well.

[gnarvin]

Awesome thanks so much lewster32, I figured phaser had some implemented to help me out on this. Thats exactly what I needed.

[lewster32]

By the way, if you're using the camera (like the gif does) you will probably need to subtract the camera's position from the values too in order to get the player's position relative to the screen rather than the world:

update() {  if (game.input.activePointer.x < player.x - game.camera.x) {    // mouse pointer is to the left  }  else {    // mouse pointer is to the right  }}

[gnarvin]

Cool I will need that for later I bet. But now I'm having another problem. I was trying to have the arms and gun be a separate sprite from the body and rotate around according to where the mouse is. I got it to work kinda but certain borders make it get all buggy.

 

Example gif

(ignore the zombies, forgot to comment out there code)

 

Heres the code I have:

  createPlayer: function(){    this.player = this.add.sprite( 100, 100, 'player');    this.player.anchor.setTo(.5, .5);    this.player.animations.add('walk', [1,2,3,4,5,6,7,8,9,10,0], 20, false);    this.physics.enable(this.player, Phaser.Physics.ARCADE);    this.player.speed = 250;      this.player.body.collideWorldBounds = true;    this.player.scale.setTo(2, 2);  },  createGun: function(){    this.guns = this.add.group();    this.guns.enableBody = true;    this.guns.physicsBodyType = Phaser.Physics.ARCADE;    this.guns.create(this.player.x, this.player.y+4, 'gun');    this.guns.setAll('anchor.x', .5);    this.guns.setAll('anchor.y', .5);    this.guns.setAll('scale.x', 2);    this.guns.setAll('scale.y', 2);      },  playerInputs: function(){    this.player.body.velocity.x = 0;    this.player.body.velocity.y = 0;    var gun = this.guns.getFirstAlive(false);    gun.body.velocity.x = 0;    gun.body.velocity.y = 0;    gun.body.collideWorldBounds = true;        if (this.cursors.left.isDown){      this.player.body.velocity.x = -this.player.speed;      gun.body.velocity.x = -this.player.speed;      this.player.play('walk');     } else if (this.cursors.right.isDown){      this.player.body.velocity.x = this.player.speed;      gun.body.velocity.x = this.player.speed;      this.player.play('walk');     }     if (this.cursors.down.isDown){      this.player.body.velocity.y = this.player.speed;      gun.body.velocity.y = this.player.speed;      this.player.play('walk');     } else if (this.cursors.up.isDown){      this.player.body.velocity.y = -this.player.speed;      gun.body.velocity.y = -this.player.speed;      this.player.play('walk');     }     //which way the player will be facing     if (this.input.activePointer.x < this.player.x) {    this.player.scale.setTo(-2, 2);    this.guns.setAll('scale.y', -2);  } else {    this.player.scale.setTo(2, 2);    this.guns.setAll('scale.y', 2);    }  },  aimGun: function(){    this.guns.x = this.player.x;    this.guns.y = this.player.y+4;    this.guns.pivot.x = this.player.x;    this.guns.pivot.y = this.player.y+4;    this.guns.rotation = this.physics.arcade.angleToPointer(this.guns);      },

Basicly the left and top walls seem to work but when I hit the bottom or right walls it starts to do some strange things with the gun location to the player.

[lewster32]

Presumably the gun doesn't need collision detection? If not, set gun.body.moves = false so it doesn't end up getting nudged around by the walls. Also I believe pivot isn't quite right at the moment between Phaser and pixi, but there are other ways to approximate the effect of pivot, by using sprites with no key set, then adding the objects to those sprites via sprite1.addChild(sprite2), altering the position of the second sprite and then rotating the first.

 

I'd go so far to say you probably don't want to enable physics at all on the gun; you can replicate angleToPointer by doing the following:

gun.rotation = Math.atan2(game.input.activePointer.y - player.y, game.input.activePointer.x - player.x);