Tile Sprites - samme/phaser3-faq GitHub Wiki

Tile Sprites are image game objects with a repeating texture. The texture frame is "tiled" to fill the Tile Sprite's area.

The texture frame can be positioned and scaled independently of the sprite using tilePositionX, tilePositionY, tileScaleX, tileScaleY, etc.

You can resize the Tile Sprite itself with setSize().

As with other game objects you can also use setScale() or setDisplaySize(), etc. The same rule applies:

display size == size * scale

Each Tile Sprite creates its own texture, so don't use too many or make them very large.

Scrolling backgrounds

For these you usually

• Create a Tile Sprite not larger than the camera viewport
• Give it scroll factor (0, 0)
• Set the tile position continuously to match the camera scroll

This gives the illusion of movement against the camera.

let bg;

function create () {
  const { width, height } = this.cameras.main;

  bg = this.add.tileSprite(0, 0, width, height, 'bg').setOrigin(0, 0).setScrollFactor(0, 0);
}

function update () {
  const { scrollX, scrollY } = this.cameras.main;

  bg.setTilePosition(scrollX, scrollY);
}

• Example: Scrolling TileSprite background

Animations

Despite the name, Tile Sprites don't have an animation component.

For very simple animations you can just call setFrame() on a timer.

For more complex animations you could create a Sprite off the display list, animate that, and then copy its frame onto the Tile Sprite.

Alternatives

If you just need to repeat a texture frame, a Blitter can be much more efficient. You'll have to arrange the Bobs yourself. But unlike a Tile Sprite, a Blitter has no intrinsic dimensions.

A Blitter works like a simple container, so you can reposition it to "scroll" the Bobs. You'll have to wrap the Blitter coordinates to keep it within the camera view.

• Example: Tiling blitter background