Jump to content

Cant get function to fire on collision!


Get_Bentley
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

 

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 !

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

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!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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