javascript - 将场景分成几张 Canvas 还是继续重画一张？

Question

我打算用 javascript 创建一个基于 Canvas 的游戏，我站在一个选择之前:

我是否应该在性能方面将屏幕上发生的所有事情都保存在一个 Canvas 中(所有移动的 Angular 色、 Sprite )并以恒定的速度重新绘制它，比如 60 FPS，或者我应该将场景分成几个较小的 Canvas 消除对场景进行冗余重绘的需要？我什至可以为 Angular 色的四肢创建单独的 Canvas 元素，然后通过简单地操纵给定 Canvas 元素(旋转、定位、不透明度)的 CSS 来制作大部分动画。

对我来说，后者听起来更合理、更容易实现，但它也更快吗？另外，我是否应该使用 SVG，将字符和 Sprite 作为元素保留在其中并直接操作它们的 XML 和 CSS 属性？

那么对于一个有多个 Sprite 和 Angular 色的场景，你认为最合适的解决方案是什么:

• 以 FPS 速率手动(浪费)重绘一个 Canvas 对象
• 几个 Canvas 元素，以更合理的方式手动重绘
• 结构化矢量图形文档，如通过 DOM 操作的 SVG/VML

我主要关心性能差异，但背后逻辑代码的易读性也很有趣(我之前已经使用过 Canvas ，例如我相当确定整个 Canvas 的重绘功能将是一个难以维护的脚本野兽)。

Answer 1

与 GPU 加速的 Canvas 操作相比，DOM 操作速度较慢，因此我会远离 SVG 和 VML。

就 Canvas 代码的结构而言，由于玩家移动或执行 Action 而清除并重新绘制整个 Canvas 当然没有意义(尤其是出于性能原因)。根据您在此处的描述，我猜您的游戏将是 2D 的。这些类型的游戏非常适合分层，除非你正在做一些像纸片马里奥这样相当复杂的游戏。您应该从面向对象的 Angular 看待这个问题，并适本地将您的绘图过程和对象封装在一起。

例如，创建一个玩家对象来维护代表 Angular 色的小 Canvas 。维护 Angular 色状态所需的所有逻辑都保存在对象中，对其所做的任何更改都无需担心游戏视觉表示的其他组件。同样，对背景、用户界面和任何其他你可以抽象到一个层中的东西做同样的事情(在合理的范围内)。例如，如果您正在做视差游戏，您可能有一个前景、背景、 Angular 色和用户界面层。

最终，您将需要单独维护游戏中不同组件的状态。播放器动画、移动的背景云、摇曳的树木等都将由适当的对象管理。由于您已经设置了这种类型的代码结构，因此只需在单独的 Canvas 元素上维护主要组件并根据需要将它们组合在一起以获得更好的性能是有意义的。如果 Angular 色在具有静态背景的场景的左下角移动，则无需重新绘制右上角(或场景的 95%)。如果您正在考虑全屏功能，这绝对是一个性能问题。