我在使用EaselJS时,似乎有些困难处理大量动画位图(都基于同一精灵表)。当我将其中几个同时放置在舞台上时,没有任何问题,但是当我同时运行更多数量的位图(从30到40开始)并将它们移动时,我开始看到它们频繁“闪烁”,即使帧速率约为10。 我没有使用任何阴影或其他类似的效果,只是在使用动画位图并移动它们。 有没有人有关于提高性能的好建议呢?
没有看到您的代码,很难确定瓶颈在哪里。但以下是一些开始查找的地方(从更琐碎的修复开始):
确保您使用的是现代浏览器。至少跨越几个其他浏览器/平台来检查性能是否有重大变化。据我所知,在非硬件加速的画布实现中,EaselJS的性能显着较差。
如果可以,请使用createJS版本的TweenJS而不是其他tweening库。 TweenJS将绑定到EaselJS的 Ticker
类,这更高效。
除非绝对必要,否则不要调用stage.update()
。由于stage.update()
是如此昂贵的调用,因此您应该尽可能吝啬。实际上,如果您正在使用Ticker定期更新舞台,则根本不应该调用它。
聪明地且积极地缓存。如果舞台上有复杂的静态元素,则缓存它们将节省一些周期。但是,缓存也有开销,因此请将其保存在具有许多静态元素或复杂绘制形状的容器中。
降低EaselJS检查mouseover的频率。如果您已启用舞台上的mouseover,请传递较低的频率(文档)。如果不需要它(如果只监听点击),则根本不要启用它。监视mouseover非常昂贵,特别是如果舞台上有大量元素。
将stage.snapToPixelsEnabled
设置为true。这可能会有所帮助,也可能没有。从理论上讲,在整个像素上渲染位图要比部分像素更有效,但是这可能会导致某些动画变得锯齿状,我还没有进行足够的测试,了解其他的优缺点是什么。
我在一台4年前的iMac上使用Chrome进行了一个快速测试,使用大约600-800个精灵表和基本的补间动画,可以以30FPS的性能运行。
Stage
对象。