24

I'm using phaser.js to make a game and I cannot find any tutorials on how to make the background scroll infinitely. I'd like the background to tile/repeat sideways, and infinitely as the character moves right.

I am currently using a camera and having the camera follow the character.

Here's my idea about how to do this: Check the position of the camera constantly in update(), and then move it to the beginning of gameplay (the very left) along with the character at that time. I think that this would probably not be a smooth transition though, so I'm wondering if there is a better way to do it.

Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
mage
  • 626
  • 2
  • 8
  • 18

1 Answers1

34

This can be done with a tile sprite and by moving "tilePosition":

var bgtile;

function preload () {
   game.load.image('bgtile', 'bgtile.jpg');
}

function create () {
   bgtile = game.add.tileSprite(0, 0, game.stage.bounds.width, game.cache.getImage('bgtile').height, 'bgtile');
}

function update () {
   bgtile.tilePosition.x -= 1;
}
andyrandy
  • 72,880
  • 8
  • 113
  • 130
  • As the update() function uses positioning, won't this be a bit vulnerable if the FPS is unstable? When one gives an object velocity the speed should be more steady. What would be a good way of doing this with a tiled background? – Roy Solberg Oct 08 '16 at 11:07