Sprite animation with JavaScript

A simple lightweight piece of code to animate sprites.


A few years back, I was working on a proof of concept that required some basic sprite animation. I turned first to common sprite animation scripts found online, but none of them provided me the ease of flexibility to animate how I needed, so I wrote one myself.

The simple requirements I included were:

  1. Play at a specified speed
  2. Play for a specific number of frames
  3. Play for a specific amount of time
  4. Stop on any specific frame
  5. Stop on the current frame
  6. Play infinitely
The spritesheet

It starts with a simple spritesheet, the only requirement being that each sprite is the same size. It also helps if the sprites are spaced consistently. It's not required, but helps in punching in the coordinates. This is an example spritesheet using the game Braid's main character:

The Code
JAVASCRIPT

// Uses jQuery

// Function
function animateSprite(obj, coordinates, speed, duration, frames, endCoordinates) {
    var curPosition = 0;
    var curStep = 0;
    var incrementCheck = obj.animIncrement >= 0 ? obj.animIncrement + 1 : 0;
    
    obj.animIncrement = incrementCheck;
    var animateSpriteInterval = setInterval(function() {
        if (obj.animIncrement !== incrementCheck) {
            clearInterval(animateSpriteInterval);
            clearTimeout(animateSpriteDuration);
            obj.css({'background-position': endCoordinates[0] + ' ' + endCoordinates[1]});
        }
        obj.css({'background-position': coordinates[curPosition][0] + ' ' + coordinates[curPosition][1]});
        if (frames > 0) {
            if (curStep < frames) {
                curPosition = curPosition < coordinates.length - 1 ? curPosition + 1 : 0;
                curStep = curStep + 1;
            } else {
                clearInterval(animateSpriteInterval);
                obj.css({'background-position': endCoordinates[0] + ' ' + endCoordinates[1]});
            }
        } else {
            curPosition = curPosition < coordinates.length - 1 ? curPosition + 1 : 0;
        }
    }, speed);
    
    if (duration > 0) {
        var animateSpriteDuration = setTimeout (function() {
            clearInterval(animateSpriteInterval);
            obj.css({'background-position': endCoordinates[0] + ' ' + endCoordinates[1]});
        }, duration);
    }
}

// Variables
var sprite = $('#sprite');
var spriteCoordinates = [ [0,0],[-200,0],[-400,0],[-600,0],[-800,0],[-1000,0],[-1200,0],[-1400,0],[-1600,0],[-1800,0],[0,-200],[-200,-200],[-400,-200],[-600,-200],[-800,-200],[-1000,-200],[-1200,-200],[-1400,-200],[-1600,-200],[-1800,-200],[0,-400],[-200,-400],[-400,-400],[-600,-400],[-800,-400],[-1000,-400],[-1200,-400] ];
var endSpriteCoordinates = [0,0];

// Play 100 frames at speed 30
animateSprite(sprite, spriteCoordinates, 30, 0, 100, endSpriteCoordinates);

// Play for 2 seconds at speed 25
animateSprite(thisSprite, spriteCoordinates, 25, 2000, 0, endSpriteCoordinates);

// Play infinitely at speed 100
animateSprite(thisSprite, spriteCoordinates, 100, 0, 0);

// Stop animation
sprite.animIncrement = sprite.animIncrement + 1;

CSS

#sprite {
    width: 200px;
    height: 200px;
    background-image: url('sprite.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}
HTML

<div id="sprite"></div>

This has since served all of my sprite animation needs, including iPhoneception with the explosions, zombie scares and matrix glitch animations. Feel free to download and use it in your own scripts and experiments.



Also check out