Jump to content

Detect collision


Recommended Posts

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


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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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:




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

You see Panda physics examples does not work with p2.

Link to comment
Share on other sites

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.




Hope this helps :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:




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. 

Link to comment
Share on other sites

@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);});
Link to comment
Share on other sites


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!

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...