Canvas和SVG对于游戏开发的比较

Question

Canvas和SVG对于游戏开发的比较

36

我知道有很多教程和网站都在回答“哪种更适合游戏应用？”这个问题。它们都说SVG不适合游戏应用，而canvas适合。但这让我感到困惑。

一旦将某些内容绘制到画布上，它就被遗忘了。
创建后可以更改SVG元素，而无需触摸游戏中的任何其他视觉项。
Canvas没有内置动画功能
SVG具有内置动画功能

所以假设我正在制作一个平台游戏。我希望主角在美丽的背景下走过舞台。在Canvas中，我要么必须重新创建她的整个碰撞框（重新绘制每个移动实体的位置），要么创建一个单独的画布元素并使用ctxChar、ctxBG、ctxItems 等。与此相反，在SVG中，它是内置的。我甚至可以在她的标记中放置一个标记来更改她的x位置（或通过js手动更改它），还可以再放置另一个标记来更改她的精灵图像。然后就不需要触摸背景了。

至于同时动画化一堆元素，我不明白在Canvas中这样做有什么快速的方法。把SVG元素放在组内有什么问题吗？它会比为所有实体重新绘制碰撞框的背景和实体本身慢吗？

编辑：我认为我的真正问题不是SVG能否工作，而是为什么人们认为它不能。

- RoboticRenaissance

当进行动画制作时，您需要渲染每一帧。不需要让画布保持动画并执行动画，可以在JavaScript中完成。它可以对所有内容进行动画和跟踪。 - Blindman67

3

关于SVG的提醒：在Chrome浏览器中，SVG的SMIL动画（如<animate>，<set>等）已被弃用并将被移除。请改用CSS动画或Web动画。 - AgataB

1

仅供记录，SMIL弃用通知已经被撤销（在@AgataB的消息后5天），因此SMIL并未被弃用。此外，随着微软技术的转变，SMIL支持范围比以往任何时候都要广泛。链接 - Robert Monfera

1

这个问题在被提出并得到大多数积极反馈之后很久才被关闭，这真的很奇怪。我注意到下面有一个最近的讨论，也表达了我曾经有过的同样困惑。但是那之前已经过去了4年。很明显问题并没有改变。 - RoboticRenaissance

2

这并不比“如何让X在更短的时间内运行”更多基于观点，因为那样会得到同样多样化和争议性的答案。我的问题是，我能找到的所有先前信息都说“SVG很糟糕”，但没有人说明它为什么糟糕，而我需要知道。最近的讨论不是不同的观点，而是一个人缺乏理解。 - RoboticRenaissance

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blindman67 · Accepted Answer

SVG与Canvas

作为专业的游戏开发者，如果你想要创建基于浏览器的游戏，我的建议是尽量避免使用SVG。主要原因是它太慢了。其次，由于找到SVG缺乏性能的解决方案很困难，这会使程序员的工作更加困难。第三个原因，因为它非常慢而游戏的全部关键在于性能。

这个页面将介绍SVG游戏设计《使用SVG进行Web游戏开发的原始方法》，但在你深入阅读之前，先看看这个游戏的原型符文和遗物原型。在我看来，这个游戏有点无聊。

我相信还有其他尝试，只不过这是我搜索结果中的第一个。但我从未玩过好的SVG游戏。

那么SVG适用于什么？图形资源。SVG是一种打包图像资源的好方法。一旦你将它们放在客户端上，你可以将它们渲染成位图，然后用它们来渲染你的游戏。优点是你可以获得分辨率无关的可缩放性和小图像大小。但在加载时将它们渲染成位图后，你可以充分利用GPU移动像素。SVG在游戏中使用起来太慢了。

为什么要使用Canvas？我想说是因为它快，但与本地C++应用程序相比，它并不快，后者将比等效的Javascript / canvas游戏运行快10倍。十倍之快非常显著，但你不会得到使用Javascript所获得的跨平台优势。

目前，Canvas是真正跨平台游戏应用程序的最佳选择。使用2D或3D WebGL，您可以构建全屏幕、全帧率的游戏。HTML5具有所有游戏需求的良好API，并且易于学习。

我不是游戏引擎的粉丝，它们是通用解决方案，是你和已经设计良好的API之间的中间人，强制你按照它们（不是很好的）方式去做。但它们可以给你一个很好的概览，让你知道什么是可能的。

Phaser是一个JavaScript画布游戏引擎，提供了大量的资源和示例。这是一个很好的起点，可以看到能做些什么。不要被游戏引擎所售卖的事实所吸引。HTML5和JavaScript本身就是城里最好的游戏引擎，运行本地代码，并且拥有一个庞大的用户和支持基础。学习如何使用游戏引擎的API所花费的时间并不会帮助你学习如何使用HTML5 API（而HTML5 API实际上更容易使用和学习）。HTML5 API将是你最佳的选择，因为它们是20年浏览器战争的结果，非常完美。