画布游戏开发和性能

Canvas Game Development and performance

本文关键字：开发性能游戏布游戏更新时间：2023-09-26

从

博客到博客，从视频到视频，从论坛到论坛，似乎有一些不同的看法。这是专门针对画布标签的 2D 上下文，而不是 WebGL。我知道 WebGL 会给我更好的性能，但我的目标是了解画布标签在其 2D 上下文中的工作原理。

我听说在"虚拟"屏幕外画布中预渲染对象可能是最好的性能，这是有意义的，看到浏览器不会真正绘制它。然后人们说使用"getImageData"从该画布中获取数据，根据我的理解，它会返回一个base64代码，您可以将其应用于使用"putImageData"添加到DOM的画布。这难道不是一个巨大的性能打击吗？

我是否应该在这个虚拟画布上渲染整个游戏的视图，然后在循环中使用此方法将其放入可见画布上？

是的，你可以。我建议使用 requestAnimationFrame（）并在游戏循环的 draw（）部分内，将所有单独的对象绘制到屏幕外的 canavs，然后在可见画布上执行一个获取/放置图像。虽然这似乎会影响性能，但是当您绘制了许多对象时，获取/放置图像的开销实际上可以忽略不计。

画布只是一个图像，根据我的经验，使用画布或图像在性能方面没有区别。

屏幕外或画布上也不例外，它们都将尽可能利用 GPU。

实时渲染应避免使用context.getImageData()、context.createImageData()和context.putImageData()，它不会利用 GPU，您对它所做的任何处理都将由 Javascript 在主内存中完成。尽管数据存储在类型化数组Uint8ClampedArray并且可以转换为任何类型的类型化数组，例如允许您使用一个变量而不是 4 个变量处理单个像素的Uint32Array。类型化数组还有许多本机函数，它们提供比标准 Javascript 数组更快的数组操作。

图像

（包括画布作为图像）的限制因素是可用的 GPU RAM 量，当您超过可用 RAM 量时，浏览器将根据需要开始将图像交换到 GPU RAM，当这样做时，这会阻止 GPU 的渲染能力，并且与正常的 RAM 访问相比，从主 RAM 到 GPU RAM 的传输速度很慢。发生这种情况时，您将立即看到帧速率的损失。由于浏览器可以在各种各样的平台上运行，并且无法知道机器的功能，因此在发布实时应用程序时应小心。

如果您为高端台式机编写了具有高分辨率图像的游戏，那么它在平板电脑和低端笔记本电脑上的表现不会很好。为了缓解此问题，对图像进行缩减采样以匹配屏幕分辨率。在分辨率为 1/8 的设备上使用租用背景图像会给硬件带来不必要的压力。设备是为了处理其屏幕的分辨率而设计的，超过此分辨率将产生重大不必要的性能影响。在这里，您可以使用屏幕外画布以设备的原始分辨率渲染图像，然后转储原始雇用图像。不会有质量损失，但性能会大幅提高，将无法播放的东西变成可玩的东西。这适用于所有图形资源。切勿以高于您使用的设备可以显示的分辨率存储和使用图像。

因为你可以用画布做各种各样的事情，所以找出运行效果最好的最好方法是进行实验。监控帧速率并尝试不同的方法来解决手头的问题。如果帧速率提高，您找到了更好的方法，如果帧速率下降，那么您使用了错误的方法。