How do we use this with a repeating TilingSprite?

[iyobo]

I want to create a repeating/infinite grid background that responds to panning and zooming using Pixi's TilingSprite.

const viewport = new Viewport({
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            worldWidth: 1000,
            worldHeight: 1000,

            // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
            interaction: this.app.renderer.plugins.interaction
        });

...

viewport
            .drag()
            .pinch()
            .wheel()
            .decelerate();

...

const gridTillingSprite = new TilingSprite(gridTexture, 5000, 5000)
viewport.addChild(gridTillingSprite)

I created a TilingSprite with a grid texture which I added to the viewport and that works, but zooming out or panning revealed the edge of the grid background because of it's statically defined width and height.

I would like to never see the end of the grid while I am panning or zooming in the viewport. I basically want to achieve something similar to the Unreal Engine node editor.

Conceptually, this is what I want:

// onViewPortChange event
gridTillingSprite.width = viewport.visualWidth; //whatever the viewing area width of the viewport would be
gridTillingSprite.height = viewport.visualHeight;
gridTillingSprite.tilePosition.x = viewport.visualX;
gridTillingSprite.tilePosition.y = viewport.visualY;

How can this be achieved?

[davidfig]

You need to move the gridTillingSprite with the viewport so it's always visible. You can attach to the moved event and then do the math so the sprite is in the top-left corner. You'll need to adjust it slightly to take into account it's relative x, y offset so the tile smoothly scrolls (otherwise it'll look like it's not moving).

Let me know if you need help and I can figure out the math again. I wrote something similar a long time ago.

[julianfox]

I has the same problem and I managed to do it (zoom and pan) with this code:

viewport.on('moved', () => {
        background.tilePosition.y = -viewport.top
        background.tilePosition.x = -viewport.left
        background.y = viewport.top
        background.x = viewport.left

        background.width = innerWidth / viewport.scale.x
        background.height = innerHeight / viewport.scale.y
})

I don't know if it's the best solution but it work in my case :-)

[XQ0118]

You need to move the gridTillingSprite with the viewport so it's always visible. You can attach to the moved event and then do the math so the sprite is in the top-left corner. You'll need to adjust it slightly to take into account it's relative x, y offset so the tile smoothly scrolls (otherwise it'll look like it's not moving).

Let me know if you need help and I can figure out the math again. I wrote something similar a long time ago.

can you give me some suggest?