EaselJS SpriteSheet没有响应gotoAndPlay

时间:2014-04-29 04:30:27

标签: javascript html5 canvas easeljs sprite-sheet

我正在使用Fez开发基于EaselJS的HTML5 Canvas游戏,我发现了一个问题,我试图实现 SpriteSheets时无法自行解决对英雄。

问题是我已经为我的英雄("stand""jump""run")定义了三个动画,当我尝试使用{{1}从一个动画更改为另一个动画时}}或hero.gotoAndPlay("run")动画不会更改,更改但只显示第一帧 更改为错误的动画。

有人能帮助我吗?我做错了什么,我该如何解决?感谢。

以下是我用来创建英雄精灵的相关JavaScript代码:

hero.gotoAndStop("stand")

我用来改变动画的代码:

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);

JSFiddle

Official Site

1 个答案:

答案 0 :(得分:3)

如果您在勾选(或类似)中呼叫gotoAndStopgotoAndPlay,则会不断重置为第一帧。您必须确保仅在动画更改时调用这些函数。

设置它的一个好方法是存储当前动画,存储它,并且只有在动画改变时才更改它。类似的东西:

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

这只是一个例子,但应该给你一个想法。您应该只调用这些方法一次以启动动画。