Javascript 使用SpriteSetage（WebGL）创建EaselJS精灵动画

我在古典舞台上创作了这个用画架制作的精灵动画，这里是小提琴：

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

Fiddle:

EaselJS现在有SpriteStage，它可以转换为WebGL，如果需要的话可以返回到canvas

如何使用SpriteStage创建上面的示例？你们能帮我拉小提琴吗？即使这是一个非常简单的例子，我还是无法让它工作。如果你能帮我摆弄一把小提琴，我将永远感激你

注：SpriteTestage和SpriteContainer是测试版，需要单独包含

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

非常感谢您的帮助，谢谢

编辑：

多亏了Lanny，我用SpriteTestage制作了一个精灵动画的工作版本，但是，这里没有加载，我看到的只是一个黑色背景。它似乎无法加载背景，知道如何修复吗？ 他的小提琴

更新：

问题解决了，多亏了Lanny，这是他在成功加载图像之前的工作。 此外，CreateJS社区论坛上还有一个关于使用SpriteStatage成功加载图像的介绍

解决方案： 经过许多研究，在CreateJS的帮助下（Lanny&gskinner），我已经创建了一个repo，它的设置与SpriteStatage配合得很好。 repo是，它包含一个自定义版本的SpriteStage.js（感谢gskinner），该版本有一个修复程序，用于在渲染图像之前加载图像

谢谢，祝你愉快

这里有一个更新提琴。

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

我添加的2位是：

1） 换成喷雾剂。我还将canvas元素移动到了fiddle的HTML块中：

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

2） 创建要将精灵添加到的精灵容器：

var container = new createjs.SpriteContainer(ss);

希望有帮助

[编辑] 这是一个使用power-of-2映像更新的小提琴，由启用CORS的服务器提供。

---

有道理。尽管您的小提琴没有加载图像并显示此警告+此错误：[.WebGLRenderingContext]渲染警告：绑定到纹理单元0的纹理不可渲染。它可能是非power-of-2且具有不兼容的纹理过滤或不是“纹理完整”WebGL：错误太多，将不再向控制台报告此上下文的错误。未捕获的TypeError：无法读取null的属性'rect'，知道是什么原因吗？嗯，在OSX和IE10上的最新Chrome&Safari中工作。Windows上的Firefox和Chrom发出了安全警告，可能是一个跨域图像。我更改了fiddle以首先加载图像，它确实在一些地方有所帮助-但此演示最好使用同一域上的图像。我将您的图像更改为2次幂图像（512x512），并上载到一个服务器，该服务器提供带有CORS头的图像（使跨域加载更安全）。这是最新的提琴，它似乎无处不在。你拯救了这一天！是的，是我报告的，gskinner在另一个分支上创建了修复程序，我已经用解决方案更新了这篇文章。我用包括fixed SpriteStatage.js在内的解决方案进行了回购，你们太棒了，谢谢！