Create Infinite Scrolling Backgrounds in PixiJS (TilingSprite Tutorial)

Introduction

One of the most common mechanics in 2D games—especially endless runners and space shooters—is the infinite scrolling background.

If you are using PixiJS, you might be tempted to create two sprites and move them manually to create the illusion of movement. However, PixiJS provides a specific, performance-optimized tool for this exact purpose: the TilingSprite.

In this tutorial, we will learn how to set up a TilingSprite and animate it to create a seamless loop.

📺 Watch the Video Tutorial

I cover the entire process step-by-step in my latest YouTube video. You can watch it here or read the summary below!

---

What is a TilingSprite?

A TilingSprite is a fast way to render a texture that repeats itself.

Instead of stretching an image, it tiles the image to fill the defined area. The magic happens when we modify the UV coordinates (offset) of the texture, allowing us to scroll the pattern within the sprite without moving the sprite itself.

The Code

Here is the quick recipe to get this working in your project.

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});

document.body.appendChild(app.view);

// Load your seamless background image
const texture = PIXI.Texture.from('assets/background.png');

// Create the TilingSprite
const background = new PIXI.TilingSprite(
    texture,
    app.screen.width,
    app.screen.height
);

// Add it to the stage
app.stage.addChild(background);

app.ticker.add((delta) => {
    // Move the texture coordinates to the left
    background.tilePosition.x -= 2;

    // Optional: Move diagonally by changing Y as well
    // background.tilePosition.y += 1;
});

Comments

[Prabhjot Singh]

🤝 Support & Connect
If you found this guide helpful, please help me grow the channel!
Subscribe to my YouTube Channel for more daily PixiJS tutorials.
youtube.com/@PrabhGameDev
Happy Coding! 🚀