Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm developing a Fez-based HTML5 Canvas game using EaselJS and I've found a problem, that I can't solve myself, while trying to implement SpriteSheets to the hero.

The problem is that I've defined three animations to my hero ("stand", "jump" and "run") and when I try to change from one animation to another using hero.gotoAndPlay("run") or hero.gotoAndStop("stand") the animations don't change, change but show the first frame only or change to the wrong animation.

Can someone help me? What I'm doing wrong and how can I fix it? Thanks.

Here's the relevant JavaScript code I'm using to create the hero Sprite:

var data = {
     images: ["http://i.imgur.com/M0GmFnz.png"],
     frames: {width:34, height:46},
     animations: {
         stand:0,
         run:[0,12,true,0.25],
         jump:13
     }
 };
var spriteSheet = new createjs.SpriteSheet(data);
var hero = new createjs.Sprite(spriteSheet, "stand");
hero.offset = 4 + 1; // "+1" is important, change the first number only.
hero.regX = hero.offset + 2;
hero.regY = hero.offset;
hero.width = 34 - (hero.offset*2) - 12;
hero.height = 46 - (hero.offset*2);
hero.x = 0;
hero.y = 0;
hero.jumping = true;
stage.addChild(hero);

And the code I'm using to change the animation:

if(!left && !right){ // User isn't pressing left arrow or right arrow
    hero.gotoAndStop("stand");
}else{
    hero.gotoAndPlay("run");
}

JSFiddle

Official Site

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.