Jump to content

Change direction of player according to mouse position


gnarvin
 Share

Recommended Posts

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.

GamePlay19.gif

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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  }}
Link to comment
Share on other sites

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

DkQCUpC.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.

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...