CODEWITHSUNDEEP
javascripthtmlcanvas
jagguy
jagguy

Reputation: 183

animate javascript frame

I want to animate a sprite of just 4 frames in html Canvas. I came across a method like the below. Coming from AS3 and c# background I really didnt like the below code as it is complicated. I will be here for hours trying to work this code out. Is there an easier way to animate a few frames or is JS just a bit 'old'.

http://codeutopia.net/blog/2009/08/21/using-canvas-to-do-bitmap-sprite-animation-in-javascript/

Upvotes: 1

Views: 82

Answers (2)

Steely Wing
Steely Wing

Reputation: 17597

Have a look at this library http://www.spritely.net/documentation/, it is easy to use, here is a example

http://jsfiddle.net/VxMwN/

$('#bird')
    .sprite({
    fps: 9,
    no_of_frames: 3
})
    .spRandom({
    top: 50,
    bottom: 200,
    left: 300,
    right: 320
});

Upvotes: 1

klaasman
klaasman

Reputation: 897

this might help you: http://creativejs.com/2012/01/day-11-sprite-sheets/

it's basically a loop called every x ms, clearing the canvas and draws the new image from the sequence

Upvotes: 2

Related Questions