Cant get function to fire on collision!

[Get_Bentley]

Hello everybody,

 

I am having issues in my brick breaker clone getting a function to fire when a collision between the ball and player happen, the collisions are working properly, but the function will not fire. I am not sure what is going on and it has been driving me nuts.

 

 

//in update for collision between player and ball

 

 

        this.game.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);
 

 

 

//ballHitPaddle function

 

 

ballHitPaddle: function(ball, player) {

    var diff = 0;

    if (this.ball.body.x < this.player.body.x)
    {
        //  Ball is on the left-hand side of the paddle
        diff = this.player.body.x - this.ball.body.x;
        this.ball.body.velocity.x = (-10 * diff);
    }
    else if (this.ball.body.x > this.player.body.x)
    {
        //  Ball is on the right-hand side of the paddle
        diff = this.ball.body.x -this.player.body.x;
        this.ball.body.velocity.x = (10 * diff);
    }
    else
    {
        //  Ball is perfectly in the middle
        //  Add a little random X to stop it bouncing straight up!
        this.ball.body.velocity.x = 2 + Math.random() * 8;
    }

},

 

Any help or advice is greatly appreciated!

 

 

- Thank you.

[rhennig]

i thing you should use "ball" and "player" inside youre function to acess the args, not "this.ball" and "this.player"

[Get_Bentley]

i thing you should use "ball" and "player" inside youre function to acess the args, not "this.ball" and "this.player"

Are you referring in the collision in update?

[tsphillips]

Some random debugging tips for callbacks with strange (or no) behavior:

 

- Before you invoke the callback, use a console.log() to make sure you are setting the callback you think you are.  For example,

console.log(this.ballHitPaddle);this.game.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);

- Print a debug message as the first line in a callback to see if the callback is really being called.  For example,

 

ballHitPaddle: function(ball, player) {    console.log('ballHitPaddle start');    . . .

 

Once you are sure the callback is being called, then you can debug inside the callback with similar strategies.

 

 

Tom

[Get_Bentley]

 

Some random debugging tips for callbacks with strange (or no) behavior:

 

- Before you invoke the callback, use a console.log() to make sure you are setting the callback you think you are.  For example,

console.log(this.ballHitPaddle);this.game.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);

- Print a debug message as the first line in a callback to see if the callback is really being called.  For example,

 

