Using motion paths for objects in a group

[slomatt]

Hi all, first post, happy to be here.

I'm pretty new to Phaser (love it) but not to JavaScript or web development. 

For my first game, I'm making a Raiden-style top-down shooter. 

My problem is in using motion paths. I can get them working for one enemy ship, but I'd like to apply them to all the ships in a group. The ships from the group enter the world at an interval, so they'd be on different parts of the path at any given time. 

Here's my group. What I was trying to do is to use that pathPosition property to store the correct index value of the path for each individual ship.

  enemies = game.add.group();
    enemies.enableBody = true;
    enemies.physicsBodyType = Phaser.Physics.ARCADE;
    enemies.createMultiple(10, 'enemy');
    enemies.setAll('anchor.x', 0.5);
    enemies.setAll('anchor.y', 0.5);
    enemies.setAll('scale.x', 2.0);
    enemies.setAll('scale.y', 2.0);
    enemies.setAll('angle', 180);
    enemies.setAll('pathPosition', 1); // this is a custom value for motion path

Here's my spawning function:

    function spawnEnemy(numOfEnemies) {
        if (numOfEnemies > 0) {
            var randTime = getRandom(1000, 1500);
            // var x = game.rnd.integerInRange(50, game.width - 50);
            // var y = -100;
            var x = path[0].x;
            var y = path[0].y;
            // a promise that handles enemy spawning
            var sendEnemies = new Promise(function (resolve) {
                var enemy = enemies.getFirstExists(false);
                if (enemy) {
                    enemy.reset(x, y);
                    enemy.checkWorldBounds = true; // without this can't check if sprite is in bounds
                    enemy.events.onOutOfBounds.add(hasLeftBottom, this); // this adds a custom callback
                    //enemy.body.velocity.y = enemySpeed;
                }
                resolve(1);
            });

            // calls the promise and sets a success result.
            sendEnemies.then(function (result) {
                setTimeout(function () {
                    spawnEnemy(numOfEnemies - 1);
                }, randTime);
            });

        }

    }

Here's my plot function:

    function plot() {
        var x = increment / game.width;
        for (var i = 0; i <= 1; i += x) {
            var px = game.math.catmullRomInterpolation(points.x, i);
            var py = game.math.catmullRomInterpolation(points.y, i);
            path.push({ x: px, y: py });

        }
    }

 

Here's what I'm trying to do in my update function:

enemies.forEach(function (enemy) {
        if(path[enemy.pathPosition]){
        enemy.x = path[enemy.pathPosition].x;
        enemy.y = path[enemy.pathPosition].y;
        enemy.pathPosition ++;
    }
    else{
        enemy.body.velocity.y = 300;
    }
    });

What I get is a jumbled mess of flashing enemy ship sprites crawling through their points.

There must be a better way. Help? 

[slomatt]

Nevermind, I did a couple of things to fix this. 

1. I went from a simple move by setting the enemy.x / y properties to the much more fluid Phaser.physics.arcade.movetoxy

2. I changed my spawnEnemy function to set the pathPosition to zero as the sprite spawned. 

And BAM, it worked!