我在 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),该版本修复了在渲染图像之前加载图像的问题。
谢谢,祝你玩得愉快!
最佳答案
这是一个更新 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/
关于javascript - 使用 SpriteStage (WebGL) 创建 EaselJS Sprite 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28172940/