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

Question

我在 EaselJS 中用经典的 Stage 创建了这个精灵动画，这里是 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，我有一个 fiddle 使用 SpriteStage 的我的 sprite 动画有点工作版本，但是，这里没有加载，我只看到黑色背景。似乎无法加载背景，知道如何解决这个问题吗？他的fiddlehttp://jsfiddle.net/6sygocvb/1/

更新：

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

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

感谢并享受！

Answer 1

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

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

我加的2位是：

1) 切换到 SpriteStage。我还将 canvas 元素移动到 fiddle:

的 HTML 块

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

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

var container = new createjs.SpriteContainer(ss);

希望对您有所帮助！

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

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

Create EaselJS sprite animation with SpriteStage (WebGL)

javascript

animation

webgl

sprite

easeljs