EaselJS SpriteSheet 没有响应 gotoAndPlay

Question

我正在使用 EaselJS 开发基于 Fez 的 HTML5 Canvas 游戏，但我发现了一个我自己无法解决的问题，同时尝试将 SpriteSheets 实现到英雄。

问题是我为我的英雄定义了三个动画（"stand"、"jump" 和 "run"），当我尝试使用 hero.gotoAndPlay("run") 或 hero.gotoAndStop("stand") 从一个动画更改为另一个动画时不要更改，更改但仅显示第一帧或更改为错误的动画。

有人可以帮助我吗？我做错了什么，我该如何解决？谢谢。

这是我用来创建英雄 Sprite 的相关 JavaScript 代码：

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

以及我用来更改动画的代码：

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

JSFiddle

Official Site

Answer 1

如果您在滴答声（或类似）中调用gotoAndStop 或gotoAndPlay，那么它将不断重置到第一帧。您必须确保仅在动画更改时调用这些函数一次。

设置它的一个好方法是存储当前动画，存储它，并且只有在动画改变时才改变它。比如：

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

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