World.wrap() Issues

[michael-Bell]

I'm trying to make a simple running animation in phaser to put in as a dynamic animation in a store for a larger game I'm making. I want to have the player running along an infinite line of tiles, and I have made a mockup to test out how it will work.

 

The mockup creates a line of floor tiles on the bottom of the canvas, and gives them a negative velocity, and when exiting the screen, wraps them to the other side. It seems to be working well, but if it is left running, or your computer hangs, even momentarily, the sprites break up and are no longer touching.

 

You can see the mockup here, see the attached screenshot for what happens.

 

 

How can I keep the floor even and not broken up?

 

[charlie_says]

ok I've done something like this: 

tiles = [tile1,tile2,tile3,...,tileN];var firstTile = tiles[0];firstTile.x -= velocity;for (var i = 1; i < tiles.length; i++){   var tile = tile[i];   var precedingTile = tile[i-1];   tile.x = precedingTile.x + precedingTile.width; }if (firstTile.x < firstTile.width) //checks whether tile has gone offscreen.{   tiles.push(tiles.shift()); // takes the'lead' tile which has gone offscreen and puts so it's now the last tile...}

[rich]

Is the floor actually going to change? If not you could just use a TileSprite and scroll the texture.

[michael-Bell]

I ended up putting in a tilesprite and having it autoscroll, and in the update I auto reset the player.x to the middle of the screen. It might not be the best solution, but it works. Final code is here