Let's transform our red square into an animated character using sprite sheets.

What Is A Sprite Sheet?

A sprite sheet is a single image containing multiple frames of animation laid out in a grid. Each frame shows the character in a slightly different pose.

Loading Sprite Sheets

Download the warrior assets from the course resources. Each animation state (idle, run, jump, fall) has its own sprite sheet:

• Idle — Character standing still, breathing animation

• Run — Running cycle

• Jump — Ascending pose

• Fall — Descending pose

Animating Frames

Use c.drawImage() with crop parameters to display one frame at a time:

c.drawImage(   this.image,   this.currentFrame * this.width,  // Crop X   0,                                // Crop Y   this.width,                       // Crop width   this.height,                      // Crop height   this.position.x,   this.position.y,   this.width,   this.height )

Increment currentFrame over time to cycle through the animation.

Control animation speed with a frame delay counter — don't advance every single frame or it'll play too fast.