我的团队目前正在开发一个相当大的Web应用程序。我们已经从Flash平台切换到Html5，希望能够实现一个适合所有平台的平台。
用户界面，主要基于createjs，顺便说一句，我很喜欢使用它。
然而，我们现在已经达到了成熟阶段并开始优化一些动画，这些动画在特别是IE中并不能顺利运行。
事情是我们有大约1500个精灵（pngs和jpgs）被绘制到舞台上。我们每帧只抽取大约60个。 它们相当大（高达800x800像素），应用程序引擎可以选择随机显示哪些60或更少。
图像打包在一个zip文件中并在浏览器中解压缩，Html图像是通过将二进制数据转换为base64编码的字符串构建的，该字符串被传递到图像的src属性。
所以在每个帧中渲染一组左右 60个图像被绘制到舞台上。这是因为某种原因缓慢。
因此我花了一些时间来尝试使用createjs的Spritestage来利用Webgl，但只有很小的改进。
所以现在我考虑将精灵包装在spritesheet中，因为数据量很大，所以会产生很多张。
我的问题是： 如果我的精灵分布在多张纸上，spritestage会获得任何改进吗？根据文档，仅支持具有单个图像的spritesheets。
祝你好运 / Mikkel Rasmussen
答案 0 :(得分：0)
通常，spritesheets通过减少frame所需的绘制调用次数来加速渲染。而不是说，为每个精灵使用不同的纹理和渲染，spritesheet实现可以通过一次渲染调用绘制多个精灵，前提是精灵表包含所有不同的单独精灵图像。所以要回答你的问题，如果你想要绘制的精灵分散在不同的精灵表上，你就不太可能看到性能提升。
绘制调用会产生很大的开销，通常最好将它们最小化。 1500个单独的绘制调用将非常缓慢。
我不知道这是否适用于您的情况但是您的瓶颈可能不是您发送给GPU的绘制调用次数，但是由于您提到的精灵每次都是800x800，因此您做了太多的过度抽取。如果是这种情况，请尝试在打开深度测试或模板测试的情况下从前到后渲染。