EaselJS中大量动画位图的速度

Question

在使用EaselJS时,我似乎在使用大量动画位图(所有基于相同的spritesheet)时遇到了一些麻烦.当我在舞台上同时运行其中几个时,根本没有问题,但是当同时运行更多数量(从大约30到40开始)同时移动它们时我开始拥有它们"闪烁"相当多,即使是在10左右的fps.

我没有在这些线上使用任何阴影或其他任何东西.只需使用动画位图并移动它们.

有没有人有任何关于提高这种表现的好建议？

Answer 1

如果没有看到您的代码,就很难确切地知道瓶颈在哪里.但是这里有一些地方可以开始寻找(从更琐碎的修复开始):

确保您使用的是现代浏览器.至少,请检查其他一些浏览器/平台,看看性能是否有任何重大变化.据我所知,EaselJS在非硬件加速画布实现上的表现要差得多.
如果可以,请使用createJS的TweenJS版本而不是其他补间库.TweenJS将自己绑定到EaselJS的Ticker类,这样更高效.
stage.update()除非绝对必要,否则不要打电话 既然stage.update()是如此昂贵的电话,你应该尽可能小气.实际上,如果您使用Ticker定期更新舞台,则根本不应该真正调用它.
明智而积极地缓存.如果舞台上有复杂的静态元素,缓存它们将节省一些周期.但是,缓存有一些开销,因此请将其保存到具有大量静态元素或复杂绘制形状的容器中.
降低EaselJS检查鼠标悬停的频率.如果您已在舞台上启用了鼠标悬停,请以较低的频率传递(文档).如果您不需要它(如果您只是听取点击),请不要启用它.监控鼠标是非常昂贵的,特别是如果你在舞台上有足够的元素.
设为stage.snapToPixelsEnabledtrue.这可能有所帮助,也可能无效.从理论上讲,在整个像素渲染位图是更有效,但是这可能会导致一些动画变成了锯齿状,我还没有发挥与它周围,足以知道其他的利弊.

我能够以30FPS的速度获得大约600-800个spritesheets,并在4岁的iMac上使用Chrome进行基本的补间(只是快速测试).

Answer 2

Stage尝试同时使用多个对象。