Detect collision

[Phempt]

Hi guys, I'm here with an other noob question

 

I've a main.js that spawn the player and set the world variables:

        /* WORLD & CONTAINERS */        this.world = new game.World(0, 100);        this.world.ratio = 1;

and my player body is declared with:

/* BOX BODY */           this.testBody = new game.Body({                position: [test.position.x + (test.width / 2), test.position.y + (test.height / 2)],	            collisionGroup: 0,	            collideAgainst: 0,	            mass: 0,	        });	        this.testBody.collide = this.collide.bind(this);	        this.testBody.addShape(new game.Rectangle(136 , 176));	        game.scene.world.addBody(this.testBody);

The collide function is simple:

collide: function() {	  console.log("Collision.");	  return true;},

than, I've a file "enemies.js" that spawn the enemies:

this.topBody = new game.Body({	            position: [this.enemy.position.x + (this.enemy.width / 2), this.enemy.position.y + (this.enemy.height / 2)],	            collisionGroup: 0,	            collideAgainst: 0,	            mass: 0,	        });	        this.topBody.collide = this.collide.bind(this);	        this.topBody.addShape(new game.Rectangle(74 , 314  ));	        game.scene.world.addBody(this.topBody);

Of course a collide function is also declared:

    collide: function() {	    	console.log("Collision.");	    	return true;	    },

and an update function that moves them:

this.topBody.position[0] = this.enemy.position.x + (this.enemy.width / 2);this.topBody.position[1] = this.enemy.position.y + (this.enemy.height / 2);

all is working well except the collide function, the collision is not logged into the console.

 

Any idea?

[ambidex]

Are you requiring the p2.js plugin by any chance? Did you check with debugdraw if the bodies are moving correctly and indeed collide with each other? 

[Phempt]

Yes, with the debugdraw enabled I saw the enemies' bodies moving and "touch" the player body.

[Stephan]

Have you added your player and enemies to game.scene?

I also notice that you keep your body at the same position of the sprite? Usually this is done the other way around because you can add speed to a body and not to a sprite itself.

[ambidex]

And using p2.js? If so, that's an somewhat different workflow and uses different properties and events. 

[Phempt]

Sprite and bodies are added to game scene and containers through:

// AddTo Player Spritetest.addTo(game.scene.containerEnemies);game.scene.addObject(test);// AddTo player bodygame.scene.world.addBody(this.testBody);

yes, p2.js is included as plugin, and declared in the first line of my main.js:

game.module('game.main').require('game.assets','plugins.p2','game.enemies').body(function() {

and of course, p2.js is added in src/plugins/.

 

Yes, I change the body position using the object position because, in this way all bodies are stick to the sprite.

[Phempt]

An other strange thing, adding a "mass" to each elements, the collision seems to work because the bodies moves following the physics rules (I saw this with debugdraw), BUT no console.log message is shown, it seems that the collide function it doesn't work / or not called 

[enpu]

Is there a reason why you need p2.js, and not using Panda's own simple physics?

 

p2.js is big and complex physics engine, and collision detection etc are a bit different.

 

If you really need p2, you should go through p2 demos and examples to see how it works:

http://schteppe.github.io/p2.js/

 

 

Edit: i think you are now mixing up p2 and panda's own physics.

You see Panda physics examples does not work with p2.

[Phempt]

I'm confused, I'm not using this: http://schteppe.github.io/p2.js/.

 

I'm using the p2.js plugin, but after this conversation I don't know if for my purposes (detect collision between object) is the right way or not.

[Ninjadoodle]

Hi Phempt

 

The p2.js plugin is a 'port' of the http://schteppe.github.io/p2.js/ physics engine for Panda. So the stuff you'll find on that page applies when it comes to using/learning the physics engine.

 

Panda also has its own build in physics engine, which is a bit more basic than p2, but might suit your needs (this is what enpu was referring to).

 

I could be wrong, but I think the flying dog demo uses the built in physics.

 

https://github.com/ekelokorpi/flyingdog

 

Hope this helps

[Phempt]

This is a screenshot of the bodies using the plugin p2.js (mass 0 for player and enemies - the tubes are the enemies).

 

this collision is not detected from "collide" function.

 

This is the screenshot of the same configuration with mass = 1 for tubes (enemies):

 

the collision seems to work but the function collide don't log into the console "Collision".

 

If I remove the p2 plugin from the main.js:

From:game.module('game.main').require('game.assets','plugins.p2','game.enemies').body(function() {to:game.module('game.main').require('game.assets','engine.physics','game.enemies').body(function() {

The result is:

bodies are not placed in the correct position, and the parameter "position" seems to not work also with integer values.

[enpu]

Yep that because p2 and Panda physics syntax is different on position.

 

Take a look at Flying Dog source code, it uses Panda physics:

https://github.com/ekelokorpi/flyingdog/blob/master/src/game/objects.js

[Phempt]

Now I understand I tried and using:

velocity: {x: 0, y:0}

the result was:

902 Collision. 

[ambidex]

Phempt, if using p2.js in your game is an absolute must, I'll summarize some differences in the way P2.js works in comparison of the built-in detection of Panda.js.

 

Most of the settings for collision detection in p2.js are set in the body's shape, see an small example of how to use the groups and masks here:

 

http://schteppe.github.io/p2.js/docs/classes/Shape.html#property_collisionGroup

 

In your version, it might even be enough to adjust your first block of code to the following, you do not need to define your collisiongroup and mask because you aren't using multiple groups. 

/* BOX BODY */     this.testBody = new game.Body({         position: [test.position.x + (test.width / 2), test.position.y + (test.height / 2)],         collisionGroup: 0,         collideAgainst: 0     });     this.testBodyShape = new game.Rectangle(136 , 176);     this.testBodyShape.sensor = true; // Important to make this shape detect other bodies     this.testBody.addShape();     game.scene.world.addBody(this.testBody);

Then you need to add a event to your world, you probably want to add this bit to your scene's init function: 

this.world.on('beginContact', function (e) {    console.log('Collision detected (start)', e); // You should inspect the event (e), since this will contain body / shape A and B}

Edit: I must add, the above is entirely untested. 

[Phempt]

@ambidex, your post is really appreciated, for a basic game, like that shown in the screenshots above, the Panda.js engine is quite enough.

 

But for a good platform with physics maybe is better to use the p2 plugin. I'll try your suggestion as soon as possible, but I don't understand if this function will be used for both files (main, that spawn the player, and enmies.js that spawn tubes)

this.world.on('beginContact', function (e) {console.log('Collision detected (start)', e);});

[Phempt]

adding:

this.<variableName>.sensor = true;

for each body, and adding:

this.world.on('beginContact', function (e) {console.log('Collision detected (start)', e);});

after this.world.ration, as show below:

/* WORLD & CONTAINERS */        this.world = new game.World(0, 100);        this.world.ratio = 1;        this.world.on('beginContact', function (e) {console.log('Collision detected (start)', e);});

it doesn't work because the mass of every object is "0", changing the mass of tubes from 0 to 1, it works!

Collision detected (start) Object {type: "beginContact", shapeA: Rectangle, shapeB: Rectangle, bodyA: Body, bodyB: Body…}Collision detected (start) Object {type: "beginContact", shapeA: Rectangle, shapeB: Rectangle, bodyA: Body, bodyB: Body…} 

Thank you ambidex!

[ambidex]

Yeah you got it, looking good. No problem, happy to help.