Move by mouse

Phaser 3
1

I’ve been struggling with this all day. Thought I’d sorted it with moveTo, but no luck.
I have a character that I can move right now with cursors. I only want them to move on the X axis.

I want the player to be able to move the character to the left or the right (and stop!) by clicking on the screen with the mouse. That works, but I can’t get the animation to play. The animation works on cursor control, but not mouse.

class PlayerTest extends Phaser.Scene {
constructor(){
super(“PlayerTest”);
}
preload(){

      this.load.image('bg', 'assets/bg.png');
    this.load.spritesheet('char', 'assets/char.png', {
        frameWidth: 202.5,
        frameHeight: 288
        
    });

}

create(){
  
    let bg = this.add.image(0, 0, 'bg').setOrigin(0,0);

   this.player = this.physics.add.sprite(500, 400, 'char', 3);
    
          // walking animation
          this.anims.create({
            key: 'walking',
            frames: this.anims.generateFrameNames('char', {
              frames: [0, 1, 2, 3]
            }),
            frameRate: 12,
            yoyo: true,
            repeat: -1
          });
    


     // enable cursor keys

this.cursors = this.input.keyboard.createCursorKeys();

}

test(){
    if(!this.player.anims.isPlaying){
       this.player.anims.play('walking');

}

}

update (){
// movement to the left
if(this.cursors.left.isDown) {
this.player.body.setVelocityX(-150);

this.player.flipX = true;

// play animation if none is playing
if(!this.player.anims.isPlaying)
  this.player.anims.play('walking');

}

// movement to the right
else if(this.cursors.right.isDown) {
this.player.body.setVelocityX(150);

this.player.flipX = false;
if(!this.player.anims.isPlaying)
  this.player.anims.play('walking');

}
else {
// make the player stop
this.player.body.setVelocityX(0);

// stop walking animation
this.player.anims.stop('walking');

// set default frame
this.player.setFrame(3);

}

this.input.on(‘pointerdown’, (pointer)=>{

        if(pointer.x > this.player.body.x){
            console.log("moving right");
            this.player.flipX = false;
            this.player.body.setVelocityX(150);
                
            this.tweens.add({
                targets: this.player,
                x: 1000,
                duration: 1000,
                ease: 'Sine.easeInOut',
                onUpdate: this.test //I WANT TO RUN WALK ANIMATION WHILE CHAR MOVES

            });
            
              
            
        }
   });

}

}

2

Is this possible? Anyone?

3

I’ll take a look. Probably you should use either physics or tweens, not both.

1 Like
4

I figured, but how? This is a common way to move in point and click adventures, there must be a way!

5

You can do move and stop at position, then check body.velocity.x to update animations.

6

Thanks I’ll try to get that working.