javascript - 精灵动画没有正确动画

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

但那些只是换了他，但不播放动画帧的剩余部分。

在此处使用代码演示

谢谢

Answer 1

看起来您只是在响应按键时才更新阶段，这只会更新一次阶段。

尝试将 stage.update() 放入tick主 JS 文件中的空函数中。这样可以确保不断重绘舞台，从而在更改帧时重绘动画精灵。

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

干杯!

Answer 2

除了@Lanny 已经说过的内容：每当您按下左/右键时，您都会执行bmpAnimation.gotoAndPlay("walk_XXX");每个循环，这会导致每个循环始终进入该动画的第一帧。相反，您应该只启动一次动画，当您第一次按下左/右键时，当您释放该键时停止动画。