在 SpriteStage 上使用 SpriteSheet 渲染的动画无法正确显示答案

【问题标题】：Animations rendered using SpriteSheet on a SpriteStage are not displayed properly在 SpriteStage 上使用 SpriteSheet 渲染的动画无法正确显示
【发布时间】：2016-11-15 17:45:11
【问题描述】：

我正在使用精灵表生成器从通用影片剪辑生成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 已启用，所以这也不是问题。

【问题讨论】：

标签： javascript canvas createjs

【解决方案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

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

【讨论】：

谢谢，StageGL 看起来很有趣，我会尽快研究。不过还有一件事。当我尝试将SpriteContainer 添加到舞台的方法时，我意识到我只能向其中添加对象，例如只使用一张图像的精灵。在这种情况下，如何将动画对象添加到“SpriteStage”？
这是 SpriteContainer/SpriteStage 方法的限制。 Sprites 使用 SpriteSheets，它允许您以与常规舞台相同的方式制作动画。你想做什么样的动画？
我通常将通用影片剪辑作为动画对象。但由于它们主要由 Shapes 制成，因此渲染它们可能非常昂贵。这就是为什么直到现在，我使用一种方法来迭代和缓存他们的孩子，而性能影响仍然很小，而对象仍在动画中。但是应用程序变得越来越复杂，所以我一直在寻找一种更有效的方式来播放动画。 Sprite 表似乎是答案，但它们的实现要比仅导出 Flash 图形复杂得多。
将向量转换为 SpriteSheets 可能很好，但在内存方面非常昂贵，尤其是对于大型形状。查看 EaselJS SpriteSheetBuilder 以了解 MovieClip 的运行时转换。请注意，当它们过于复杂时，使用向量可能会更好。
是的，我也得出结论，在处理复杂的 MovieClip 时，最终最好还是坚持使用标准矢量，因为内存消耗会变得非常大。由于我总是对形状和影片剪辑使用cache() 方法，因此桌面浏览器上不存在性能损失。主要问题是我主要为移动设备制作应用程序。我想这是 HTML5 与原生环境的限制，目前。