How do I get a sprite to move towards the mouse?

[Marcus]

I'm very new to using Phaser and I've got a project to make a game in it, but for the life of me I can't get this to work, I've been trying all day.

I can find loads of examples for Phaser 2, but none seem to be working for me in Phaser 3.

Basically I want the sprite to move at a constant rate in the direction of the mouse when it is pressed and moving.

I keep on getting errors like "Cannot read property 'moveTo' of undefined", does anyone know how I can do this?

[mattstyles]

Following movement like this isn't conceptually a part of Phaser, using the functions like 'moveTo' is.

The error you've posted is likely a reference-related error, i.e. its telling you you're trying to call a function of an object that does not exist. It'll be worthwhile posting some code to pinpoint why something you think is available actually is not.

[Marcus]

3 hours ago, mattstyles said:

Following movement like this isn't conceptually a part of Phaser, using the functions like 'moveTo' is.

The error you've posted is likely a reference-related error, i.e. its telling you you're trying to call a function of an object that does not exist. It'll be worthwhile posting some code to pinpoint why something you think is available actually is not.

// create a new scene
let gameScene = new Phaser.Scene('Game');

// set the configuration of the game
let config = {
    type: Phaser.AUTO, // Phaser will use WebGL if available, if not it will use Canvas
    width: 640,
    height: 360,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: { y: 300 }
        }
    },
    scene: gameScene
};

// create a new game, pass the configuration
let game = new Phaser.Game(config);


var score = 0;


gameScene.init = function() {
    this.playerSpeed = 1.5;
}


// load assets
gameScene.preload = function(){
  // load images
    this.load.image('background', 'assets/background3.png'); 
    this.load.image('background2', 'assets/background4.png');
    this.load.image('player', 'assets/player.png');
    this.load.image('up', 'assets/up.png');
    this.load.image('down', 'assets/down.png');
    this.load.image('left', 'assets/left.png');
    this.load.image('right', 'assets/right.png');
};


// called once after the preload ends
gameScene.create = function() {
    // create bg sprite
    let bg = this.add.sprite(0, 0, 'background');
    let bg2 = this.add.sprite(0, 0, 'background2');

    // change the origin to the top-left corner
    bg.setOrigin(0,0);
    bg2.setOrigin(0,0);
    
    this.up = this.add.sprite(575, 15, 'up').setInteractive();
    this.down = this.add.sprite(575, 85, 'down');
    this.left = this.add.sprite(540, 50, 'left');
    this.right = this.add.sprite(610, 50, 'right');
    
    
    // create the player
    this.player = this.add.sprite(25, 50, 'player');
  
    cursors = game.input.keyboard.createCursorKeys();
    
    /*this.input.on('pointermove', function (pointer) {

        if(pointer.isDown){
            this.player.x = pointer.x;
            this.player.y = pointer.y;
        }

    }, this);*/
    this.input.on('pointerdown', function (pointer) {

        if (pointer.isDown)
        {
            this.player.moveTo(this.input.x, this.input.y)

            console.log(this.input.x)
        }

    }, this);
    
};

// this is called up to 60 times per second
function update() {
    
}





// end the game
gameScene.gameOver = function() {
 
    // restart the scene
    this.scene.restart();
}

Here's my code at the moment, maybe i can do an if statement such as: if mouse pressed and mouseX > playerX: playerX += playerSpeed?

[samme]

http://labs.phaser.io/view.html?src=src/physics\arcade\move to pointer.js

[Marcus]

8 minutes ago, samme said:

http://labs.phaser.io/view.html?src=src/physics\arcade\move to pointer.js

Wow thank you so much, I just tried to implement it and it works really well, just need to get it to stop whenever it's under the mouse