Custom collision with "wall"/bounds" - bounce problem

[Mike]

So we have sprite moving left right and the aim is to make it stop when hit a "invisible" wall.

 

Let's presume that the x coordinate checks are 0px and 300px, so:

 

        if(game.input.keyboard.isDown(Phaser.Keyboard.A)) {            paddle.body.velocity.x = -paddleSpeed;        } else if(game.input.keyboard.isDown(Phaser.Keyboard.D)) {            paddle.body.velocity.x = paddleSpeed;        }

and after checking some Phaser source i came up with this:

 

        if(paddle.x < paddle._cache.halfWidth) {            paddle.x = paddle._cache.halfWidth;            paddle.body.velocity.x *= -paddle.body.bounce.x;        }        if(paddle.x > game.world.width - paddle._cache.halfWidth) {            paddle.x = game.world.width - paddle._cache.halfWidth;            paddle.body.velocity.x *= -paddle.body.bounce.x;        }

 

If I use:

 

paddle.body.collideWorldBounds = true;  //like in the examples it-s all KO no bouncing/jitter when paddle hit the walls

 

And since this is the code for checkWorldBounds:

 

if (this.x < this.game.world.bounds.x){this.x = this.game.world.bounds.x;this.velocity.x *= -this.bounce.x;}else if (this.right > this.game.world.bounds.right){this.x = this.game.world.bounds.right - this.width;this.velocity.x *= -this.bounce.x;}

I used the same approach... but still when it  hit the right or left border the sprite passes the border and then it's positioned back ... you can check it, here:

 

http://mihail.ilinov.eu/games/PhaserBreakoutJSBuggy/

 

Just press "A" and "D" for moving left and right and hit the wall you will see the problem...

 

Also what's the deal with: body.bounce

 

[Hsaka]

Hey it should work if you reorder your code a bit like this:

        if(game.input.keyboard.isDown(Phaser.Keyboard.A)) {            if(paddle.x <= paddle._cache.halfWidth) {                paddle.x = paddle._cache.halfWidth;                paddle.body.velocity.x *= -paddle.body.bounce.x;            }            else                paddle.body.velocity.x = -paddleSpeed;        } else if(game.input.keyboard.isDown(Phaser.Keyboard.D)) {            if(paddle.x >= game.world.width - paddle._cache.halfWidth) {                paddle.x = game.world.width - paddle._cache.halfWidth;                paddle.body.velocity.x *= -paddle.body.bounce.x;            }            else                paddle.body.velocity.x = paddleSpeed;        }

[Mike]

Well, that's what second pair of eyes see. tnx Hsaka.

 

It's far better but i'll wait a little before makred your post as "bes answer" and that is because with the above changes

there is still a single moment when the paddle passes the border value.

 

Also I dig a bit more in phaser and found that the checks in - checkWorldBounds are made in "PreUpdate" function but my try with:

var game = new Phaser.Game(320, 416, Phaser.CANVAS, "content",{ preload: preload, create: create, preUpdate: preupdate, update: update, render: render });

And again 

paddle.body.collideWorldBounds = true; 

is working smoother and the paddle doesn't go pass the bounds ... and i think it's because the ckecks are in the preUpdate... so the question is:

 

1. Should I move the collision logic in custom preUpdate function instead in the update as it is now

2. How to declare the custom preUpdate cause preUpdate: preupdate in the state doesn't seem to work

 

p.s

http://mihail.ilinov.eu/games/PhaserBreakoutJSBuggy/

you can press "Q" to see that nothing happens and the expect result is console.log("preUpdate");

 

and also can directly type in the console: 

 

paddle.body.collideWorldBounds = true;  

or 

paddle.body.collideWorldBounds = false;

 

and see the difference.

Edited October 14, 2013 by Mike

[Vidsneezes]

what is the sprite anchor set to? 
the x and y position are affected by the anchor. 
so if the sprite is positioned at x = 0px and its width is 16px but it's anchor is set to the center so at 8px, then when you add the width,e.i 16px, it will end up searching in position 24px instead of 16px.

[Mike]

paddle.anchor.setTo(0.5, null); //center anchor/origin to the middle of the paddle

 

And that's why I'm using paddle._cache.halfWidth for the calculation.

[Vidsneezes]

Ah ok that makes sense, _cache.halfWidth seems really useful.