Collision happens even though the objects are not colliding according to what we see

Question

I'm trying to build a pool game as my first phaser project.

The biggest challenge today was to make the cue rotate around the white ball. After hours of searching and not finding anything useful (there is an example about rotating points but no sprites) I was able to create something, not very clean but it works.

Here is the white ball

    balls = game.add.group();
    balls.enableBody = true;
    balls.physicsBodyType = Phaser.Physics.P2JS;
    wball = balls.create(350, 240 , 'ballW');
    wball.body.setCircle(15);
    wball.body.setCollisionGroup(wballCollisionGroup);
    wball.body.collides([wballCollisionGroup, ballsCollisionGroup , sidesCollisionGroup , holesCollisionGroup , playerCollisionGroup]);            
    game.physics.p2.setImpactEvents(true);

Here is the cue which i call it player

player = game.add.sprite( 0   , 0   , 'player');
game.physics.p2.enable(player);
player.enableBody = true;
player.body.setCollisionGroup(playerCollisionGroup);
player.body.setZeroVelocity();
player.body.createBodyCallback(wball, ballHit , this);
player.anchor.setTo(-0.5, 0.5);   
player.pivot.x = wball.x +150;
player.pivot.y = 0;

player.body.x = wball.x  ;

setTimeout(function(){
     player.body.y = 150 ;
} , 1000 );

setTimeout(function(){
     player.body.y = 200 ;
} , 2000 );

setTimeout(function(){
     player.body.y = 240 ;
} , 3000 );

As you can see I have set the y position for player in 3 steps to demonstrate the problem .

It starts at the top of the page and comes down as soon as i set y=240, which is the wball y a collision happens even though we can see clearly they are not colliding.

Pleaes note both codes are in the create function. Here is the live code: http://199.26.84.223/

Answer 1

The physics body is offset from the sprite body, causing collisions to happen to the right of the displayed sprite for the pool cue. To see what I mean, enable debugging on the P2 body by changing: game.physics.p2.enable(player); to game.physics.p2.enable(player, true);

The second parameter, as specified in the documentation here (http://phaser.io/docs/2.4.3/Phaser.Physics.html#enable) enables optional debugging on the physics object.

As you can see in the following image, this is the physics body:

This can be "fixed" by removing the lines

player.anchor.setTo(-0.5, 0.5);   
player.pivot.x = wball.x +150;
player.pivot.y = 0;

But I have a feeling that you intended to have the cue rotate about the end of the stick. I'm unsure of how to accomplish that.