使用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制作了一个有点工作版本的sprite动画，但是，在这里它没有加载，我看到的只是黑色背景。它似乎没有设法加载背景，任何想法如何解决这个问题？ 他的小提琴http://jsfiddle.net/6sygocvb/1/

更新

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

解： 在经过多次研究并获得CreateJS人员（Lanny＆amp; gskinner）的精彩帮助之后，我创建了一个具有与SpriteStage配合良好的设置的repo。 repo是here，它包含一个自定义版本的SpriteStage.js（感谢gskinner），它具有在渲染之前加载图像的修复。

谢谢，尽情享受！

Answer 1

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

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

我添加的2位是：

1）更改为SpriteStage。我还将canvas元素移动到小提琴的HTML块中：

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

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

var container = new createjs.SpriteContainer(ss);

希望有所帮助！

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