Phaser Issues with Typescript - Collision & Timed events

[mikeryanolson]

I'm new to development and very new to Phaser. I'm trying to create my first game and I'm having issues getting my collision to work as well as creating timed events. 

Collision: I've already created my main player (doug) & some obstacles (snowman). 

this.game.physics.arcade.collide(this.doug, this.snowman, 
            (doug: any, snowmen: any) => {
                if (doug instanceof (Phaser.Sprite)) {
                    (<Phaser.Sprite>doug).kill;
                }
            }

I'm not getting any errors, but nothing is happening when Doug runs into the snowmen. Perhaps is has something to deal with how I'm creating the snowmen: code below:

let snowmen = this.game.add.group();
        snowmen.enableBody = true;
        this.game.physics.enable(snowmen, Phaser.Physics.ARCADE);

        for (var i = 0; i < 4; i++){
                this.snowman = snowmen.create(this.game.width * Math.random(), -50,"snowman");
                this.game.physics.enable(this.snowman, Phaser.Physics.ARCADE);
                this.snowman.body.collideWorldBounds = false;
                this.snowman.body.gravity.y = 40; 
        }

Timed Events: To give the illusion of moving through space, I'd like to make a function that creates sprites of trees falling at either end of my screen. function below:

    treefall() {
        let trees = this.game.add.group();
        trees.enableBody = true;
        this.game.physics.enable(trees, Phaser.Physics.ARCADE);
            for (var i = 0; i < 4; i++) {
                this.tree = trees.create(-1250, -400, "tree4");
                this.tree = trees.create(900, -400, "tree4");                 
                this.tree.body.collideWorldBounds = false;
                this.tree.body.gravity.y = 40; 
            }

I'm getting an error on the line of code that calls this function:

        this.game.time.events.add(Phaser.Timer.SECOND * 1, this.treefall, this.game);
 

This is sitting in my create function. 

 

Any advice would be hugely appreciated!

[Tom Atom]

Hi, regarding Timed Events: your treefall should be in state (or any other object, that has game variable). But when you are scheduling time event, you are usin this.game as context. It is probably incorrect - yout treefall function is then not executed in context of state, but in context of game object. Using only this should work.

 Inside treefall, you are using object variable tree twice - second call will immediately overwrite results of first call.

[samme]

I think you'll want to store the snowman group on the state (as `this.snowmen`) and collide that. In yours I think `this.snowman` is just the last snowman created.

`doug.kill` is missing parens for invocation.

this.snowmen = this.game.add.group();
this.snowmen.enableBody = true;

for (var i = 0; i < 4; i++){
  let snowman = this.snowmen.create(this.game.width * Math.random(), -50, 'snowman');
  snowman.body.collideWorldBounds = false;
  snowman.body.gravity.y = 40; 
}

// …

this.physics.arcade.collide(this.doug, this.snowmen, (doug, snowman) => { doug.kill() });

 

[mikeryanolson]

Thank you both - I fixed the collision using your advice, Samme - but then I broke it again...

I had to create my snowmen in it's own function in order to continuously generate them and now it's not working again. 

So I have my snowmen group:

snowMaker() {

        this.snowmen = this.game.add.group();
        this.snowmen.enableBody = true;

        for (var i = 0; i < 5; i++){
                var snowman = this.game.add.sprite(this.game.world.randomX, -75,"snowman");
                snowman.name = "snowman";
                this.game.physics.enable(snowman, Phaser.Physics.ARCADE);
                snowman.body.collideWorldBounds = false;
                snowman.body.gravity.y = 200; 
        }
}

And I have my player group (within the create function):

    this.player = this.game.add.group();
    this.player.enableBody = true;
    this.player.physicsBodyType = Phaser.Physics.ARCADE;
        let doug = this.player.create(this.game.width / 2, 0, "doug");
        doug.name = "doug";
        doug.scale.setTo(2.5,2.5);
        this.game.physics.enable(doug, Phaser.Physics.ARCADE);
        doug.body.collideWorldBounds = true;
        doug.body.gravity.y = 4000; 
        doug.body.bounce.y = 0.2;
        doug.body.setSize(15, 25, 9, 8);

I have a collisionHandler function: (it's not console.logging)

    collisionHandler(doug: Phaser.Sprite) {
        console.log("gotcha!");
        doug.kill();
    }

And finally I call it within my update function:

        this.game.physics.arcade.overlap(this.player, this.snowmen, this.collisionHandler, null, this);

 

Where am I going wrong here?

 

EDIT: I figured this out. I was creating my snowmen group inside it's own function. I moved the group creation inside of the create function.  My snowmaker function is just running the for loop and now it works!

Edited November 10, 2016 by mikeryanolson

[samme]

Also check out http://phaser.io/examples/v2/groups/recycling

[mikeryanolson]

On 11/10/2016 at 7:01 PM, samme said:

Also check out http://phaser.io/examples/v2/groups/recycling

Good call - because I was generating so many sprites and group objects, it was starting to lag. I wound up just giving sprites a short lifespan:

this.snowman.lifespan = 3000;

Still have more work to do, but feel free to check out where I'm out so far: doug-the-slug.herokuapp.com