Spritestage 和多个 spritesheets

Question

我的团队目前正在开发一个相当大的 Web 应用程序。我们已经从 flash 平台切换到 Html5，希望能有一个适合所有平台的尺寸。

UI 主要基于 createjs，顺便说一句，我真的很喜欢使用它。

但是我们现在已经到了成熟阶段并开始优化一些动画，尤其是在 IE 中运行不流畅。

问题是我们有大约 1500 个精灵（png 和 jpg）被绘制到舞台上。我们每帧只绘制大约 60 个。 它们相当大（高达 800x800 像素），应用程序引擎可以选择随机显示或多或少的 60 个。

图像打包在一个 zip 文件中并在浏览器中解压缩，通过将二进制数据转换为 base64 编码字符串来构造 Html 图像，该字符串传递给图像的 src 属性。

所以在每一帧渲染一组左右 60幅图像被绘制到舞台上。出于某种原因，这很慢。

因此，我花了一些时间来试验 createjs 的 Spritestage 以利用 Webgl，但只有很小的改进。

所以现在我正在考虑将我们的 sprite 打包到一个 spritesheet 中，由于数据量很大，这会导致很多工作表。

因此，我的问题是： 如果我的精灵分布在多张纸上，spritestage 会获得任何改进吗？根据文档，仅支持具有单个图像的精灵表。

最好的问候 /米克尔·拉斯穆森

Answer 1

通常，精灵表通过减少帧所需的绘制调用次数来加速渲染。与其说为每个 sprite 使用不同的纹理和渲染，spritesheet 实现可以通过一次渲染调用绘制多个 sprite，前提是 sprite sheet 包含所有不同的单个 sprite 图像。因此，要回答您的问题，如果您要绘制的精灵分散在不同的精灵表上，您不太可能看到性能提升。

Draw 调用有很大的开销，通常最好将它们最小化。 1500 个单独的绘图调用会非常慢。

我不知道这是否适用于您的情况，但您的瓶颈可能不是您分派到 GPU 的绘制调用的数量，而是您做了太多过度绘制，因为您提到您的精灵每个都是 800x800。如果是这种情况，请尝试在打开深度测试或模板测试的情况下从前到后进行渲染。