用于游戏的画布与 SVG [关闭]

Question

我知道有很多教程和网站，而且所有内容都在回答“哪个更适合游戏应用程序？”他们都说 SVG 不适合游戏应用，canvas 是。但这让我很困惑。

• 一旦有东西被画到画布上，它就会被遗忘。
• SVG 元素可以在创建后更改，而无需触及游戏中的任何其他视觉项目。
• Canvas 没有内置动画
• SVG 已内置动画

假设我正在制作一个平台游戏。我希望主角以精美的背景穿过舞台。在 Canvas 中，我要么必须重新创建她的整个 hitbox（重新绘制每个移动实体的位置），要么制作一个单独的 canvas 元素并使用 ctxChar, ctxBG, ctxItems 等。另一方面，对于 SVG，它是内置的。我可以甚至只是在她的<use> 标记中放置一个<animate> 标记来更改她的x 位置（或通过js 手动更改它），以及另一个<animate> 标记来更改她的精灵。然后永远不必触摸背景。

至于同时为一堆元素制作动画，我看不出这在 Canvas 中比在 SVG 中快得多。将 svg 元素分组有什么问题？是否比重绘 hitboxes 的背景并为所有实体重绘实体本身要慢？

---

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

Answer 1

SVG V 画布

作为一名专业的游戏创建者，如果您希望创建基于浏览器的游戏，我的建议是远离 SVG。主要原因是它太慢了。第二个原因是它会让你作为程序员的工作更加困难，因为很难找到解决 SVG 性能不足的方法。第三个原因，因为它非常慢，而且游戏都是关于性能的。

此页面将介绍 SVG 游戏设计 An Original Approach to Web Game Development Using SVG，但在您深入阅读并阅读所有内容之前，请先查看游戏的原型，这一切都与 Runes and Relics Prototype 有关。在我的书中有点哦哼。

我确信还有其他尝试，这只是我搜索的第一个。但我从来没有玩过好的 SVG 游戏。

那么 SVG 有什么好处呢？图形资源。 SVG 是为您的游戏打包图像的好方法，一旦您将它们放在客户端上，您就可以将它们渲染为位图，然后使用它们来渲染您的游戏。美妙之处在于您可以获得 SVG 和小图像尺寸的分辨率独立可扩展性。但是通过在加载时将它们渲染为位图，您可以充分利用 GPU 来移动像素。 SVG 在游戏中使用太慢了。

为什么要使用画布？我想说是因为它很快，但是当您将它与本机 C++ 应用程序进行比较时，它的运行速度将比同等的 Javascript/canvas 游戏快 10*。快十倍是非常重要的，但是你并没有获得使用 Javascript 获得的跨平台优势。

目前，画布是真正跨平台游戏应用程序的最佳选择。使用 2D 或 3D webGL，您可以构建全屏全帧率游戏。 HTML5 有一套很好的 API 可以满足所有游戏需求，而且易于学习。

我不是游戏引擎的粉丝，它们是一个涵盖所有解决方案的解决方案，是你和已经设计良好的 API 之间的中间人，它迫使你以他们（不是那么好）的方式去做。但它们会让您对可能发生的事情有一个很好的概述。

Phaser 是一个拥有大量资源和示例的 JavaScript 画布游戏引擎。这是一个很好的起点，看看可以做什么。不要被游戏引擎这样推销自己的事实所吸引。 HTML5 和 JavaScript 是开箱即用的最好的游戏引擎，运行原生代码，拥有庞大的用户和支持基础。你花在学习如何使用游戏引擎 API 上的时间不会花在学习如何使用 HTML5 API 上（坦率地说，HTML5 API 是完美的，这是 20 年浏览器大战的结果），这实际上比游戏更容易使用和学习的引擎。