Notes on web development and more

Game Development

JavaScript Canvas Sprite Animation

Sprite sheets have been used in game development for many years. In web development it allows you to reduce:

  • a number of HTTP requests for downloading many separate images,
  • webserver load as a result of fewer requests,
  • download time as a combined sprite sheet is smaller than the individual files.

I want to share the approach that I used in my games written with canvas and javascript. I think this is a reusable approach for animating different objects on a canvas.

To demonstrate it, I compiled a Sonic sprite sheet from the "Sonic the Hedgehog 3" game.