Instead of having a fixed background, it would be cool to have a scrolling background that moved downwards (forever) to make it look like you are flying through space. Phaser provides an infinite “tiled” background for doing just this.

Task Definition

  1. Find a tileable background image and add it to your project.
  2. Replace your existing background with the new one using game.add.tileSprite(x, y, width, height, image-name);.
  3. Make the background image scroll / move by using object.tilePosition.y += 2;.

Hints

A tiling sprite is one that is essentially infinitely big as it will simply repeat over and over again in all directions. If you do this with a regular sprite, you will get ugly seams where the edge of the first copy of the texture matches up with the second copy of the texture. However, if you find a ‘tileable’ texture, then it will just look like you have a massive background that goes on forever.

Create a tileable background using game.add.tileSprite(x, y, width, height, image-name) where x and y are the x,y co-ordinates of the ‘first’ image, width and height describe how often the image should repeat itself and image-name is the image name, similar to when loading a sprite.

You can then ‘slide’ the background in a direction using object.tilePosition.y += 2;.

You can see a full example of a “Tiling Sprite” on the Phaser Tiling Sprite Example.

Download the starfield image used in the example below;