How do I make all of a certain type of automatically generated sprites (that are on screen - or exist) move to a defined point on Phaser?

Question

Very new to Phaser so I think I might be fundamentally misunderstanding something.

My game is supposed to be a clone of 'Jetpack Joyride' where the player jumps to avoid obstacles and collect coins etc.

I am currently trying to create a powerup which makes all of the coins on screen zoom towards the player (and therefore collect all of the coins).

I have used the this.physics.moveToObject function but it always gives me the error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'velocity')'.

My thinking is that this function can't pull multiple objects at once - or it isn't able to 'locate' all instances of 'coins'(perhaps because of the way I have set up the random generation of them).

This could also be something to do with a basic syntax error on my end.

One issue I have noticed is, I need to actually destroy the sprites as they go off the screen - but not sure this is related to the above.

Anyway, any help is appreciated!

const gameState = {
    score: 0,
    endGame: 0, 
    timer: 0,
    text1: '',
    text2: '',
    music:'',
    coinscore: 0,
    coincollect:'',
    speed: -400, 
    coins: '',
};


class GameScene extends Phaser.Scene {
    constructor() {
      super({ key: 'GameScene' })
    }



create() {

//Background 
this.createParalaxBackgrounds();

//Add Timer 
gameState.timer = this.time.addEvent({
    delay: 999999,
    paused: false
  });

//Add Player

var playerAnimation = this.anims.create({
    key: 'run',
    frames: [{
        key: 'player',
        frame: "sprite6"
    }, {
        key: 'player',
        frame: "sprite16"
    }],
    frameRate: 5,
    repeat: -1
  });

this.anims.create(playerAnimation);

this.player = this.physics.add.sprite(320, 300, 'Player').setScale(3).setDepth(11).play('run');
this.player.setSize(15, 16, false);

//Add Music

//gameState.music = this.sound.add('BackgroundMusic', { loop: true});
gameState.coincollect = this.sound.add('coin_collect', {loop : false});




//Add World Physics
this.physics.world.setBounds(0, 0, 800, 600);
this.player.setCollideWorldBounds(true);
this.player.setImmovable(true);

//Add Covid Physics
const covid = this.physics.add.group({immovable: true,
    allowGravity: false});
covid.setDepth(11);

gameState.coins = this.physics.add.group({immovable: true, allowGravity: false});
gameState.coins.setDepth(11);

const magnets = this.physics.add.group({immovable: true, allowGravity: false})
magnets.setDepth(11);



//Add Test Text
gameState.text1 = this.add.text(700, 10, `Score = ${gameState.score}`);
gameState.text1.setOrigin(0.5, 0.5).setDepth(11);
gameState.text2 = this.add.text(400, 50, `Coins Collected = ${gameState.coinscore}`, { fontSize: '15px', fill: '#000000' });
gameState.text2.setOrigin(0.5, 0.5).setDepth(11)

//Random Score Used for Coin Spawn Generation
const CoinNumb = 500;
//Random Score Used for Enemy Spawn Generation
const RandomCovidGenNumb = 2000;
//Random Scored used for Magnet
const MagnetSpawnNumb = 4000;
// Enemy Spawn
function CovidGen () {
    const yCoord = Math.random() * 600;
    covid.create(800, yCoord, 'Covid').setDepth(11);
    covid.setVelocityX(gameState.speed);

}

// Power Up Spawn 

function MagnetGen() {
    const yCoord = Math.random() * 600;
    magnets.create(800, yCoord, 'coin_magnet').setDepth(11);
    magnets.setVelocityX(gameState.speed);

}

// Adding Enemy Spawn Loop
const CovidGenLoop = this.time.addEvent({
    delay: RandomCovidGenNumb,
    callback: CovidGen,
    callbackScope: this,
    loop: true,
 });

// Adding Coin Spawn
function CoinGen () {
    const yCoord = Math.random() * 600;
    gameState.coins.create(800, yCoord, 'coin').setDepth(11).setScale(0.25);
    gameState.coins.setVelocityX(gameState.speed);

}

// Adding Coin Spawn Loop
const CoinGenLoop = this.time.addEvent({
    delay: CoinNumb,
    callback: CoinGen,
    callbackScope: this,
    loop: true,
 });

const MagnetGenLoop = this.time.addEvent({
    delay: MagnetSpawnNumb,
    callback: MagnetGen,
    callbackScope: this,
    loop: true,
 });


// Add Keyboard Input
const SpaceBar = this.input.keyboard.addKey('SPACE');



//Setting Enemy Spawn Velocity
//covid.setVelocityX(-300);



//Adding Collider between enemy and player + scene restart
this.physics.add.collider(this.player, covid, () => {
    gameState.score += gameState.coinscore;
    this.add.text(400, 300, `Game Over! 
 Total Distance Travelled = ${gameState.score - gameState.coinscore} 
 Total Coins Collected = ${gameState.coinscore} 
 Total Score = ${gameState.score}`, { fontSize: '15px', fill: '#000000' }).setOrigin(0.5, 0.5).setDepth(11);
    CovidGenLoop.destroy();
    CoinGenLoop.destroy();
    this.physics.pause();
    gameState.timer.paused = true;
    gameState.endGame += 1;
    this.anims.pauseAll();
    
    this.input.on('pointerup', () => {
        gameState.endGame -= 1;
        this.scene.restart();
        gameState.timer.remove();
        gameState.coinscore = 0;
        this.anims.resumeAll();

    });
    
})

//Adding Collider between player and coin
this.physics.add.collider(this.player, gameState.coins, (player, coin) => { 
    coin.destroy();
    gameState.coinscore += 1;
    gameState.coincollect.play();
})

//Adding Collider between player and magnet power up

this.physics.add.collider(this.player, magnets, (player, magnet, coin) => { 
    magnet.destroy();
   
    this.physics.moveToObject(gameState.coins, this.player, 200);

    
    

})




}

user_1679286 · Answer

Well the error is caused, because you are passing a group and not a gameobject to the function (details can befound in the documentation).
You could loop over all children/conis in the group, a call the function moveToObjecton each of them.

here a short demo (based on your code):

class GameScene extends Phaser.Scene {
    constructor() {
      super({ key: 'GameScene' });
    }
    
