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

我正在使用纹理打包器为我所有的游戏图像资源创建精灵表。我最终使用了5张多页纸，最多2048x2048张。我有大量的精灵被加载到各种容器中，精灵、平铺精灵等。我是否应该根据它们将加载到的容器更智能地创建这些精灵表

我觉得我在做一些根本错误的事情，因为我的表现似乎不是最好的。我精简了我的游戏，只加载了6个精灵，试图找到问题的根源。我甚至把我的雪碧床单拆分成单独的容器。因此，容器“A”使用精灵表“A”中的图像，而容器“B”使用精灵表“B”中的图像

即使加载了这些非常小的图形，我的CPU使用率还是猛增，我的电脑迷也疯狂了。看起来电脑非常努力地只显示6个精灵。当我尝试pixijs网站上的演示/示例时，我没有注意到这一点

---

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

在Webgl上，显示图形是GPU的职责。因此，如果在使用webGL时CPU阻塞，我可以相当肯定，问题在于代码，而不是精灵大小。基本上，webGL只是限制了它可以显示多大的纹理：

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

---

您应该找出代码的哪一部分导致尖峰。您可以使用chrome devtools profiling（例如chrome devtools profiling）进行分析，并从此处继续。

是和否？选择你的问题，因为问题可能是任何东西，图像太大，CPU太慢，GPU慢，资源不足，错误的代码，错误的浏览器，或任何一个或多个以上。如果你想知道为什么你的代码在挣扎，你必须提供一些代码。个人我怀疑错误的事件处理和/或实例化，或者在渲染到画布时留下打开的路径，它们通常可以让设备的风扇启动。结果在我的gameLoop中，我一直在调用renderer.render（）。如果需要渲染，则依次转到所有子对象并调用其渲染方法。pixi自己做一些基础渲染吗？通过在我的游戏循环中反复调用renderer.render（），它实际上是在每个循环中渲染两次吗？我修改了所有内容，只在需要时调用render。不确定这是不是一个很好的解决方案，但它肯定会阻止我的cpu峰值。谢谢你的回复。我认为这样做相当明智。因此，基本上只在需要时调用render，还可以限制只渲染游戏的可见部分。因此，只需将displayObject.visible=false设置为不希望渲染的对象。