Sign in to follow this  
slomatt

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

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.