PixiJS Sprites — Creating and Managing 2D Images
In this tutorial, you will learn about PixiJS Sprites. We cover key concepts, practical examples, and best practices to help you master this topic.
PixiJS sprites display 2D images on the canvas with full control over position, scale, rotation, tint, and alpha.
What You'll Learn
By the end of this guide, you will create sprites from textures, set position and scale, use anchors for pivot points, load sprite sheets for animation frames, batch many sprites for performance, and tint sprites.
Basic Sprite
var app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);
var texture = PIXI.Texture.from('image.png');
var sprite = new PIXI.Sprite(texture);
sprite.x = 100;
sprite.y = 50;
sprite.scale.set(2);
app.stage.addChild(sprite);
Anchor
sprite.anchor.set(0.5, 0.5);
// Now x, y refers to the center of the sprite
Tint and Alpha
sprite.tint = 0xff6b35;
sprite.alpha = 0.8;
Sprite Sheets
app.loader.add('spritesheet', 'sprites.json').load(function() {
var frames = ['walk1.png', 'walk2.png', 'walk3.png'];
var textures = frames.map(function(f) {
return PIXI.Texture.from(f);
});
var sprite = new PIXI.AnimatedSprite(textures);
sprite.animationSpeed = 0.1;
sprite.play();
app.stage.addChild(sprite);
});
Common Mistakes
1. Adding Sprite Before Texture Loaded
Use the loader's load callback. Adding a sprite with an unloaded texture renders it as blank.
2. Anchor Not Set
Default anchor is (0,0) top-left. Set anchor for centered positioning.
3. Sprite Not Visible
Check sprite.visible (default true) and sprite.alpha (default 1). Also check it is added to stage.
4. Texture from Missing File
PIXI.Texture.from with a missing file creates a blank texture. Check the console for 404 errors.
5. Scale Resets Every Set
sprite.scale.set(2, 2) creates a new object. Use sprite.scale.x = 2 for incremental scaling.
Practice Questions
Q1: How do you create a sprite from an image? A: new PIXI.Sprite(PIXI.Texture.from('image.png')).
Q2: What does anchor do? A: Sets the origin point for position and rotation as a fraction from 0-1.
Q3: How do you tint a sprite? A: Set sprite.tint = 0xRRGGBB.
Q4: How do you flip a sprite? A: Set sprite.scale.x = -1 to flip horizontally.
Q5: How do you remove a sprite? A: Call app.stage.removeChild(sprite) or sprite.destroy().
Challenge: Build a sprite gallery with 20 randomly positioned sprites. When clicked, the sprite should scale up, tint red, and display its index.
FAQ
Try It Yourself
Create and manipulate sprites.
<!DOCTYPE html>
<html>
<head>
<title>PixiJS Sprites</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>Sprite Demo</h2>
<script>
var app = new PIXI.Application({ width: 600, height: 400, background: 0xf5f5f5 });
document.body.appendChild(app.view);
// Create a simple circle texture programmatically
var graphics = new PIXI.Graphics();
graphics.beginFill(0x4ecdc4);
graphics.drawCircle(0, 0, 30);
graphics.endFill();
var texture = app.renderer.generateTexture(graphics);
for (var i = 0; i < 10; i++) {
var sprite = new PIXI.Sprite(texture);
sprite.x = Math.random() * 550 + 25;
sprite.y = Math.random() * 350 + 25;
sprite.anchor.set(0.5);
sprite.scale.set(0.5 + Math.random() * 0.8);
sprite.tint = Math.random() * 0xffffff;
sprite.alpha = 0.5 + Math.random() * 0.5;
app.stage.addChild(sprite);
}
</script>
</body>
</html>
What's Next
Use tiling sprites for backgrounds.
Tiling Sprites — Tiling sprite backgrounds. Animated Sprites — Animated sprites.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro