How to Use AnimatedSprite in Pixi.js

This article explains what an AnimatedSprite is in the Pixi.js 2D rendering engine and provides a step-by-step guide on how to implement one in your project. You will learn the core concepts behind frame-by-frame animations in PixiJS, followed by a straightforward code implementation showing how to load textures, configure animation settings, and control playback.

What is an AnimatedSprite?

In Pixi.js, an AnimatedSprite is a specialized sprite used to display frame-by-frame animations. Instead of rendering a single static image, it accepts an array of textures (frames) and cycles through them sequentially. This class is ideal for creating moving characters, environmental effects, UI animations, and explosive particles in 2D HTML5 games and interactive applications.

Standard Way to Implement an AnimatedSprite

Implementing an AnimatedSprite involves three main phases: loading the frame textures, initializing the sprite with those textures, and configuring the playback properties.

Step 1: Prepare and Load the Textures

Before creating the animation, you need to load your images into PixiJS as textures. The most efficient way is to use a spritesheet (atlas), but you can also load individual image files.

import { Application, Assets, AnimatedSprite } from 'pixi.js';

// Initialize the PixiJS Application
const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

// Load the spritesheet asset
const sheet = await Assets.load('path/to/spritesheet.json');

Step 2: Create the AnimatedSprite Instance

Once the spritesheet is loaded, extract the individual textures and pass them as an array to the AnimatedSprite constructor.

// Extract textures from the spritesheet (e.g., "run_01.png", "run_02.png", etc.)
const frames = [
    sheet.textures['run_01.png'],
    sheet.textures['run_02.png'],
    sheet.textures['run_03.png'],
    sheet.textures['run_04.png']
];

// Create the AnimatedSprite
const character = new AnimatedSprite(frames);

Step 3: Configure and Play the Animation

After creating the sprite, you can adjust its speed, set it to loop, position it on the screen, and start the animation.

// Set animation speed (higher values make it faster, 1 is 60fps)
character.animationSpeed = 0.15;

// Enable or disable looping
character.loop = true;

// Set position and anchor point
character.anchor.set(0.5);
character.x = app.screen.width / 2;
character.y = app.screen.height / 2;

// Add the sprite to the stage
app.stage.addChild(character);

// Start playback
character.play();

Key Properties and Methods

To effectively control your animations, you will commonly use the following built-in tools: