Collision detection problem [SOLVED]

[pinkpanther]

Hi,

I'm writing my first projects with Panda.js. My problem is collision detection, which does not work.

Looking at flyingdog, I developed some basic code for collisions for AI enemy and projectile (both):

 

this.body = new game.Body({
                position : {
                  x : x,
                  y : y
                },
                collisionGroup : 0,
                collideAgainst : 1,
                mass : 0
              });
              this.body.collide = this.collide.bind(this);

 

remove : function(obj) {
            
              obj.isRemoved = true;
              game.scene.world.removeBody(obj.body);
              game.scene.stage.removeChild(obj.sprite);
              game.scene.removeObject(obj);
          },
          
          collide : function() {
              console.log('Hit!');
              this.remove(this);
              return true;
          },

 

But it does not hit - even no message on console log - so it seems, that collide function was never called.

What did I wrong or what did I miss?

 

Thx in advance!

PP

[maho125]

At first in init method define some shape for body.

var width = 100;var height = 50;this.shape = new game.Rectangle(width,height);this.body.addShape(this.shape);          

And also you need to add body to world. 

game.scene.world.addBody(this.body);

If you want also visual representation of body you have to add sprite to scene and in update method assign to sprite current position and rotation of body.

 

Easy example of collision detection in Panda.js you can find here:

 

http://www.demos.tomasmahrik.com/physicsdemo1/

[pinkpanther]

Hi,

 

thank you for reply - I've added shapes as You described, but no effect. It seems the collide functions are never called.

 

This is the curent code:

 

 Enemy = game.Class.extend({
          acceleration : 0,
          speed : 1,
          lasttime : 0,
          currenttime : 0,
          isRemoved : false,
          
          init : function(x, y) {
              this.sprite = new game.Sprite('enemy');
              this.sprite.anchor.set(0.5, 0.5);
              this.sprite.position.x = x;
              this.sprite.position.y = y;
              
              this.shape = new game.Rectangle(this.sprite.width, this.sprite.height);
              
              this.body = new game.Body({
                position : {
                  x : x,
                  y : y
                },
                collisionGroup : enemy,
                collideAgainst : friend,
                mass : 0
              });
              
              this.body.addShape(this.shape);
              
              this.body.collide = this.collide.bind(this);
              
              game.scene.world.addBody(this.body);
              game.scene.stage.addChild(this.sprite);
              game.scene.addObject(this);
              
              this.update();
          },

 

 

 Proj = game.Class.extend({
          speed : 10,
          isRemoved : false,
          parent : null,
          
          init : function(x, y, a, p) {
              this.sprite = new game.Sprite('proj');
              this.sprite.anchor.x = this.sprite.anchor.y = 0.5;
              this.sprite.position.x = x;
              this.sprite.position.y = y;
              this.acceleration = a;
              this.parent = p;
              
              this.shape = new game.Rectangle(this.sprite.width * 2, this.sprite.height * 2);
              
              this.body = new game.Body({
                position : {
                  x : x,
                  y : y,
                },
                collisionGroup : friend,
                collideAgainst : enemy,
                mass : 0,
              });
              
              this.body.addShape(this.shape);
              this.body.collide = this.collide.bind(this);
              
              game.scene.world.addBody(this.body);
              game.scene.stage.addChild(this.sprite);
              game.scene.addObject(this);
              
              this.update();
          },

 

for both classes collide function looks the same:

 

   collide : function(body) {
              console.log('Hit!');
              this.remove(this);
              return false;
          },

 

The projectile shape is small (2 px wide) - could it be the reason for missde collision detection?

 

Best regards!

[maho125]

Pls post here update function for both bodies. Projectile it's quite small so for testing purposes set his width to more pixels (for example 10px). And try to add to your project URL this parameter 

?debugdraw

It helps you to check if movement of your bodies is updating because I suspect that you update only position of sprite. 

 

And where you define indexes for collision groups (friend,enemy)? Test if indexes of collision groups are not null.

[pinkpanther]

Hi,

 

thanks again :-)

 

EDIT:

My group indexes are constants, but even I put them numeric, collision still doesn't work.

 

Here comes the code::

 

 

Enemy update:

 

update : function() {
              this.body.position.x += this.speed * this.acceleration;
              this.sprite.position.x = this.body.position.x;
              this.sprite.position.y = this.body.position.y;
          },

 

Proj update:

 

update : function() {
              if (this.body.position.y < 0) {
                  this.remove(this);
              }
              this.body.position.y += this.speed * this.acceleration;
              this.sprite.position.x = this.body.position.x;
              this.sprite.position.y = this.body.position.y;
          },

 

Changing proj to player size still doesn't have any effect on collision detection.

 

EDIT:

?debugdraw show shapes colliding, but still no collide function called.

 

Best regards

Edited July 4, 2014 by pinkpanther

[maho125]

Try modify update functions like this:

 

Enemy

//this.body.position.x += this.speed * this.acceleration;this.body.velocity.x = this.speed * this.acceleration;

Projectile

 //this.body.position.y += this.speed * this.acceleration;this.body.velocity.y = this.speed * this.acceleration;

[pinkpanther]

Thank you!

I tried with this.body.velocity - the proj just stop on collision with enemy, but still no collision method is called

[pinkpanther]

Ok, time, to some conclusions:

- the collide function is definitely never called,

- the DOM structure is recurrent - there is a world in bodies (?!) - is that ok? Maybe, but I'm not sure.

 

I understand, that to have collision function called and workig, I have to:

- declare body and set postion,

- declare shape and add this to body

- bind object collide function tih body collide by  this.body.collide = this.collide.bind(this);

- add body to game.scene.world (which seems to be static global - am I right or not?)

- add sprite to game.scene.stage (which seems... as above),

- add object to game.scene (which... as above)

- update all object's .body.position.x and .y via update function (which is automatically called after adding object to game.scene - works fine).

 

This is my basic checklist based on physicsdemo - and everything should work fine as in demo. But it doesn't. Have I missed something?

 

Best regards!

[pinkpanther]

Solved.

A friend of mine hacked hitResponse function in physics.js, omitting optimisations, so it worked. Then I realized, that due to these optimisations using .last. property, this is necessary to at least one of colliding objects to have body.velocity set. (even if velocity is 0).(@Maho125 suggested that, but I used velocity improperly, so it didn't worked). This is probably due to the fact, that .last. (e.g. b.last.y) property is computed using velocity.

 

Maho125 - thank you again for your effort and suggestions!

[maho125]

@pinkpanther  You're welcome. But if you want better physics in your game I recommend you use p2 physics. @empu made a plugin for p2 physics. More info you can find here http://www.html5gamedevs.com/topic/4591-p2js-physics/

[sandy758]

Similar issue, Collision not happening even if all those are set. Please suggest