Canvas 游戏用画布与SVG

我意识到有很多教程和网站，所有的东西都回答“哪个更适合游戏应用？”他们都说SVG不适合游戏应用，画布才是。但这让我困惑

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

假设我在做一个平板成型器。我希望主角在舞台上穿行，背景画得很漂亮。在Canvas中，我要么重新创建她的整个hitbox（重新绘制每个移动实体的位置），要么创建一个单独的Canvas元素并使用

ctxChar、ctxBG、ctxItems

等。另一方面，它是内置的SVG。我甚至可以在她的

标签中放置一个

标签来改变她的x位置（或者通过js手动改变），另外一个

标签来改变她的精灵。然后背景就不需要被触摸了

至于同时设置一组元素的动画，我看不出画布中的动画速度比SVG快多少。将svg元素分组有什么问题？它能比重画点击框的背景和重画所有实体的实体本身慢吗

---

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

SVGVcanvas

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

本页将介绍SVG游戏设计，但在您深入阅读所有内容之前，请先看看游戏的原型。在我的书里有点哼哼

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

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

为什么要用帆布？我想说的是，它很快，但不是当你将它与一个本地的C++应用程序相比，它将比等效的JavaScript／画布游戏运行10快。速度提高十倍是非常重要的，但这样一来，您就无法获得Javascript所带来的跨平台优势

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

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

---

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

你在制作动画时渲染每一帧。不需要让画布保持并执行动画，您可以在Javascript中执行这些操作。它会制作动画并跟踪所有内容如果游戏是背景+玩家+15个平台，那么SVG和画布都可以正常工作。根据你问题的措辞，你倾向于SVG，那么为什么不用SVG粗略地描述一下游戏，看看它是否适合你的编码风格呢？只是一个关于SVG的提示：在Chrome中，“SVG的SMIL动画（，等）已被弃用，将被删除。请改用CSS动画或Web动画。”仅供记录，SMIL弃用通知很快就发布了（在@AgataB消息发布5天后），因此SMIL不会被弃用。此外，随着微软技术的转变，SMIL支持2）这与“如何让X在更短的时间内运行”相比，并没有太多基于意见的问题，因为这得到的答案同样多样且有争议。我的问题是，以前我能找到的所有信息都说“SVG很糟糕”，但没有人说明为什么它很糟糕，我需要知道。最近的讨论与其说是不同的观点，不如说是一个人对SVG缺乏理解。虽然它没有完全告诉我SVG为什么慢，但我想这是我将要达到的理解水平。您确实发布了一个资源，暗示了原因，并向我介绍了如何一起使用SVG和Canvas，这可能比我开始寻找的信息更有用。@SVG很难应用硬件加速。它的许多渲染后端是软件和硬件的混合体，因此比纯硬件渲染后端慢得多。使用webGL可以获得高性能矢量渲染（有一些限制），但webGL API是一个需要学习的复杂API。2D canvas有SVG这样的矢量，但您也可以使用位图并获得出色的硬件辅助渲染，并且可以控制每个矢量的显示方式