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

我使用Texture Packer为我的所有游戏图像资源创建精灵图表。我最终使用了5张最大为2048x2048的多件包装。我有很多的精灵被加载到各种容器，精灵，tilingsprites等。我应该创建这些精灵表更智能地基于他们将被加载的容器？从PIXI.JS中的精灵图片加载图像时，精灵图纸的顺序或数量是否重要？

我觉得我正在做一些根本性的错误，因为我的表现似乎并不是最好的。我把我的游戏剥离到只加载6个精灵，试图找出问题的根源。我甚至将我的精灵表分成单独的容器。因此容器'A'使用来自精灵表'A'的图像，而容器'B'使用来自精灵表'B'的图像。

即使加载了这些非常小的图形，我的CPU使用率高峰和我的电脑迷也疯狂了。它似乎只是计算机正在努力工作，只显示6个精灵。我没有注意到，当我尝试从pixijs网站的演示/例子。

我真的不知道我在做什么错。我的图片太大了吗？我有一些约1440x900像素。图像全部被压缩，所以尺寸不是太大，但是大尺寸的精灵会减慢速度吗？我会展示一些代码，但是我的代码库相当大。我已经在canvas和webgl上试过了。 Webgl执行得更好，但我得到了两个相同的CPU峰值。

来源

2017-06-04 hanesjw

是，否？随你挑，因为问题可能是任何事情，图像大，CPU速度太慢，GPU速度慢，资源不足，代码不好，浏览器不好，或任何一个或多个更多。如果你想知道你的代码为什么挣扎，你将不得不提供一些代码。个人我怀疑坏事件处理和实例化，或者在渲染到画布时留下开放路径，他们通常可以让设备的粉丝前往。 – Blindman67

在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开发工具，并从那里继续前进。

来源

2017-06-05 06:06:08 Hachi

事实证明，在我的游戏中，我一直在调用renderer.render（）。如果需要渲染，它又转到所有子对象并调用它们的渲染方法。 pixi是否自己做一些基础渲染？通过在我的游戏循环中反复调用renderer.render（），它实质上是每个循环渲染两次？我修改了一切，只在需要时调用渲染。不知道这是否是一个很好的解决方案，但它绝对保持我的CPU峰值。感谢您的答复。 – hanesjw

我会说这样做很聪明。所以基本上只需要在需要时调用渲染，并且还可以限制只渲染游戏的可见部分。因此，只需将displayObject.visible = false设置为不想呈现的那些。 – Hachi

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

回答

相关问题