Sign in to follow this  
khleug35

(Solved)Problem about collision Between two sprites

Recommended Posts

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.

1.thumb.png.e0fc44d1d1dce54dbda2162c0ecbcf8c.png

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!!!!!!:)

 

Share this post


Link to post
Share on other sites

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:

image.png.b46d21c15536e5d316ef6446c296aa7b.png

..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.

 

 

Share this post


Link to post
Share on other sites
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:

image.png.b46d21c15536e5d316ef6446c296aa7b.png

..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!!! 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.