Character with animations in atlas image

[RagnarZero]

This needs to be created for the purpose of testing how to animate things in a canvas.

[ndsh]

possible solutions: http://codeutopia.net/blog/2009/08/21/using-canvas-to-do-bitmap-sprite-animation-in-javascript/ http://blogs.msdn.com/b/davrous/archive/2012/03/16/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspx http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/

and http://www.dummies.com/how-to/content/how-to-create-animation-with-the-html5-canvas-tag.html

[RagnarZero]

Just wrote a small streetfighter 2 clone with animation at work, used the atlas images in this style: www.radiodns.info/sf2/ken.png

and then defined animations in JS:

var punchAnimation = {state: 2,counter: 0,  frameCount:2, startFrame: 0, stopAfter: true, autorun: true, finished: false};
var kickAnimation = {state: 6,counter: 0,  frameCount:4, startFrame: 0, stopAfter: true, autorun: true, finished: false};
var reverseKickAnimation = {state: 7,counter: 0,  frameCount:4, startFrame: 0, stopAfter: true, autorun: true, finished: false};
var hadoukenAnimation = {state: 0, counter: 0, frameCount:3, startFrame: 0, stopAfter: true, autorun: true, finished: false};

then used drawimage function to cycle through them:

function drawAtlas(atlas, animation, xPos, yPos){
    ctx.drawImage(atlas.image, animation.startFrame + animation.counter*70, animation.state * atlas.frameHeight, 70, atlas.frameHeight, xPos, yPos-(atlas.frameHeight*2), 140, atlas.frameHeight*2);

    if(animation.counter == animation.frameCount && !animation.stopAfter){
        animation.counter = 0;
    }
    else if(animation.counter < animation.frameCount){
        animation.counter++;
    }
    else{
        animation.finished = true;
    }
}

[ndsh]

sweet! i'll try to create the atlas this evening then :+1:

[RagnarZero]

Preferably animation frames of an object should have the same width/height (easier to handle in js ;) )

[ndsh]

sure, i know how to do (at least draw) sprite animations :)

[ndsh]