Here's news: Javascript lets us draw portions of an image.

We're going to use this to store all our costumes in a single image file, and we'll change MySprite so it knows how to render individual costumes.

We could arrange this pretty much any way we like, but I've chosen to make the costumes run across the image. We'll number the costumes from zero (so it works the same as Javascript arrays), and we'll tell MySprite how wide each costume is so it knows how to slice the image.

 

---

 

Here's our "boy walking" PNG image file. It's a single file that holds five costumes, which we'll choose to number 0 - 4.