我希望这不是太开放的结果.
我想知道是否有更好的(更多电池友好的)方式 -
我有一个小的HTML 5游戏,画在画布上(比方说500x500).我有一些对象的位置我每50ms更新一次.我目前的实现每50毫秒重新绘制整个画布.我无法想象在移动平台上的电池寿命非常好.
有一个更好的方法吗？这必须是游戏的常见模式.
编辑:
根据要求,这里有一些更新:
现在,对象是通过弧线和线条绘制的几何图元.我并不反对制作这些小的png/jpg/gif文件而不是帮助.这些是小图形 - 只需15x15左右.
随着游戏的进行,越来越多的屏幕一次变化.但是,在开始时,屏幕变化相对较慢(对象每隔50ms随机移动几个像素).
几乎所有像这样连续动画的游戏都会重新绘制每一帧; 聪明的更新算法仅适用于屏幕的一小部分正在改变的情况,并且有一个很好的规则可以找出与该部分重叠的内容.
这是一些一般的优化建议:
确保GPU尽可能多地处理您的图形,而不是CPU.(如果用户的浏览器不使用GPU进行2D画布渲染,这可能是不可能的,但是随着HTML5游戏的普及,你可以预期升级可能会改变.)
这意味着您应该避免使用精心设计的聪明算法来支持在JS代码中尽可能少地完成工作 - 除了在很容易确定它将不可见时(例如在屏幕边界之外)避免执行大量绘制通常是值得的.
如果您的目标平台支持它(通常不是当前移动设备的情况),请尝试使用WebGL而不是2D Canvas.您将不得不做更多细节工作,但WebGL允许您使用更有可能由GPU硬件提供的操作.
如果你的游戏变得闲置 - 也就是说,目前实际上没有任何动画 - 停止重绘.停止更新循环,直到用户与游戏交互或发生超时.
您可能有助于向您的问题添加您正在绘制的图形类型的详细信息(例如,您使用的是精灵还是几何图元？您是否正在绘制图像旋转/缩放？大多数屏幕是否会更改或只是几个小图片对象？你在混合很多层吗？)甚至可能是一两个截图; 然后我们可以建议哪种优化适合您的特定游戏.