    loadCoins(coins){
    
        for(let i = 0; i < 5; i++){
            let yCoord = Math.random() * 200;
            let coin = this.add.rectangle(400, yCoord, 15, 15, 0xFFFF00);
            coin = this.physics.add.existing(coin);
            coins.add(coin);
        }  
        coins.setVelocityX(-100); 
    }
    
    create() {
        this.running = true;
        this.message = this.add.text(10, 10, 'Click to activate Magnet');
        
        this.player = this.add.rectangle(200, 100, 20, 20, 0xffffff);
        this.physics.add.existing(this.player);

        //Add World Physics
        this.physics.world.setBounds(0, 0, 400, 200);
        this.player.body.setCollideWorldBounds(true);
        this.player.body.setImmovable(true);

        let coins = this.physics.add.group({immovable: true, allowGravity: false});
        
        this.loadCoins(coins);
 
        this.input.on('pointerdown', _ => {
            if(this.running){
                coins.children.each(coin =>  {
                    // pull only coins infronz of the player
                    if(coin.x >= this.player.x){
                        this.physics.moveToObject(coin, this.player, 1500);
                    }
                });
                this.message.text = 'Click to reset';
            } else {
              this.loadCoins(coins);
              this.message.text = 'Click to activate Magnet';
            }
            this.running = !this.running;
        });
    
    this.physics.add.collider(this.player, coins, 
      (player, coin) => { 
        coin.destroy();
    });

  }
}

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 200,
    scene: [ GameScene ],
    physics: {
       default: 'arcade',
    }
};

const game = new Phaser.Game(config);

Update:
I updated the code, so that "coins", that are behind the player won't be fulled. This can be tweeked to:

only pull coins in a specific distance
only pull coins that are visible
and so on

How do I make all of a certain type of automatically generated sprites (that are on screen - or exist) move to a defined point on Phaser?

1 Answers