Overlap doesn't work

Phaser 3
1

Hi everybody
i try to make an mini jump 'n run game where the Player have to collect cake.
Everything works fine, until i add the overlap-method.

Here is my code:

var player;
var cursors;
var muffins;

class Level extends Phaser.Scene {

constructor() {

	super("Level");
	
}		

/*init(data){
	this.playerImageKey = data.playerImageKey;
}*/

create(){
	this.physics.world.setBounds(0, 0, 3000, 450);
	
	//set background
	var bg = this.add.image(0, 0, "background");
	bg.setOrigin(0.0, 0.0);
	
	//add cursors
	cursors = this.input.keyboard.createCursorKeys();
	
	//add platforms
	var platforms = this.physics.add.staticGroup();
	platforms.create(1500, 412, "underground");
    platforms.create(423.93912, 296.82156, "platform");
    platforms.create(846.91864, 211.04117, "platform");
	platforms.create(1272.8494, 234.70657, "platform");
	platforms.create(2089.235, 255.41022, "platform");
	platforms.create(2515.173, 157.80673, "platform");
	platforms.create(2956.3782, 155.90817, "platform");
	
	//add player
	player = this.physics.add.sprite(90,0, "char1-side-0");
	player.setScale(0.04,0.04);
	player.anims.play("char1-run");
	
	player.setBounce(0.2);
	player.setCollideWorldBounds(true);

	//add camera
	this.cameras.main.setBounds(0, 0, 3000, 450);
	this.cameras.main.startFollow(player, true);
	this.cameras.main.followOffset.set(-300, 0);
	
	//add muffins
	muffins = this.physics.add.group({
        key: "muffin",
        repeat: 20,
        setXY: { x: 300, y: 0, stepX: 130 }
	});
	
	muffins.children.iterate(function (child) {
    	child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.6));
	});
	
	//collide the player and the muffins with the platforms
	this.physics.add.collider(player, platforms);
	this.physics.add.collider(muffins, platforms);
	
	// if i add this method, the scene doesn't even get loaded
	this.physics.add.overlap(player, muffins, collectMuffin, null, this);
}

collectMuffin(player, muffin) {
    muffin.disableBody(true, true);
}

update() {
    if(cursors.right.isDown) {
		player.setVelocityX(100);
		this.cameras.main.followOffset.x = -300;
	} else if (cursors.right.isUp) {
		player.setVelocityX(0);
	} 
	
	if(cursors.up.isDown) {
      player.setVelocityY(-200);
    }
}

}

And here is my configuration:

var game = new Phaser.Game({
"title": "infoteam-Universe",
"width": 800,
"height": 450,
"type": Phaser.AUTO,
"backgroundColor": "#88F",
"parent": "game-container",
"physics": {
    default: 'arcade',
    arcade: {
        gravity: { y: 300 },
        debug: false
    }
},
"scale": {
    "mode": Phaser.Scale.FIT,
    "autoCenter": Phaser.Scale.CENTER_BOTH
}
});

Can anybody help me to fix it?
Thank you!

2

Is there any particular error that show on you console log?

3

I am working with Phaser Editor and being new in this whole Framework and IDE. How can i see the errors?

4

I have used Phaser Editor before. Click play in the top left. Then you can use your preferred browser’s devtools. If it says you have an error when you click play, your code has an error that Phaser Editor saw. It should show up as a red underline in the file.

5

What goes wrong?

6

It doesn’t say, i have an error. It works until i came to the Scene “Level” in which i would like to check the overlap and then stop playing. If i uncomment this line, even the Level-Scene works fine but the muffins are still visible when the Player overlap with them.

7

Here are two recordings: One with the “overlap-line” uncommented and the other on with the “overlap-line” active. https://drive.google.com/open?id=1uDzWDeQfaH0y7SGqeN8gpQS9rL7ifT0m

8

So what errors are you getting when you have the line running?
Here is a tutorial on how to open the console. Make sure you switch to the console tab to see the errors.

9

Ahh: “Uncaught ReferenceError: collectMuffin is not defined”.
But i still don’t know why :sweat_smile:

10

try with:
this.collectMuffin
or
this.collectMuffin(player, muffin)
or
(player, muffin) => this.collectMuffin(player, muffin);

11

It works! Thank you!! :slight_smile: