Jump to content

Using motion paths for objects in a group


Recommended Posts

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;

            // 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) {
        enemy.x = path[enemy.pathPosition].x;
        enemy.y = path[enemy.pathPosition].y;
        enemy.pathPosition ++;
        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? 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites


  • Recently Browsing   0 members

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