Pixi.js Tutorial #3: Make a Running Animation

Static sprites are cool. But animated ones? Even cooler.
In this part, you'll learn how to create animated sprites using multiple frames — just like in real games.

🎞️ What’s an Animated Sprite?

In Pixi.js, an AnimatedSprite is a sprite that cycles through frames — like a flipbook.
You provide an array of textures (images), and it plays them one by one.

Let’s do this step by step 👇

---

📂 Step 1. Prepare a Sprite Sheet

You’ll need an image that has several frames in one row. For example:

sprite-run.png:
+-------------------------------+
| [Frame 0] [1] [2] [3]        |
+-------------------------------+

This is used in real games like Red Light, Green Light and Tung Tung Run!

---

✂️ Step 2. Slice Frames with PIXI.Rectangle

Use PIXI.Rectangle to define each frame’s location on the sprite sheet:

const texture = await PIXI.Assets.load('sprite-run.png');
const frames = [];

for (let i = 0; i < 4; i++) {
  const frame = new PIXI.Texture({
    source: texture.source,
    frame: new PIXI.Rectangle(i * 160, 0, 160, 120)
  });
  frames.push(frame);
}

This example slices a sheet into 4 frames, each 160×120 pixels.

---

🎬 Step 3. Create the AnimatedSprite

Now turn those frames into a running character!

const player = new PIXI.AnimatedSprite(frames);
player.anchor.set(0.5, 1);
player.x = app.screen.width / 2;
player.y = 450;
player.animationSpeed = 0.1;
player.play();

app.stage.addChild(player);

Boom. You’ve got a jiggly sprite that runs in place.

---

⏱️ Adjusting Frame Speed

Want your character to run faster? Just tweak animationSpeed.

player.animationSpeed = 0.2; // twice as fast!

A value of 0.1 = slow jog
0.3 = sprint
0.01 = awkward slideshow 😅

---

✨ Bonus: Frame Control

You can also manually change frames like this:

player.gotoAndStop(0); // show only frame 0
player.gotoAndPlay();  // resume animation

This is handy for game state changes like pausing, dying, sliding, etc.
(Which you'll definitely do later 💀)

---

✅ What You’ve Learned So Far

• How to use PIXI.Rectangle to slice spritesheets
• How to create and play an AnimatedSprite
• How to adjust frame speed and control animations manually