Sprite Animation Code

Object structure for making animations from a sprite.

by Santiago J

HTML

<canvas id="stage" width="640" height="480"></canvas>

JavaScript

function AnimationImg(src) {
    var img = new Image();
    img.src = src;
    return img;
}

var aimg = new AnimationImg("http://upload.wikimedia.org/wikipedia/commons/0/03/Sprite-example.gif");
var bimg = new AnimationImg("http://otanistudio.com/swt/sprite_explosions/_i/exp2.png");

var animations = (function(){
    var a = {train: {img: aimg}, car: {img: aimg}, explosion: {img: bimg}};
    /*
    a.train.xi = [9,9,9,9,9,9,9,9];
    a.train.yi = [0,1,2,3,4,5,6,7];
    a.train.length = a.train.xi.length;
    a.car.xi = [0,0];
    a.car.yi = [0,1];
    a.car.length = a.car.xi.length;
    a.train.w = a.train.h = a.car.w = a.car.h = 32;
    a.explosion.xi = [0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3];
    a.explosion.yi = [0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3];
    a.explosion.length = a.explosion.xi.length;
    //*/
    //*
    a.explosion.cols = 4;
    a.explosion.i = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    a.explosion.length = a.explosion.i.length;
    //*/
    a.explosion.w = a.explosion.h = 64;
    return a;
}());

window.onload = function() {
    var ctx = document.getElementById("stage").getContext("2d");

    var obj = {
        x: 10,
        y: 10,
        w: 64,
        h: 64,
        animation: animations.explosion,
        currentAnimationFrame: 0
    };

    window.setInterval(function() {
        ctx.canvas.width = ctx.canvas.width;

        var a = obj.animation;
        var i = a.i[obj.currentAnimationFrame];

        ctx.drawImage(a.img, // Image
                      //a.xi[obj.currentAnimationFrame] * a.w, a.yi[obj.currentAnimationFrame] * a.h, // sx, sy
                      i % a.cols * a.w, (i / a.cols | 0) * a.h, // sx, sy
                      a.w, a.h, // sw, sh
                      obj.x, obj.y, // dx, dy
                      obj.w, obj.h // dw, dh
                     );

        obj.currentAnimationFrame = (obj.currentAnimationFrame + 1) % obj.animation.length;
    }, 1000 / 60);

    console.log(obj);
};