Issues with game.physics.arcade.overlap

[Sturb]

Just started looking at Phaser and I'm pretty excited to start building my own games with it. I've started putting together the tutorial however I've ran into a little snag. It appears 'game.physics.arcade.overlap' isn't working for me. My code is more or less identical to the tutorial code, with the exception that I'm writing in Typescript. Here are my create and update functions:

onGameCreate(){    this.game.physics.startSystem(Phaser.Physics.ARCADE);    this.game.add.sprite(0, 0, 'sky');    this.platforms = this.game.add.group();    this.platforms.enableBody = true;    var ground: Phaser.Sprite = this.platforms.create(0, this.game.world.height - 64, 'ground');    ground.scale.setTo(2, 2);    ground.body.immovable = true;    var ledge: Phaser.Sprite = this.platforms.create(400, 400, 'ground');    ledge.body.immovable = true;    ledge = this.platforms.create(-150, 250, 'ground');    ledge.body.immovable = true;    this.player = this.game.add.sprite(32, this.game.world.height - 150, 'dude');    this.game.physics.arcade.enable(this.player);    this.player.body.bounce.y = 0.2;    this.player.body.gravity.y = 300;    this.player.body.collideWorldBounds = true;    this.player.animations.add('left', [0, 1, 2, 3], 10, true);    this.player.animations.add('right', [5, 6, 7, 8], 10, true);    this.stars = this.game.add.group();    this.stars.enableBody = true;    for (var i = 0; i < 12; i++)    {        var star: Phaser.Sprite = this.stars.create(i * 70, 0, 'star');        star.body.gravity.y = 350;        star.body.bounce.y = 0.7 + Math.random() * 0.2;    }    this.cursors = this.game.input.keyboard.createCursorKeys();}

onGameUpdate() {    this.game.physics.arcade.collide(this.player, this.platforms);    this.game.physics.arcade.collide(this.stars, this.platforms);    this.game.physics.arcade.overlap(this.player, this.stars, this.collectStar, null, this);    this.player.body.velocity.x = 0;    if (this.cursors.left.isDown)     {        this.player.body.velocity.x = -150;        this.player.animations.play('left');    }    else if (this.cursors.right.isDown)     {        this.player.body.velocity.x = 150;        this.player.animations.play('right');    }    else     {        this.player.animations.stop();        this.player.frame = 4;    }    if (this.cursors.up.isDown && this.player.body.touching.down)     {        this.player.body.velocity.y = -350;    }}

I'm hoping it's just something simple. A result of looking at the code for too long. Any help or insight for a new user would be greatly appreciated. Thanks.

[Sturb]

I've figured this out. This thread can be closed.

[MichaelD]

You can post your solution and mark it as solved (solution).

[Sturb]

I had the structure of the game wrong and was losing context. 'this' ended up being 'window' so my collectStar function was undefined. Which doesn't make much sense because this.player and this.stars were there.

[GourmetGorilla]

But how do you remove the overlap later on if you need to? If you have a bullet overlapping with a group, then when a single sprite of that group is shot you want to stop the overlap on that single sprite, how do you do that?  Can you just deactivate the overlap somehow?

[cybearg]

On 4/27/2015 at 6:11 AM, Sturb said:

I had the structure of the game wrong and was losing context. 'this' ended up being 'window' so my collectStar function was undefined. Which doesn't make much sense because this.player and this.stars were there.

I'm having this same problem. I wish you would have elaborated more on the solution. Like you, TypeScript seems fine with "this.collectStar", but I see from my debugger that this.collectStar is undefined, so what gives? How do I access the method?

[cat]

On 7/7/2016 at 1:05 AM, cybearg said:

I'm having this same problem. I wish you would have elaborated more on the solution. Like you, TypeScript seems fine with "this.collectStar", but I see from my debugger that this.collectStar is undefined, so what gives? How do I access the method?

Add the callback to the constructor; your constructor will look something like this:

constructor() {
  this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content',
    { preload: this.preload, create: this.create, update: this.update, collectStar: this.collectStar });
}