Jump to content

Using motion paths for objects in a group


slomatt
 Share

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;
                }
                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? 

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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