Sprite

  • JavaScript Canvas Sprite Animation

    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.