4

我希望这不会太开放。

我想知道是否有更好（对电池更友好）的方式来做到这一点——

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

有一个更好的方法吗？这一定是游戏的常见模式。

编辑：

根据要求，这里有更多更新：

现在，对象是通过弧线和直线绘制的几何图元。我不反对制作这些小的 png/jpg/gif 文件，而不是这样做会有所帮助。这些是小图形——只有 15x15 左右。

随着游戏的进行，画面的变化越来越多。但是，在开始时，屏幕变化相对较慢（对象每 50 毫秒随机移动几个像素）。

4

4 回答 4

7

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

以下是一些通用的优化建议：

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

    • 这意味着你应该避免复杂的聪明算法，而倾向于在 JS 代码中做尽可能少的工作——除非在很容易确定它不可见时（例如在屏幕边界之外）避免执行大量绘图一般是值得的。

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

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

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

于 2012-06-09T15:17:49.943 回答
3

不要绘制背景，将其设为图像并设置画布的 CSS background-image。

使用 requestAnimationFrame 应该有助于延长电池寿命。

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

仅在实际发生更改时才进行重绘。如果您还没有，请介绍失效的概念。（即，画布是有效的，因此在移动之前不会重绘。在画布窗口内移动的任何东西都会导致画布变得无效，因此需要重绘）

于 2012-06-09T19:22:11.533 回答
1

如果您想对电池友好，可以使用Crafty。该游戏引擎使用现代 CSS3 技术，因此不需要一直更新画布。在此处查看此示例游戏。

于 2012-06-09T16:35:33.487 回答
0

您不想每帧重绘整个画布的方式，只能是“脏检查”或“脏矩阵”算法。

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

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

但是如果你使用 WebGL，那可能会有很大的不同。尽管我不是 WebGL 的家人，但我知道这可能更有效。Dirty-Check 应该是与您的提议相匹配的好选择。

于 2014-11-24T11:02:18.037 回答