PixiJS Tiling Sprites — Scrolling Backgrounds and Textures
In this tutorial, you will learn about PixiJS Tiling Sprites. We cover key concepts, practical examples, and best practices to help you master this topic.
PixiJS TilingSprite creates repeating textures that can scroll infinitely, ideal for parallax backgrounds and seamless patterns.
What You'll Learn
By the end of this guide, you will create tiling sprites for backgrounds, animate tile position for scrolling, implement parallax with multiple layers, create seamless tile sets, and optimize tile rendering performance.
Basic TilingSprite
var texture = PIXI.Texture.from('bg.png');
var tilingSprite = new PIXI.TilingSprite(texture, 800, 600);
tilingSprite.position.set(0, 0);
app.stage.addChild(tilingSprite);
Animated Scroll
app.ticker.add(function(delta) {
tilingSprite.tilePosition.x += 1 * delta;
tilingSprite.tilePosition.y += 0.5 * delta;
});
Parallax Layers
var layers = [];
var speeds = [0.2, 0.5, 1.0];
speeds.forEach(function(speed) {
var ts = new PIXI.TilingSprite(texture, 800, 600);
ts.speed = speed;
app.stage.addChild(ts);
layers.push(ts);
});
app.ticker.add(function(delta) {
layers.forEach(function(layer) {
layer.tilePosition.x += layer.speed * delta;
});
});
Common Mistakes
1. Wrong Dimensions
TilingSprite width and height must match the visible area. Oversized tiles waste performance.
2. Texture Not Tileable
Non-tileable textures show seams. Use textures designed for tiling or fix edges in image editor.
3. Tile Position Reset
tilePosition is the scroll offset. Reset to 0 for Infinite Scroll: tilePosition.x = tilePosition.x % texture.width.
4. Performance With Large Tile Areas
Large TilingSprites on low-end GPUs may drop frames. Reduce canvas size or use lower resolution textures.
5. Not Adding to Stage
TilingSprite must be added to the stage like any other display object.
Practice Questions
Q1: What is a TilingSprite? A: A sprite that repeats its texture horizontally and vertically to fill a rectangular area.
Q2: How do you scroll a tiling sprite? A: Modify tilePosition.x and tilePosition.y in the ticker.
Q3: How do you create parallax effect? A: Multiple TilingSprites with different scroll speeds create depth.
Q4: How do you make a texture seamless? A: The texture edges must match when tiled. Use image editing software or seamless pattern generators.
Q5: How do you change the tile texture? A: Set tilingSprite.texture = newTexture.
Challenge: Build a side-scrolling game background with 3 parallax layers: far mountains (slow), mid hills (medium), and foreground ground (fast). Add a character that stays centered.
FAQ
Try It Yourself
Create a scrolling background.
<!DOCTYPE html>
<html>
<head>
<title>PixiJS TilingSprite</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Scrolling Background</h2>
<script>
var app = new PIXI.Application({ width: 600, height: 300, background: 0x1a1a2e });
document.body.appendChild(app.view);
// Create a simple tileable texture
var g = new PIXI.Graphics();
g.beginFill(0x4ecdc4);
g.drawRect(0, 0, 64, 64);
g.endFill();
g.beginFill(0x2a9d8f);
g.drawCircle(32, 32, 16);
g.endFill();
var tileTex = app.renderer.generateTexture(g);
// Mountains layer (far)
var mountains = new PIXI.TilingSprite(tileTex, 600, 300);
mountains.tint = 0x2a9d8f;
mountains.alpha = 0.4;
// Ground layer (near)
var ground = new PIXI.TilingSprite(tileTex, 600, 300);
ground.tint = 0x4ecdc4;
ground.alpha = 0.8;
app.stage.addChild(mountains);
app.stage.addChild(ground);
app.ticker.add(function(delta) {
mountains.tilePosition.x += 0.3 * delta;
ground.tilePosition.x += 1.5 * delta;
});
</script>
</body>
</html>
What's Next
Create animated sprites.
Animated Sprites — Frame-based animation. Filters — Visual filters.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro