Sprite Sheets — one picture, many frames

1. The sheet — all the poses in one picture

Here's a walking-ant sprite sheet. Four frames, side by side. The game code remembers: frame 0 = x 0 frame 1 = x 64 frame 2 = x 128 frame 3 = x 192

Each orange box is one frame. Same ant — different leg positions.

2. Play the frames in order → it walks!

The computer draws frame 0, then 1, then 2, then 3, then back to 0. About 10 times per second. Your eyes stitch it together and the ant looks alive.

3. Pick a frame yourself

Slide the slider. This is the whole trick. A sprite sheet is a picture + a number. The number says "show this frame right now."

How the code does it

Every tick of the game, one line cuts out a square from the sheet and stamps it on screen:

ctx.drawImage(
  spriteSheet,
  frame * 64, 0,   // which square on the sheet
  64, 64,          // square size
  antX, antY,      // where to draw on screen
  64, 64           // how big on screen
);

That's all a sprite sheet is. One picture. A little math. Movement.

Why use them?

• One picture = one download. Faster than loading 4 separate files.
• Drawing a frame is cheap. Just "copy this little square." The computer is great at that.
• Easy to add more animations later. Walking, jumping, sleeping — put them all on the same sheet.