Jump to content

Physic bug ?


Recommended Posts



look at that code https://dl.dropboxusercontent.com/u/1120328/tmp/phaser/index3.html

everything goes as expected, the ball hit the platforms, then goes outside the screen


Now, look here, https://dl.dropboxusercontent.com/u/1120328/tmp/phaser/index2.html, if I add ONE ball (line 32), the first rolling ball stop its mouvement in the middle of nowhere :(


Is that a bug or do I miss something wrong ?


The second ball can be another sprite (from another texture) and placed anywhere, I got the same result...

Link to comment
Share on other sites

If you render the quadTree you can see there is not green box in the platform that cause the problem.

I think is not a bug, when there is one ball, the screen is not splitted in 4 areas and works.


I´m looking how quadTree works in the docs and examples now.






<!doctype html><html>    <head>        <meta charset="UTF-8" />        <title>hello phaser!</title>    </head>    <body>    <script type="text/javascript">    window.onload = function() {        var ball, wallGroup,            game = new Phaser.Game(888, 672, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });        function preload () {            game.load.atlas('ping', 'assets/img/red_baballe.png', 'assets/img/red_baballe.json');        }        function create () {            wallGroup = game.add.group();            for (var i = 0; i < 9; i++) {                var a = game.add.sprite(24 + (i * (24 * 4)), 11 * 24, 'ping', 'yellow_big_solid');                a.body.immovable = true;                wallGroup.add(a);            }            ball = game.add.sprite(0, 2 * 24, 'ping', 'red_baballe_1');            ball.body.velocity.x = 200;            ball.body.gravity.y = 10;            game.add.sprite(0, 0, 'ping', 'red_baballe_1');        }        function update () {            game.physics.collide(ball, wallGroup);        }         function render () {            game.debug.renderQuadTree(game.physics.quadTree);        }    };    </script>    <script src="js/lib/phaser/build/phaser.js"></script>    </body></html>
Link to comment
Share on other sites

I have remade the Stars example, the same error, the character can´t walk to the next platform if you go from left to right when the platform is between two quadtree areas:



<!doctype html> <html lang="en"> <head> 	<meta charset="UTF-8" />	<title>Phaser - Getting started</title>	<script type="text/javascript" src="js/phaser.min.js"></script>    <style type="text/css">        body {            margin: 0;        }    </style></head><body><script type="text/javascript">var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render  });function preload() {    game.load.image('sky', 'assets/sky.png');    game.load.image('ground', 'assets/platform.png');    game.load.image('star', 'assets/star.png');    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);}var player;var platforms;var cursors;var stars;var score = 0;var scoreText;function create() {    //  A simple background for our game    game.add.sprite(0, 0, 'sky');    //  The platforms group contains the ground and the 2 ledges we can jump on    platforms = game.add.group();    // Here we create the ground.    var ground = platforms.create(0, game.world.height - 64, 'ground');    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)    ground.scale.setTo(2, 2);    //  This stops it from falling away when you jump on it    ground.body.immovable = true;    //  Now let's create two ledges    var ledge = platforms.create(-100, 400, 'ground');    ledge.body.immovable = true;    ledge = platforms.create(300, 400, 'ground');    ledge.body.immovable = true;    ////  10 elements more to divide de quadTree            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');            ledge = platforms.create(420, 500, 'ground');    ////    // The player and its settings    player = game.add.sprite(32, game.world.height - 450, 'dude');    //  Player physics properties. Give the little guy a slight bounce.    player.body.bounce.y = 0.2;    player.body.gravity.y = 6;    player.body.collideWorldBounds = true;    //  Our two animations, walking left and right.    player.animations.add('left', [0, 1, 2, 3], 10, true);    player.animations.add('right', [5, 6, 7, 8], 10, true);    //  Finally some stars to collect    // stars = game.add.group();    //  Here we'll create 12 of them evenly spaced apart      //  The score    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });    //  Our controls.    cursors = game.input.keyboard.createCursorKeys();    }function update() {    //  Collide the player and the stars with the platforms    game.physics.collide(player, platforms);    // game.physics.collide(stars, platforms);    //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function    // game.physics.overlap(player, stars, collectStar, null, this);    //  Reset the players velocity (movement)    player.body.velocity.x = 0;    if (cursors.left.isDown)    {        //  Move to the left        player.body.velocity.x = -150;        player.animations.play('left');    }    else if (cursors.right.isDown)    {        //  Move to the right        player.body.velocity.x = 150;        player.animations.play('right');    }    else    {        //  Stand still        player.animations.stop();        player.frame = 4;    }        //  Allow the player to jump if they are touching the ground.    if (cursors.up.isDown && player.body.touching.down)    {        player.body.velocity.y = -350;    }}       function render () {            game.debug.renderQuadTree(game.physics.quadTree);        }</script></body></html>
Link to comment
Share on other sites

Interestingly, where it seems to be failing is in the Physics separateX - it is actually colliding with one of the blocks.

If I had to guess why this bug is appearing when the Quadtree splits, it's this:

Firstly, the collision handling is done by X first, then by Y. If the overlap is higher than the object velocity it is ignored.

With no Quadtree splits, *every* object is checked for overlap/separate, in order of addition to the scene. This means, as the ball moves horizontally, the previous platform separate moves it up so it is no longer low enough to collide with the X pillars.

The separateX is ignored as the object is (usually) in the middle or right of the previous platform (and therefore is overlapping more than the object velocity).

Ie. for the prior platform, separateX is skipped but separateY happens, putting the ball back on the right level.

With the Quadtree, the order of checking changes. The platform that the ball is moving onto (and stopping on) is checked *first*, At this point it has sunk a little due to gravity and needs separating.

However, *separateX is called first*, which causes the ball to collide with the left hand side of this new platform.

You could test this theory (I haven't) by sticking the following into your index.html :


Phaser.Physics.Arcade.prototype.separate = function (body1, body2) {        this._result = (this.separateY(body1, body2) || this.separateX(body1, body2));    }
This flips the order of separation.

A better fix is to set a.body.collideLeft and collideRight to false for each bit of your wall.

Link to comment
Share on other sites

Flipping the order of separation fix the problem.

however, I'm not really confortable with monkey patching Phaser like this, but I think I will go with it for now.


Removing collideLeft and Right is not an option, because I need them. I'm building a Pang clone in fact, to test Phaser. The balls are normally bouncing (and have the same weird behavior than my example, the balls changes their direction when bouncing on the platforms) And they can bounce on the right and left sides of the platforms (and bounce on vertical walls too)


I'm going to check if this bug is listed on the issues and create an issue if not.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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