Tiling blitter background

This could be a more performant alternative to a Tile Sprite for a scrolling background. It works by giving the blitter scroll factor (0, 0) and then shifting it by the camera scroll coordinates, wrapped within the bob dimensions. So in this example the camera scrolls infinitely while the blitter is always between (0, 0) and (-512, -512).

See the source for details, but the key points are:

// The bobs must fill the camera viewport, plus 1 extra bob on the right and bottom.
const maxX = Phaser.Math.Snap.Ceil(this.cameras.main.width, blitter.width);
const maxY = Phaser.Math.Snap.Ceil(this.cameras.main.height, blitter.height);
// Shift the blitter opposite the camera view to show motion.
// Because the bobs repeat, it never has to shift more than 1 bob size.
blitter.x = -Phaser.Math.Wrap(scrollX, 0, blitter.width);
blitter.y = -Phaser.Math.Wrap(scrollY, 0, blitter.height);

Related

1 Like