what i am trying to do basically is making this animation http://jsfiddle.net/TLYZS/6/ in my box2d project but i am having some trouble in the drawing logic of each frame this is the result so far : http://jsfiddle.net/H8e9m/6/ how can i fix the body draw function to make the animation work ? as you can see i can only draw the first frame of the animation sprite and i can't find a way to make the exact same animation showing in the first jsfiddle where u can see the character is in his idle mode.any help appreciated
this is the drawing function and probably the issue is in here
if (this.details.frame != null) {
console.log("NotNull");
context.drawImage(this.details.image, this.details.frame.x, this.details.frame.y, this.details.frame.width, this.details.frame.height,
-this.details.width / 2, -this.details.height / 2,
this.details.width, this.details.height);
this is the animation variable and the update function
var KenIdle = new Animation(10, [
{ x: 50 * 0, y: 0 * 100, width: 50, height: 100 },
{ x: 50 * 1, y: 0 * 100, width: 50, height: 100 },
{ x: 50 * 2, y: 0 * 100, width: 50, height: 100 },
{ x: 50 * 3, y: 0 * 100, width: 50, height: 100 },
]);
function update(dt) {
KenBody.details.frame = KenIdle.draw(dt);
}
please check my jsfiddle to see the progress so far and tell me please how can i fix this problem
i found my problem finally :
var KenIdle = new Animation(10000, [
{ x: 50 * 0, y: 0 * 100, width: 50, height: 100 },
{ x: 50 * 1, y: 0 * 100, width: 50, height: 100 },
{ x: 50 * 2, y: 0 * 100, width: 50, height: 100 },
{ x: 50 * 3, y: 0 * 100, width: 50, height: 100 },
]);
the amount of time elapsed or dt was so small i couldn't see the animation moving so i made it big and it's working now http://jsfiddle.net/H8e9m/7/