animated.min.js (2.7kb) animated.js (5.3kb)

ZOMBIE.PNG GITHUB

index.html

<canvas id="demo" width="256" height="256"></canvas>

script.js

'use strict';

var canvas = document.getElementById('demo'),
    ctx = canvas.getContext('2d');

var zombie = new Animated();
zombie.addSprite('zombie_0', 'zombie.png');

zombie.addAnimation(zombie.createAnimation('walk.right', 'zombie_0', {
    x: 512,
    y: 512,
    frameWidth: 128,
    frameHeight: 128,
    frames: 8
}));

function render(ts) {
    requestAnimationFrame( render );
    ctx.clearRect(0, 0, 265, 256);

    // draw
    zombie.canvasDrawFrame(ctx, 'walk.right', Math.floor(ts/100), 64, 64);
    // end draw
}

render();