Why overlap isn't working?

[danmoople]

Hello everybody! I want to create agar io clone on phaser. So I already created a little scene.

I wrote a code for 'eating food'. But unfortunately overlap doesn't work. 

So when I hit food it should dissapear. But it doesn't. What's wrong??

My code:

var playState = 
{
    create: function()
    {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.setBounds(0,0,1600,1600);
        
        this.bg = game.add.sprite(0,0,'bg');
        this.cell = game.add.sprite(200,200,'cell');
        
        game.camera.follow(this.cell);
        
        this.cursor = game.input.keyboard.createCursorKeys();
        this.cell.scale.setTo(0.4,0.4);
        
        for(var i = 0; i < 200; i++)
        {
            this.food = game.add.sprite(Math.random()*game.world.width, Math.random()*game.world.height, 'cell');
            this.food.scale.setTo(0.1,0.1);
            game.physics.arcade.enable(this.food);
        }
    },
        
    update: function()
    {
        /*       MOVEMENT          */
        if(this.cursor.left.isDown)
        {
            this.cell.x -= 20;
        }
        if(this.cursor.right.isDown)
        {
            this.cell.x += 20;
        }
        if(this.cursor.up.isDown)
        {
            this.cell.y -= 20;
        }
        if(this.cursor.down.isDown)
        {
            this.cell.y += 20;
        }
        
        /*       OVERLAP FUNC THAT DOESN'T WORK          */
        game.physics.arcade.overlap(this.cell, this.food, this.eatFood, null, this);
       
    },
    
    eatFood: function() 
    {
        this.food.kill();
    }
}

So please help me! This bug makes me crazy :{

[PhasedEvolution]

Be aware that you creating multiple "food" using "this.food". That means it becomes a property of playState. But there can only be one property by that name. So only the last food you create is actually "this.food".

What you should do is create a phaser group. Then add in the for loop the food you want to that group by doing "var food = game.add.sprite(....)" and not this.food. You should enable the physics in the group and pass in the overlap function instead of "this.food".

This might be usefull https://phaser.io/examples/v2/groups/add-a-sprite-to-group

[scheffgames]

What @PhasedEvolution said and make sure you enable physics for this.cell.

[danmoople]

12 minutes ago, PhasedEvolution said:

Be aware that you creating multiple "food" using "this.food". That means it becomes a property of playState. But there can only be one property by that name. So only the last food you create is actually "this.food".

What you should do is create a phaser group. Then add in the for loop the food you want to that group by doing "var food = game.add.sprite(....)" and not this.food. You should enable the physics in the group and pass in the overlap function instead of "this.food".

This might be usefull https://phaser.io/examples/v2/groups/add-a-sprite-to-group

Thanks for advice. That's what I wrote. But it still doesn't work. Sorry but I'm beginner in phaser. Can you help me what's wrong?

var playState = 
{
    create: function()
    {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.setBounds(0,0,1600,1600);
        
        this.bg = game.add.sprite(0,0,'bg');
        this.cell = game.add.sprite(200,200,'cell');
        game.physics.arcade.enable(this.cell);
        
        game.camera.follow(this.cell);
        
        this.cursor = game.input.keyboard.createCursorKeys();
        this.cell.scale.setTo(0.4,0.4);
        
        food = game.add.group();
        for(var i = 0; i < 200; i++)
        {
            foodcells = food.create(Math.random()*game.world.width, Math.random()*game.world.height, 'cell');
        }
        food.setAll('scale.x', 0.1);
        food.setAll('scale.y', 0.1);
        food.enableBody = true;
    },
        
    update: function()
    {
        this.cell.body.collideWorldBounds = true;
        if(this.cursor.left.isDown)
        {
            this.cell.x -= 10;
        }
        if(this.cursor.right.isDown)
        {
            this.cell.x += 10;
        }
        if(this.cursor.up.isDown)
        {
            this.cell.y -= 10;
        }
        if(this.cursor.down.isDown)
        {
            this.cell.y += 10;
        }
        
        /*       OVERLAP FUNC THAT DOESN'T WORK          */

        game.physics.arcade.overlap(this.cell, foodcells, this.eatFood, null, this);
           
       
    },
    
    eatFood: function() 
    {
        foodcells.kill();
    }
}

 

[danmoople]

OMG finally I figured out what's wrong!!

var playState = 
{
    create: function()
    {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.setBounds(0,0,1600,1600);
        
        this.bg = game.add.sprite(0,0,'bg');
        this.cell = game.add.sprite(200,200,'cell');
        game.physics.arcade.enable(this.cell);
        
        game.camera.follow(this.cell);
        
        this.cursor = game.input.keyboard.createCursorKeys();
        this.cell.scale.setTo(0.4,0.4);
        
        food = game.add.group();
        food.enableBody = true;
        food.physicsBodyType = Phaser.Physics.ARCADE;
        
        for(var i = 0; i < 200; i++)
        {
            foodcells = food.create(Math.random()*game.world.width, Math.random()*game.world.height, 'cell');
        }
        
        food.setAll('scale.x', 0.1);
        food.setAll('scale.y', 0.1);
    },
        
    update: function()
    {
        game.physics.arcade.overlap(this.cell, food, this.eatFood, null, this);
        this.cell.body.collideWorldBounds = true;
        if(this.cursor.left.isDown)
        {
            this.cell.x -= 10;
        }
        if(this.cursor.right.isDown)
        {
            this.cell.x += 10;
        }
        if(this.cursor.up.isDown)
        {
            this.cell.y -= 10;
        }
        if(this.cursor.down.isDown)
        {
            this.cell.y += 10;
        }
    },
    
    eatFood: function(cell, f) 
    {
        f.kill();
    }
}