我应该使用HTML5画布还是CSS3精灵来为游戏的对象设置动画？

Question

我正在着手为网络开发一个战略游戏(比如魔兽争霸)。我一直在研究HTML5画布和CSS3精灵，但仍然不能决定使用哪种技术。

这个游戏还要6个月才能完成。

任何建议都将不胜感激。

Answer 1

你可能经常听到...“这要看情况...”™

我的建议是考虑你想要的应用程序的感觉。如果您正在尝试构建一个图形非常丰富，主要是图像的应用程序，那么我会使用Canvas。然而，如果你想让一些图片动起来，但又让页面保持原样，并与其他超文本标记语言内容混合在一起，表现得更“像网页”，我会尝试一下CSS3。

另外两点：

目前，Canvas比animation/sprites.

• If
• 更好的支持你使用Canvas你将实现你自己的渲染循环和动画代码(或者使用CSS3 partly库)。您的代码通过合成每个帧的各个层、应用移动和重复来创建动画。你不能简单地说“将这个图像向右移动一点”。你必须自己去做。

Answer 2

EA网页游戏“终极领主”，虽然沉闷乏味，却是魔兽世界风格的一个很好的例子(好吧，它更像是城市建筑，因为没有可见的单位)，有动画和一切，构建在纯HTML和CSS精灵基础上。它看起来和性能都很好，我认为html的方形块框模型的本质适合这种基于瓦片的设计，特别是因为很多图像处理(嵌入<img>或<div>与背景，改变动画的背景位置)和点击/鼠标处理都是在简单的HTML中完成的。

如果你去画布，你必须自己管理，这将大大增加复杂性和开发时间。您将拥有对次要元素的更多控制和改进的性能，但同时您也会失去(如果这很重要的话)与旧浏览器更好的向后兼容性。因此，这取决于你的设计有多复杂，以及你需要什么样的性能。

Answer 3

使用画布。如果你使用CSS sprites来构建一个游戏，那么你将会做很多在DOM上执行操作的<div>，这可能会变慢，同时也会有很多焦点和兼容性问题。

通过假设“一个代码将永远被维护”，牺牲开发时间来换取在<canvas>上的性能可能是值得的。

我认为CSS3 sprite系统需要更多的时间来开发，因为你需要处理浏览器的兼容性。

像IE 8这样的浏览器(8还是9?)正在使用GPU加速图形，这让您可以享受摩尔定律的免费午餐。