我应该使用 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]