arcade physics Arcade physics body reset positioning delayed

[drunkenoodle]

Hey everyone,

I stepped upon an interesting thing or self induced bug that seems to be happening whilst using Arcade Physics for an infinite runner. It's pretty rough around the edges, more of a proof of concept than anything else, but basically in the update function I'm doing a couple of things.

First of all, the ground is a group of child sprites, each ones velocity gets nudged left per update cycle:

this.ground.children.forEach(function(c) {

   c.body.velocity.x = -this.RUN_SPEED;

}, this);

Then, I check to see if any of those children have gone off screen to the left (child.body.right < 0) for example. Once that's done, I then reset that child back to the right hand side of the screen like so:

child.reset(this.game.width, child.y);    

In between all that I just do a couple of checks to make sure none of them overlap, by using this (it also makes sure we don't try to place anything else whilst this particular piece is still leaving the right-hand area:

this.ground.children.find(function(child){
   return child.x < this.game.width && child.x + child.width > this.game.width || child.x >= this.game.width;
}, this);

Now the main problem I'm having is that there seems to be a gap between each one of the sprites when they've been resetted and are following the one that came before hand. What I find interesting is that if I set the velocity to 256, the gap between each sprite seems to be exactly 12 pixels in width. If I drop it to 128, then it drops to 6 pixels in width. 

I'm curious as to how the numbers might correlate, or, is there something that happens in the physics step that's making the gap outside of the main update loop? It's a bit of a weird problem, and as said earlier, it's probably just down to poor implementation.

I've attached the script file if you'd fancy a perusal also.

Thanks for your time everyone, take care!

IFPlay.js

[squilibob]

The reason for the gap is because you are not resetting as soon as the child is leaving the screen. If you're moving 256 pixels at a time and your game width is 1920 pixels wide then that's 7.5 frames and your child is already 50% off the screen by the time the reset is called, leaving a large gap. What you should do is move 1 pixel at a time and check if the child is off the screen and set it in a loop so it gets called RUN_SPEED times each frame. Here is how I would code that:

        this.ground.children.forEach(function(c) {

            nudgeleft: for (var nudge = 0; nudge < this.RUN_SPEED; nudge++)
            c.body.right < 0 ? c.reset(this.game.width, c.y) : c.body.velocity.x--; 

        }, this);