从 PIXI.JS 中的精灵表加载图像时，精灵表的顺序或数量是否重要？答案

【问题标题】：When loading images from a sprite sheet in PIXI.JS is the order or amount of sprite sheets important?从 PIXI.JS 中的精灵表加载图像时，精灵表的顺序或数量是否重要？
【发布时间】：2017-11-05 03:08:56
【问题描述】：

我正在使用 Texture Packer 为我的所有游戏图像资源创建精灵表。我最终使用了 5 张的合装包，最大尺寸为 2048x2048。我有大量的精灵被加载到各种容器、精灵、平铺精灵等中。我是否应该根据要加载的容器更智能地创建这些精灵表？

我觉得我做错了什么，因为我的表现似乎不是最好的。我剥离了我的游戏，只加载了 6 个精灵，试图找到问题的根本原因。我什至将我的精灵表拆分为单独的容器。所以容器“A”使用精灵表“A”中的图像，而容器“B”使用精灵表“B”中的图像。

即使加载了这些非常少的图形，我的 CPU 使用率也在飙升，我的电脑风扇也变得疯狂。似乎计算机非常努力地只显示 6 个精灵。当我尝试来自 pixijs 网站的演示/示例时，我没有注意到这一点。

我真的不确定我做错了什么。我的图像是否太大？我有一些大约 1440x900 像素。图像都被压缩了，所以尺寸不会太大，但是大尺寸的精灵会减慢速度吗？我会展示一些代码，但我的代码库非常大。我已经在画布和 webgl 上试过了。 Webgl 性能更好，但两者的 CPU 峰值相同。

【问题讨论】：

是与否？选择你自己，因为问题可能是任何问题，图像太大，CPU 太慢，GPU 速度慢，资源不足，代码错误，浏览器错误，或者任何一个或多个。如果你想找出你的代码为什么会出现问题，你将不得不提供一些代码。个人我怀疑糟糕的事件处理和/或实例化，或者在渲染到画布时留下开放的路径，他们通常可以让设备的粉丝继续前进。

标签： canvas html5-canvas pixi.js texturepacker

【解决方案1】：

在 webGL 上，显示图形是 GPU 的职责。因此，如果 CPU 窒息，在使用 webGL 时，我自己会相当确定，问题出在您的代码中，而不是精灵大小。基本上，webGL 只是限制了它可以显示多大的纹理：https://www.khronos.org/registry/webgl/sdk/tests/conformance/limits/gl-max-texture-dimensions.html，https://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE

所以在 webGL 中，CPU 最好只将精灵上传到 GPU 一次，之后 CPU 会改变精灵的位置并将新的位置发送到 GPU，每个动画周期和 GPU 都会重绘精灵。但是你提到你的代码库很大，所以我个人怀疑这是核心问题。

您应该找出代码的哪一部分导致了尖峰。您可以使用例如chrome devtools 对此进行分析并从那里继续。

【讨论】：

事实证明，在我的游戏循环中，我一直在调用 renderer.render()。依次转到所有子对象并在需要渲染时调用它们的渲染方法。 pixi 会自己做一些基础渲染吗？通过在我的游戏循环中一遍又一遍地调用 renderer.render() ，它本质上是每个循环渲染两次吗？我将所有内容都修改为仅在需要时调用渲染。不确定这是否是一个很好的解决方案，但它绝对可以防止我的 cpu 峰值出现。感谢您的回复。
我会说这是相当聪明的做法。所以基本上只在需要时调用渲染，你也可以限制你只渲染游戏的可见部分。所以只要设置 displayObject.visible = false，对于那些你不想被渲染的。