Question

我正在使用精灵表构建器从通用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)我可以看到所有帧都以每秒30的速度递增，但实际显示的内容与此不一致。

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

Answer 1

SpriteStage需要SpriteContainers，它引用sprite可以使用的单个图像。 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呈现的动画无法正确显示

1 个答案: