JavaScript帆布游戏开发

Question

我一直有一个真正令人困惑的减速问题，我正在研究的游戏可能是因为我不确定如何处理图形（最有可能负责减速）在JavaScript中，而不使用第三方框架Phaser/ImapactJS/EaselJS等）*。 以下是我如何接近我的图形的低谷。我将非常感谢关于如何做到这一点的一些提示或方法。因为我希望他们在高清设备体面显示使用500×500，在PX 设计瓷砖 -

• 我的游戏是基于瓦片。
• 我正在使用spritesheet在主循环运行之前加载我的所有瓷砖（大部分）。 这幅图像大约是4000 x 4000（保持在4096以下，因为GPU不能处理比​​这更大的纹理尺寸）。
• 然后，我使用drawImage函数循环并使用存储在tile数组中的信息（w，h，x，y）在画布的一部分上绘制每个图块。我使用drawMap函数在主循环的每个循环上执行此操作。
• 该地图目前有6x6大小的地图
• 字符spritesheet也被加载并绘制在地图绘制后的画布上。该字符在主循环的每个循环中显示动画的不同帧。每个字符都包含在同一个spritesheet中的动画集合。
  • 字符精灵表是大致4000x3500
• 字符大致350x250像素

• 其它目的也使用相同的精灵表。目前只有一个对象。

  可能有帮助的问题：

• 我使用了太多spritesheets或过少？

• 我应该只绘制一些东西，如果它的坐标是在屏幕的边界？
• 我该如何去做垃圾收集？当不再使用时，我需要将图像对象设置为null吗？

在此先感谢您的意见。我只想知道我是否以正确的方式开展工作，并且选择你的大脑以加速它的发展。 *请注意，我计划将JS游戏移植到cocoonJS，它为移动设备上的canvas元素提供图形加速。

**如果有兴趣请访问我的Patreon page为乐趣！

Answer 1

你在这里问了很多问题，我会解决我遇到的问题。 我谨表示非常清楚，展开，取出，

使用分析器

找出是否建议你做每一件事情，任何人，正在改善。除非我们处理你的代码，否则我们只能给你如何优化它的理论。

我应该如何去做垃圾收集？当不再使用时，我需要将图像对象设置为null吗？

如果您不再使用某个对象，则将它的参考设置为空可能意味着它将被垃圾收集。消除周围并不一定好，但这不在这个问题的范围之内。

对于高性能应用程序，您希望避免太多的分配，因此垃圾收集活动太多。看看你的分析器说的 - 铬分析器可以告诉你垃圾收集器占用了多少CPU时间。你现在可能还行。

然后，我使用drawImage函数循环并使用存储在瓦片数组中的信息（w，h，x，y）在画布的一部分上绘制每个瓦片。我使用drawMap函数在主循环的每个循环上执行此操作。

这很慢 - 请考虑将当前屏幕图块绘制到背景画布上，然后仅绘制先前被遮挡的区域。

例如，如果您的播放器向左走，屏幕左侧会出现很多可以看到的贴图;您需要在屏幕上绘制背景缓冲区，补偿移动，然后绘制缺失的图块。

我的游戏是基于瓦 - 使用在500×500像素设计的瓷砖，因为我希望他们在高清设备

如果我解释这个权利，你的瓷砖的直径500x500px，和你正在绘制一个小体面显示屏幕上显示的数量。然后对于没有这种高分辨率的设备，画布渲染器将会缩小这些尺寸。你真的想在每个设备上以1：1的比例绘制像素。

您是否可以在屏幕上显示更多数量较小的瓷砖 - 从而避免在边缘处进行额外的绘制？可能的是，边缘周围的瓷砖有时只会画出一个边缘的几个像素，而其余的图像也会被裁剪掉，所以为什么不把它们分开呢？

我应该只绘制一些东西，如果它的坐标是在屏幕的边界？

是的，这是一个非常常见和很好的优化。你会发现它有很大的不同。

我是使用太多的spritesheets还是太少？

我发现，当我有少量的精灵表时，性能大打是我经常在它们之间切换的。如果在一个绘制阶段，您从character_sheet.png中绘制所有角色，然后从plant_sheet.png中绘制所有植物，您就可以了。在它们之间切换可能会导致很多麻烦，并且您会看到速度变慢。如果您的配置文件告诉您，drawImage在您的框架中占据了很大的比例，那么您会知道发生了这种情况。