HTML5画布和游戏编程

Question

我希望这不是太开放。

我想知道是否有更好的（电池友好的）方式 -

我有一个小的HTML 5游戏，用画布绘制（比方说500x500）。我有一些对象的位置我每50ms更新一次。我目前的实现每50毫秒重新绘制整个画布。我无法想象在移动平台上的电池寿命非常好。

有更好的方法吗？这必须是游戏的常见模式。

编辑：

根据要求，这里有一些更新：

现在，对象是通过弧线和线条绘制的几何图元。我并不反对制作这些小的png / jpg / gif文件而不是帮助。这些是小图形 - 只需15x15左右。

随着游戏的进行，越来越多的屏幕一次变化。但是，在开始时，屏幕变化相对较慢（物体每隔50ms随机移动几个像素）。

Answer 1

几乎所有像这样连续动画的游戏都会重新绘制每一帧;聪明的更新算法仅适用于屏幕的一小部分正在发生变化，并且有一个很好的规则可以找出与该部分重叠的内容。

以下是一些一般性优化建议：

• 确保GPU尽可能多地处理您的图形，而不是CPU。 （如果用户的浏览器不使用GPU进行2D画布渲染，这可能是不可能的，但是随着HTML5游戏的普及，你可以预期升级可能会改变。）

  • 这意味着你应该避免使用精心设计的聪明算法来支持在JS代码中尽可能少地完成工作 - 除了在很容易确定它不可见时避免执行大量绘图（例如外部屏幕的界限一般是值得的。

  • 如果您的目标平台支持它（通常不是当前移动设备的情况），请尝试使用WebGL而不是2D Canvas。您将不得不做更多细节工作，但WebGL允许您使用更有可能由GPU硬件提供的操作。

• 如果你的游戏变得空闲 - 也就是说，此刻实际上没有动画 - 停止重绘。停止更新循环，直到用户与游戏进行交互或发生超时。

在您的问题中添加您正在绘制的图形类型的详细信息可能会有所帮助（例如，您使用的是精灵还是几何图元？您是否正在绘制图像旋转/缩放？是否大部分屏幕发生变化或只是一些小物件？你在混合很多层吗？）甚至可能是一两个截图;然后我们可以建议哪种优化适合您的特定游戏。

Answer 2

不要绘制背景，使其成为图像并设置画布的CSS背景图像。

使用requestAnimationFrame可以帮助延长电池寿命。

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

如果实际发生了某些变化，只进行重绘。如果您还没有，请介绍失效的概念。 （即画布是有效的，因此在移动之前不会重绘。在画布窗口内移动的任何内容都会导致画布无效，因此需要重绘）

Answer 3

如果您想要电池友好，可以使用Crafty。这个游戏引擎使用现代的CSS3技术，所以它不需要一直更新画布。请看这个示例游戏here。

Answer 4

你想要每帧重绘整个画布的方式，它只能是＆＃34; Dirty-Check＆＃34;或者＆＃34;脏矩阵＆＃34;算法

脏检查似乎比整个重绘更有效。但我认为这取决于你的渲染实现。

如果使用canvas2D进行渲染，则无需使用它。几乎每个游戏都有复杂的精灵和动画。如果你使用脏检查，当精灵或背景图的一部分需要更新时，你必须弄清楚这部分重叠的是什么。然后clearRect这个小区域的画布，然后重绘每个精灵或地图。等等，什么是重叠。 这意味着由于重叠部分，您必须比普通渲染实现更多次运行canvas render api。而Canvas2d渲染性能通常听起来效率不高。

但是如果你使用WebGL，那可能会有很大不同。即使我不是WebGL的家人，我也知道可能更有效率。 Dirty-Check应该是符合您建议的好选择。