ballHitPaddle: function(ball, player) {    console.log('ballHitPaddle start');    . . .

 

Once you are sure the callback is being called, then you can debug inside the callback with similar strategies.

 

 

Tom

 

Thank you very much for your reply, I am debugging inside the callback as shown here:

 

ballHitPaddle: function(ball, player) {

    console.log('ballHitPaddle start');

    . . .

thats how I know the callback is not being called.

 

So you are saying I just need to add a console.log(); above the collision in update to see if im setting the correct call back?

As shown here:

 

console.log(this.ballHitPaddle);

this.game.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);

 

I will give this a try when I get home tonight, but last night it also triggered the callback but only when the ball's top left corner of body and the player's bottom left corner of body collided. Any idea on why this happened?

 

Could it be an anchor issue? I have both sprites anchors set to (0.5, 0.5). Thanks again for your reply !

[tsphillips]

I would recommend printing out the fields of the body objects attached to those sprites and see if anything looks odd.  (E.g., width, height, etc.)  I will usually just dump a whole sprite to the console and manually inspect the different fields to look for anomalies.  For example, console.log(this.ball); console.log(this.player).

 

Tom

[Get_Bentley]

I would recommend printing out the fields of the body objects attached to those sprites and see if anything looks odd.  (E.g., width, height, etc.)  I will usually just dump a whole sprite to the console and manually inspect the different fields to look for anomalies.  For example, console.log(this.ball); console.log(this.player).

 

Tom

Awesome advice! Did not even think of that, thank you!

[rhennig]

I think you're acessing the wrong vars in your "ballHitPaddle" function...

 

I'm not sure, but seems to me that if you use this.ball inside your "ballHitPaddle" function, you acess the same var as in "this.game.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);".

 

But you want to acess the blue one...

 

ballHitPaddle: function(ball, player) {

}

 

That is why i said to remove "this." inside your function...

[Get_Bentley]

I think you're acessing the wrong vars in your "ballHitPaddle" function...

 

I'm not sure, but seems to me that if you use this.ball inside your "ballHitPaddle" function, you acess the same var as in "this.game.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);".

 

But you want to acess the blue one...

 

ballHitPaddle: function(ball, player) {

}

 

That is why i said to remove "this." inside your function...

Oh so you are stating that inside the function as far as in the IF statements instead of using this.ball and this.player to just use ball and player? Is that correct?

[rhennig]

I've tested it here and works for me... If yours code is like that and dont works i really dont know what can be... =/

var BB = BB || {};// create Game function in BBBB.Game = function () {};    preload: function () {        this.load.image('player', 'asset/player.png');        this.load.image('ball', 'asset/ball.png');    },    create: function () {        this.world.setBounds(0, 0, this.game.width, this.game.height);        this.player = this.add.sprite(this.game.width/2, this.game.height, 'player');        this.physics.enable(this.player, Phaser.Physics.ARCADE);        this.player.anchor.setTo(0.5, 0.5);        this.player.body.allowRotation = false;        this.player.body.drag.set(100);        this.player.body.maxVelocity.set(100);        this.player.body.collideWorldBounds = true;                //ball        this.ball = this.add.sprite(50, 50, 'ball');        this.physics.enable(this.ball, Phaser.Physics.ARCADE);        this.ball.body.collideWorldBounds = true;        this.ball.body.velocity.y = -300;        this.ball.body.velocity.x = -75;        this.ball.body.bounce.set(1);                this.keyboard = this.input.keyboard.createCursorKeys();    },        update: function()    {        if (this.input.keyboard.isDown(Phaser.Keyboard.LEFT))        {            this.player.x -= 4;        }        else if (this.input.keyboard.isDown(Phaser.Keyboard.RIGHT))        {            this.player.x += 4;        }        this.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);    },        ballHitPaddle: function(ball, player) {        var diff = 0;        if (ball.body.x < player.body.x)        {            //  Ball is on the left-hand side of the paddle            diff = player.body.x - ball.body.x;            ball.body.velocity.x = (-10 * diff);            //ball.body.velocity.y = (-10 * diff);        }        else if (this.ball.body.x > this.player.body.x)        {            //  Ball is on the right-hand side of the paddle            diff = ball.body.x -player.body.x;            ball.body.velocity.x = (10 * diff);            //ball.body.velocity.y = (10 * diff);        }        else        {            //  Ball is perfectly in the middle            //  Add a little random X to stop it bouncing straight up!            ball.body.velocity.x = 2 + Math.random() * 8;            //ball.body.velocity.y = 2 + Math.random() * 8;        }    }};

[Get_Bentley]

 

I've tested it here and works for me... If yours code is like that and dont works i really dont know what can be... =/

var BB = BB || {};// create Game function in BBBB.Game = function () {};    preload: function () {        this.load.image('player', 'asset/player.png');        this.load.image('ball', 'asset/ball.png');    },    create: function () {        this.world.setBounds(0, 0, this.game.width, this.game.height);        this.player = this.add.sprite(this.game.width/2, this.game.height, 'player');        this.physics.enable(this.player, Phaser.Physics.ARCADE);        this.player.anchor.setTo(0.5, 0.5);        this.player.body.allowRotation = false;        this.player.body.drag.set(100);        this.player.body.maxVelocity.set(100);        this.player.body.collideWorldBounds = true;                //ball        this.ball = this.add.sprite(50, 50, 'ball');        this.physics.enable(this.ball, Phaser.Physics.ARCADE);        this.ball.body.collideWorldBounds = true;        this.ball.body.velocity.y = -300;        this.ball.body.velocity.x = -75;        this.ball.body.bounce.set(1);                this.keyboard = this.input.keyboard.createCursorKeys();    },        update: function()    {        if (this.input.keyboard.isDown(Phaser.Keyboard.LEFT))        {            this.player.x -= 4;        }        else if (this.input.keyboard.isDown(Phaser.Keyboard.RIGHT))        {            this.player.x += 4;        }        this.physics.arcade.collide(this.ball, this.player, this.ballHitPaddle, null, this);    },        ballHitPaddle: function(ball, player) {        var diff = 0;        if (ball.body.x < player.body.x)        {            //  Ball is on the left-hand side of the paddle            diff = player.body.x - ball.body.x;            ball.body.velocity.x = (-10 * diff);            //ball.body.velocity.y = (-10 * diff);        }        else if (this.ball.body.x > this.player.body.x)        {            //  Ball is on the right-hand side of the paddle            diff = ball.body.x -player.body.x;            ball.body.velocity.x = (10 * diff);            //ball.body.velocity.y = (10 * diff);        }        else        {            //  Ball is perfectly in the middle            //  Add a little random X to stop it bouncing straight up!            ball.body.velocity.x = 2 + Math.random() * 8;            //ball.body.velocity.y = 2 + Math.random() * 8;        }    }};

Ok awesome so it looks like most like it was because I was using this.ball and this.player inside of that function I will give it a try tonight and see if that clears the issue up. Thanks a lot for all of the help!

[Get_Bentley]

Unfortunately that did not clear up my issue, I honestly dont know what it could be, its as if for these functions it is not reading the collision even though it is happening :/. Any other ideas? Lol