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

Posted

技术标签:

【中文标题】我应该使用 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 个月是永恒的,那时情况可能会大不相同。

【讨论】:

以上是关于我应该使用 HTML5 Canvas 还是 CSS3 Sprites 来为游戏对象设置动画?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Html5 的 JQuery 随机播放效果 [Canvas +CSS +JS]

动画选项 HTML5 Canvas/CSS3/jQuery

使用canvas时如何不影响点击页面的元素又不影响效果的展现

HTML5的canvas绘图和CSS3的绘图哪个更有优越性

canvas基础

我应该为 HTML5 和 <canvas> 放弃 Adob​​e Flash 吗?