How can I make an infinite side scrolling background in Phaserjs?

Question

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.

Answer 1

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;
}