在 SpriteStage 上使用 SpriteSheet 渲染的动画显示不正确

Question

我正在使用 sprite sheet 生成器从通用 MovieClip 生成 SpriteSheet 类型的对象。之后，我使用 SpriteSheet 创建一个 Sprite 类型的对象，其中包含一个时间轴，我将其添加到 SpriteStage 中，如下所示：

 var spriteStage = new createjs.SpriteStage(canvas);
 var sprite = new createjs.Sprite(spriteSheet);
 spriteStage.addChild(sprite);
 sprite.play();
 createjs.Ticker.addEventListener("tick", spriteStage);

问题是：由此产生的是一个损坏的动画。看起来只显示了几帧，动画要么非常快地循环那几帧，要么根本不做任何事情。

使用console.log(sprite.currentFrame)的tick update函数可以看到所有的帧都以每秒30帧的速度递增，但实际显示的与此不符。

请注意，使用普通 Stage 添加和播放 Sprite 动画效果很好。此外，根据 Chrome://gpu，WebGL 已启用，因此这也不是问题。

Answer 1

SpriteStage 需要 SpriteContainers，它引用精灵可以使用的单个图像。 http://www.createjs.com/docs/easeljs/classes/SpriteContainer.html

这是一种较旧的 WebGL 方法——因此您可能对 StageGL 感兴趣，这是一种新的 EaselJS 方法，我们正在对其进行 Beta 测试，应该会很快发布。基本上它的工作原理与 Stage 相同，但可以接受更多内容（而且速度更快！）。请注意，您上面的方法更符合 StageGL 的工作方式。

GitHub中有一个分支：https://github.com/CreateJS/EaselJS/tree/StageGL-beta

我们仍在完善文档和演示（由于其他优先事项而延迟），但希望尽快将其标记。

在 SpriteStage 上使用 SpriteSheet 渲染的动画显示不正确

Animations rendered using SpriteSheet on a SpriteStage are not displayed properly

javascript

canvas

createjs