(Solved)Problem about collision Between two sprites

[khleug35]

My Full code 

 game.module(
    'game.main'
)
.require(


)
.body(function() {
    game.addAsset('logo.png');

game.createScene('Main', {
    init: function() {
    	this.world = new game.Physics();
        this.world.gravity.y = 0;
    	this.Box1 = new game.Box1(220,800);
        this.Box1.sprite.addTo(this.stage);
        
        this.Box2 = new game.Box2(game.width/2,game.height/2);
        this.Box2.sprite.addTo(this.stage);
        
        this.Box1Text = new game.SystemText('');
        this.Box1Text.position.set(100,100);
        this.Box1Text.size = 36;
        this.Box1Text.addTo(this.stage);
        
        this.Box2Text = new game.SystemText('');
        this.Box2Text.position.set(100,150);
        this.Box2Text.size = 36;
        this.Box2Text.addTo(this.stage);
    }
});

game.createClass('Box1', {
    init: function(x, y) {
        this.body = new game.Body();
        this.body.collisionGroup = 1;
        this.body.collideAgainst.push(2);
        this.body.position.set(x, y);
        this.body.collide = this.collide.bind(this);

        this.sprite = new game.Sprite('logo.png');
        this.sprite.anchorCenter();


        var shape = new game.Rectangle(this.sprite.width, this.sprite.height);
        this.body.addShape(shape);
        this.body.addTo(game.scene.world);
        this.body.collide = this.collide.bind(this);

    },

    collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
        }
        return true;
    },


    update: function() {
        if (game.keyboard.down('RIGHT')) {
            this.body.velocity.x = 250;
        }
        else if (game.keyboard.down('LEFT')) {
            this.body.velocity.x = -250;
        }else if (game.keyboard.down('UP')) {
            this.body.velocity.y = -250;
        }else if (game.keyboard.down('DOWN')) {
            this.body.velocity.y = 250;
        }else
        {
            this.body.velocity.set(0,0);
        }
        
        this.sprite.position.copy(this.body.position);
    }
});
     

game.createClass('Box2', {
    init: function(x, y) {
        this.body = new game.Body();
        this.body.collisionGroup = 2;
        this.body.collideAgainst.push(1);
        this.body.position.set(x, y);
        this.body.collide = this.collide.bind(this);

        this.sprite = new game.Sprite('logo.png');
        this.sprite.anchorCenter();


        var shape = new game.Rectangle(this.sprite.width, this.sprite.height);
        this.body.addShape(shape);
        this.body.addTo(game.scene.world);
        this.body.collide = this.collide.bind(this);

    },

    collide: function(body) {
        if (body.collisionGroup === 1) {
          game.scene.Box2Text.text = 'Box2 is connect';  
        }
        return true;
    },
    update: function() {
       if (game.keyboard.down('D')) {
            this.body.velocity.x = 250;
        }
        else if (game.keyboard.down('A')) {
            this.body.velocity.x = -250;
        }else if (game.keyboard.down('W')) {
            this.body.velocity.y = -250;
        }else if (game.keyboard.down('S')) {
            this.body.velocity.y = 250;
        }else
        {
            this.body.velocity.set(0,0);
        }
        
        this.sprite.position.copy(this.body.position);
    }
 });     
});

 

When user keydown the "UP or DOWN  or  RIGHT, or LEFT" key can move the Box1 Class 

When Box1 move to Box2 body and they are colliding.

The Box1text  is show  " Box1 is connect"

collide: function(body) {
if (body.collisionGroup === 2) {
game.scene.Box1Text.text = 'Box1 is connect'; 
}
return true;
},

and 

Box2text is show  " Box2 is connect",

collide: function(body) {
if (body.collisionGroup === 1) {
game.scene.Box2Text.text = 'Box2 is connect'; 
}
return true;
},

 

but only Box1text successful show the text.

I have set collide: function to box1.class and box2.class,  what is the problem

game.createClass('Box1', {

    ..........
   
        this.body.collisionGroup = 1;
        this.body.collideAgainst.push(2);

        this.body.collide = this.collide.bind(this);
    ..........

    collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
        }
        return true;
    }, 
    ..........

});

game.createClass('Box2', {
    ..........
        this.body.collisionGroup = 2;
        this.body.collideAgainst.push(1);
        this.body.collide = this.collide.bind(this);


    },

    collide: function(body) {
        if (body.collisionGroup === 1) {
          game.scene.Box2Text.text = 'Box2 is connect';  
        }
        return true;
    },
    ..........

 

 

 

Please don't use the following method

//the following code is Work, but I don't use this method ,thanks you very much
game.createClass('Box1', {

    ..........
   
        this.body.collisionGroup = 1;
        this.body.collideAgainst.push(2);

        this.body.collide = this.collide.bind(this);
    ..........

    collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
          game.scene.Box2Text.text = 'Box2 is connect'; 
        }
        return true;
    }, 
    ..........

});

 

Thank you very much!!!!!!

 

[Wolfsbane]

I had a little play around, and this is how I guess it works.

Collisions are done in order of collisionGroup. Box1 is in collisionGroup 1, so it's collision executes first on collision (before collisionGroup2).

Now: If in the first collide() function, you move the body back outside the collision, when it's now turn for collisionGroup 2 to look for collisions, it no longer exists anymore. Does that make sense?

You can change Box1 to collitionGroup 3, and you'll see that it's now Box2's text that shows up as it's now the 'first collision' in order.

To stop this: You can make sure you don't move outside of the collision. So in Box1: collide event: Return false instead of true.

collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
        }
        return false; //return false.
    },

Panda docs say:

..whatever hit response is. I think it just means it will handle the collision by moving the bodies outside of each other.

You may not want this. So alternatively, you can do something like this:

collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
          
          body.collide(this.body);
        }
        return true;
    },

 

Now: You still return true (so the bodies will move outside each other) but now you're manually calling the collision function on the other object.

 

 

[khleug35]

19 hours ago, Wolfsbane said:

I had a little play around, and this is how I guess it works.

Collisions are done in order of collisionGroup. Box1 is in collisionGroup 1, so it's collision executes first on collision (before collisionGroup2).

Now: If in the first collide() function, you move the body back outside the collision, when it's now turn for collisionGroup 2 to look for collisions, it no longer exists anymore. Does that make sense?

You can change Box1 to collitionGroup 3, and you'll see that it's now Box2's text that shows up as it's now the 'first collision' in order.

To stop this: You can make sure you don't move outside of the collision. So in Box1: collide event: Return false instead of true.

collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
        }
        return false; //return false.
    },

Panda docs say:

..whatever hit response is. I think it just means it will handle the collision by moving the bodies outside of each other.

You may not want this. So alternatively, you can do something like this:

collide: function(body) {
        if (body.collisionGroup === 2) {
          game.scene.Box1Text.text = 'Box1 is connect'; 
          
          body.collide(this.body);
        }
        return true;
    },

 

Now: You still return true (so the bodies will move outside each other) but now you're manually calling the collision function on the other object.

 

 

@Wolfsbane

awesome !!!  it work!!!!!

Thank you very much for the awesome code and teaching me!!! 

Have a nice day!!! Thanks again!!!