精灵动画没有正确动画

Question

我正在尝试使用精灵进行动画制作和翻转，具体取决于我按哪个键（向左移动，向右移动）。

现在精灵出现在屏幕上，但精灵没有正确动画...... 在精灵表之后，0-9帧应该是他向左走，10-19应该是他向右走。

我尝试用以下方法实现：

spriteSheet = new createjs.SpriteSheet({
    images: [imgMonsterARun],
    frames: {width: 64, height: 64, regX: 32, regY: 32},
    animations: { walk_left: [0, 9], walk_right: [10, 19]
    }
});

另外，他应该根据我击中的哪个键，向左或向右翻转。我以为我是用

做的

if (key == left) {
bmpAnimation.gotoAndPlay("walk_left");

和

if (key == right) {
bmpAnimation.gotoAndPlay("walk_right");

但是那些只是转过身来，但不要播放动画帧的剩余部分。

demo with code here

由于

Answer 1

看起来你只是在响应按键时更新舞台，这只会更新舞台一次。

尝试将stage.update（）抛出到主JS文件中的空tick函数中。这样可以确保不断重绘舞台，重新绘制动画精灵，因为它会改变帧。

每次内容更改时都需要重新绘制舞台，SpriteSheet / BitmapAnimation会随着时间的推移不断更改帧。

干杯！

Answer 2

除了@Lanny已经说过的话：每当你按下左/右键时，每个周期执行bmpAnimation.gotoAndPlay("walk_XXX");，这导致每个周期总是进入该动画的第一帧。 相反，当您第一次按左/右键并在释放该键时停止动画时，您应该只启动一次动画。