我应该使用HTML5 Canvas或CSS3 Sprites为游戏制作动画对象吗？

Question

我正在开始为网络构建战略游戏（想想魔兽世界）。我一直在研究HTML5 Canvas和CSS3精灵，但仍无法决定使用哪种技术。

比赛将在另外6个月内完成。

任何建议都将受到赞赏。

Answer 1

你可能经常听到......“这取决于......”™

我的建议是考虑你所追求的应用程序的感觉。如果您正在尝试构建一个图形丰富的，主要是图像的应用程序，那么我会使用Canvas。但是，如果你试图动画一些图形，但让页面保持不变并且表现得更像“类似Web”，与其他HTML内容混合，我会试试CSS3。

还有两点：

• 目前，Canvas比CSS3动画/精灵更受支持。
• 如果您使用Canvas，您将实现自己的渲染循环和动画代码（或使用第3个部分库）。您的代码通过合成每个帧的各个层，应用移动和重复来创建动画。你不能简单地说“将这个图像向右移动一点”。你必须自己做。

Answer 2

EA网页游戏“Lords of Ultima”虽然很沉闷，却是一个极好的例子，描述了一个魔兽争霸风格（好吧，它是更多的城市建筑，因为没有可见的单位）世界，动画和一切，建成在纯HTML和CSS精灵基础上。它看起来和表现都很好，我认为HTML的方块框模型性质适合那种基于图块的设计，特别是因为大量的图像处理（嵌入<img>或<div>与背景，更改动画的背景位置）和单击/鼠标处理是在简单的html中完成的。

如果你去画布，你必须自己管理，这将大大增加复杂性和开发时间。您可以更好地控制次要元素并提高性能，但是您也会失败（如果它非常重要），与旧浏览器的向后兼容性更高。因此，这取决于您的设计有多复杂，以及您需要什么样的性能。

Answer 3

使用画布。如果你使用CSS精灵来构建一个游戏，那么你将会制作大量的<div>来对DOM执行操作，这可能会减慢并且还会产生很多焦点和兼容性问题。

通过假设“代码将永远保持”，在<canvas>上交换性能的开发时间可能会有所回报。

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

像IE 8（8或9？）这样的浏览器正在使用GPU来加速图形，这可以让你获得摩尔定律的免费午餐。

Answer 4

两者都有利有弊。目前，Canvas得到了更好的支持，然后是CSS3，但是你说你的游戏将在6个月内完成，届时对CSS3的支持可能要好得多。这里还有很多其他变量，例如：可以在哪个浏览器上查看游戏？动画需要的图形有多高级？等...我会说画布会更好地支持当前一代的浏览器和游戏图形，但CSS3会更快，但甚至不会接近支持或图形处理。但看起来你并不急于完成它。

基本上：

Canvas：图形，用户浏览器中的当前支持

CSS3：发展速度

以太将起作用。但是现在我会使用Canvas。然而，技术世界中的6个月是永恒的，事情可能会有很大的不同。