# Tiling blitter background

**URL:** <https://phaser.discourse.group/t/tiling-blitter-background/11744>\
**Category:** Examples\
**Created:** [May 22, 2022, 6:17pm UTC](https://phaser.discourse.group/t/tiling-blitter-background/11744 "2022-05-22T18:17:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 22, 2022, 6:17pm UTC](https://phaser.discourse.group/t/tiling-blitter-background/11744/1 "2022-05-22T18:17:01Z")

</div>

[https://codepen.io/samme/pen/poarrgX?editors=0010](https://codepen.io/samme/pen/poarrgX?editors=0010)

This could be a more performant alternative to a [Tile Sprite](https://labs.phaser.io/view.html?src=src%5Cgame%20objects%5Ctile%20sprite%5Cexample.js) 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).

 ![blitter zoomed out](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/09c6ec4d112c23865192cce8becb7a59a702d539.png)

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

```javascript
// 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);

```

```javascript
// 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

> [@\[Phaser 3\] Class ScrollingLayer](https://phaser.discourse.group/t/phaser-3-class-scrollinglayer/4894):
>
> Hi all, I recently made this simple class to create a horizontal parallax effect using blitter objects. Repository: [https://github.com/jjcapellan/Phaser3-scrollinglayer/](https://github.com/jjcapellan/Phaser3-scrollinglayer/) Demo: [https://jjcapellan.github.io/Phaser3-scrollinglayer/](https://jjcapellan.github.io/Phaser3-scrollinglayer/) How works: This class creates a blitter that generates two bob objects with the same texture. These objects are located next to each other. When the object on the left is off screen, it is repositioned to the right of the other object. Performance: Testing in Huaw…