Unexpected Sprite Collision using Arcade Physics

Phaser 3
1

I am making a peggle clone with phaser arcade physics and I’m occasionally seeing some weird physics I cant account for. I have a ball (circular sprite) which gets shot into stationary pegs (circular images).

Best way to explain is this example level I setup for my game. Load the game, hit the “left arrow” twice to aim to the left side of the peg, and hit “space” to shoot. You will see the ball shoot to the left, hit the left side, and then bounce to the right. It should bounce more to the left instead.

https://blaircurrey.github.io/peggle-clone/?debug=true&pegs[0][x]=305&pegs[0][y]=300&pegs[0][type]=common&pegs[1][x]=200&pegs[1][y]=150&pegs[1][type]=target

The query params enable debug mode to show sprite hitbox and sets up a peg so it produces the weird bounce.

The ball sprite gets added to the scene and and configured here: https://github.com/BlairCurrey/peggle-clone/blob/6e51f93edf681d0019bb7cc4b5cd8a07e1425321/src/components/Ball.ts#L31-L41

// called in the constructor of a Ball.ts class which contains the ball sprite
    this.sprite = this.scene.physics.add.sprite(
      this.startPoint.x,
      this.startPoint.y,
      ImageKey.BALL
    );
    this.sprite.setScale(
      this.width / this.sprite.width,
      this.width / this.sprite.height
    );
    this.sprite.body.setCircle(this.width * 2);
    this.sprite.setBounce(0.85).setCollideWorldBounds(true);

I have a collision handler here for the ball/peg but I dont think it should end up being a factor:

2

:wave:

Try with bounce 1 to see if there’s any difference.

Step through separateCircle().

3

Hi @samme, thanks for the suggestion.

Changing the bounce to 1 does not change the direction of the bounce at all. Seems like it basically increases the speed it bounces off (and vice-versa for lowering it).

I added a log of separateCircles in my update like this but im not exactly sure what to make of it:

    console.log(
      this.physics.world.separateCircle(
        this.ball.sprite.body,
        this.pegs.group.getChildren()[0].body as Phaser.Physics.Arcade.Body,
        true // overlapOnly
      )
    );

The logs show the overlap amount decreasing as it gets closer to the peg and the result is always true (separation occurred). There is no log where result is false. The overlap increases after it bounces off. The physic behavior is unchanged. Here is the log at it’s lowest overlap value:

{
  overlap: -0.0000010000000187915248, 
  result: true, 
  x: -1.8234947653331712e-14, 
  y: 4.539613349605637e-15
}

I tried not passing in anything for overlapOnly (so it would be false, per the defaults) but that just attached the ball to the peg.

    console.log(
      this.physics.world.separateCircle(
        this.ball.sprite.body,
        this.pegs.group.getChildren()[0].body as Phaser.Physics.Arcade.Body
      )
    );
4

Sorry, I meant put a breakpoint in separateCircle(), run the game, and then step through the function in the debugger. :slight_smile: