我在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,在成功加载图像之前。
另外,CreateJS社区论坛上有一个separate thread关于使用SpriteStage成功加载图像的信息
解:
经过大量研究,并在CreateJS团队(Lanny和gskinner)的出色帮助下,我创建了一个可与SpriteStage配合使用的安装库。
存储库为here,其中包含SpriteStage.js的自定义版本(感谢gskinner),该版本具有在渲染图像之前加载图像的修复程序。
谢谢,享受!
最佳答案
这是一个更新小提琴。
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的幂的映像的更新的小提琴,并从启用了CORS的服务器提供服务。
http://jsfiddle.net/lannymcnie/6sygocvb/5/