使用 SpriteStage (WebGL) 创建 EaselJS 精灵动画

Question

我在 EaselJS 中使用经典舞台创建了这个精灵动画，这里是小提琴：

Fiddle:http://jsfiddle.net/6sygocvb/

EaselJS 现在有 SpriteStage，它可以转换为 WebGL 并在需要时回退到画布。

如何使用 SpriteStage 创建上面的示例？你们能帮我提琴吗？尽管这是一个非常简单的示例，但我无法让它工作。如果你能帮我一把小提琴，我会永远感激不尽

注意：SpriteStage 和 SpriteContainer 处于 BETA 阶段，需要单独包含

https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/SpriteContainer.js https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/SpriteStage.js

这背后的原因是我想在 WebGL 中创建一些精灵动画（出于显而易见的原因），当不支持 WebGL 时，它们会在画布上回退。 EaselJS 现在通过 SpriteStage 提供了一个快速简单的解决方案，但我也对其他解决方案持开放态度

非常感谢任何形式的帮助，谢谢！

编辑：

感谢 Lanny，我对使用 SpriteStage 的精灵动画的一些工作版本进行了修改，但是，这里没有加载，我看到的只是黑色背景。似乎它无法加载背景，知道如何解决这个问题吗？ 他的小提琴http://jsfiddle.net/6sygocvb/1/

更新：

问题解决了，感谢 Lanny，这是他的 Fiddle 之前成功加载图像。 另外，关于使用 SpriteStage 成功加载图像的 separate thread 在 CreateJS 社区论坛上

解决方案： 经过大量研究并在 CreateJS 人员（Lanny 和 gskinner）的大力帮助下，我创建了一个与 SpriteStage 配合良好的设置的存储库。 代码库是here，它包含一个自定义版本的 SpriteStage.js（感谢 gskinner），它修复了在渲染之前加载图像。

感谢并享受！

Answer 1

这是一个更新小提琴。 http://jsfiddle.net/6sygocvb/1/

请注意，添加到 SpriteContainer 的所有元素都必须具有相同的 SpriteSheet。

我添加的 2 位是：

1) 更改为 SpriteStage。我还将画布元素移动到小提琴的 HTML 块：

var stage = new createjs.SpriteStage("canvas");

2) 创建一个 SpriteContainer 以将您的 Sprite 添加到：

var container = new createjs.SpriteContainer(ss);

希望有帮助！

[编辑] 这是一个使用 2 次幂图像的更新小提琴，并由支持 CORS 的服务器提供服务。 http://jsfiddle.net/lannymcnie/6sygocvb/5/