我应该使用 HTML5 Canvas 还是 CSS3 Sprites 来为游戏对象设置动画？

Posted 2023-03-05

【中文标题】我应该使用 HTML5 Canvas 还是 CSS3 Sprites 来为游戏对象设置动画？

【英文标题】：Should I use HTML5 Canvas or CSS3 Sprites to animate objects for a game?

【发布时间】：2011-05-09 13:37:28

【问题描述】：

我正在开始为网络构建策略游戏（想想魔兽）。我一直在研究 html5 Canvas 和 CSS3 sprites，但仍然无法决定使用哪种技术。

游戏要再过 6 个月才能完成。

任何建议将不胜感激。

【问题讨论】：

BTW 好主意。星际争霸/魔兽争霸可以很容易地移植到网络上。

仅供参考：有一个用于游戏开发的 StackExchange 网站@gamedev.stackexchange.com

【参考方案1】：

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

我的建议是考虑您所追求的应用程序的感觉。如果您正在尝试构建一个图形非常丰富、主要是图像的应用程序，那么我会使用 Canvas。但是，如果您尝试为某些图形制作动画，但保留页面并使其行为更像“Web”，并与其他 HTML 内容混合，我会尝试 CSS3。

另外两点：

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

【参考方案2】：

EA 网页游戏“Lords of Ultima”虽然乏味，但却是魔兽风格（嗯，它更像是城市建筑，因为没有可见的单位）世界的一个很好的例子，有动画和所有东西，建造在纯 HTML 和 CSS sprite 基础上。它的外观和性能都很好，我认为 HTML 的方块盒模型性质适合那种基于图块的设计，特别是因为很多图像处理（嵌入 <img> 或 <div> 与背景，更改背景-position 动画）和单击/鼠标处理是在简单的 html 中为您完成的。

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

【参考方案3】：

使用画布。如果您使用 CSS sprite 构建游戏，那么您将制作大量的 <div> 对 DOM 执行操作，这可能会变慢，并且还会有很多焦点和兼容性问题。

假设“代码将永远维护”，在<canvas> 上用开发时间换取性能可能会有所回报。

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

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

【参考方案4】：

两者各有利弊。目前Canvas的支持比CSS3更好，但是你说你的游戏还要6个月才能完成，到时候对CSS3的支持会好很多。这里还有很多其他变量，例如：游戏将在什么浏览器上观看？您需要制作动画的图形有多先进？等等......我会说画布更适合支持当前一代的浏览器和游戏图形，但是 CSS3 会更快，但甚至不会接近支持或图形处理。但你似乎并不急于完成它。

基本上：

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

CSS3：开发速度

以太会起作用。但现在我会使用 Canvas。然而，在科技界的 6 个月是永恒的，那时情况可能会大不相同。