Sign in to follow this  
Mike

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

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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;        }

Share this post


Link to post
Share on other sites

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 :P 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 by Mike

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.