HTML5画布和游戏编程

我希望这不会太开放

我想知道是否有更好的（更方便电池的）方法来做到这一点--

我有一个小的HTML5游戏，画在画布上（比如500x500）。我有一些对象的位置我每50毫秒左右更新一次。我当前的实现每50毫秒重新绘制一次整个画布。我无法想象在移动平台上电池续航会有多好

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

编辑：

根据要求，以下是更多更新：

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

---

随着游戏的进行，屏幕上的内容一次会发生越来越多的变化。但是，在开始时，屏幕变化相对缓慢（对象每50毫秒随机移动几个像素）。

几乎每一个具有连续动画的游戏都会在每一帧重新绘制所有内容；聪明的更新算法只在屏幕的一小部分发生变化时适用，并且有一个很好的规则来确定重叠的部分是什么

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

• 确保尽可能多的图形由GPU而不是CPU处理。（如果用户的浏览器不使用GPU进行2D画布渲染，这可能是不可能的，但随着HTML5游戏的普及，升级可能会改变这一点。）
  • 这意味着您应该避免精心设计聪明的算法，以支持在JS代码中尽可能少地进行工作-除了在很容易确定它将不可见（例如，在屏幕边界之外）时避免执行大量绘图通常是值得的

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

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

---

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

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

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

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

---

只有在实际发生变化时才重新绘制。如果您还没有，请介绍无效的概念。（也就是说，画布是有效的，因此在有东西移动之前不会重新绘制。画布窗口内的任何移动都会导致画布无效，因此需要重新绘制）

由于您不希望每帧都重新绘制整个画布，因此只能使用“脏检查”或“脏矩阵”算法

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

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

---

但如果您使用WebGL，可能会有很大的不同。尽管我不是WebGL的家人，但我知道这可能更有效。脏支票应该是一个很好的选择，以配合您的提议。

嗨，谢谢您周到的回答。我更新了一下这个问题。图像中没有旋转或缩放，尽管我喜欢这个想法，并且可能会合并它：）。混合图层意味着什么？我只是画一个背景，然后每隔50毫秒在背景上画一个物体。这意味着两层吗？我喜欢你的答案，所以+1--如果第二天左右没有其他人插话，我会把它标记为答案。按层，我（马虎地）这意味着相互叠加绘制的图形数量。canvas也同样现代，而且比一直更新DOM要好得多。。。CSS3并不是为大多数游戏设计的——也许除了国际象棋