javascript - 使用 SpriteStage (WebGL) 创建 EaselJS Sprite 动画

Question

我在 EaselJS 中用经典的 Stage 创建了这个 Sprite 动画，这里是 fiddle :

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

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

如何使用 SpriteStage 创建上面的示例？你们能帮我拉 fiddle 吗？尽管这是一个非常简单的示例，但我无法让它发挥作用。如果你能帮我解决 fiddle 问题，我将永远感激不已

注意: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 中创建一些 Sprite 动画(出于明显的原因)，当不支持 WebGL 时，这些动画会回退到 Canvas 上。 EaselJS 现在通过 SpriteStage 提供快速而简单的解决方案，但我也愿意接受其他解决方案

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

编辑:

感谢 Lanny，我使用 SpriteStage 摆弄了我的 Sprite 动画的一个工作版本，但是，这里它没有加载，我看到的只是黑色背景。似乎无法加载背景，知道如何解决这个问题吗？他的 fiddle http://jsfiddle.net/6sygocvb/1/

更新:

问题解决了，感谢 Lanny，这是他的 Fiddle之前成功加载图像。另外，一个separate thread有关使用 SpriteStage 成功加载图像的信息，请参见 CreateJS 社区论坛

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

谢谢，祝你玩得愉快!

Answer 1

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

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

我添加的 2 位是:

1) 更改为 SpriteStage。我还将 canvas 元素移动到了 fiddle 的 HTML block 中:

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

2) 创建一个 SpriteContainer 以将 Sprite 添加到:

var container = new createjs.SpriteContainer(ss);

希望有帮助!

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