Canvas 与 SVG 的游戏对比
Canvas vs. SVG for games
我知道有很多教程和网站，一切都在回答 "Which is better for game applications?" 他们都说 SVG 不适合游戏应用程序，canvas 是。但这让我很困惑。
- 一旦某物被吸引到 canvas，它就会被遗忘。
- 创建后可以更改 SVG 元素，而无需触及游戏中的任何其他视觉项目。
- Canvas没有内置动画
- SVG 内置了动画
假设我正在制作一款平台游戏。我希望主角在精美的背景下走过舞台。在 Canvas 中，我要么必须重新创建她的整个碰撞框（重新绘制每个移动实体的位置），要么制作一个单独的 canvas 元素并可能使用 ctxChar, ctxBG, ctxItems 等。使用 SVG，在另一方面，它是内置的。我什至可以在她的 <use> 标签中放置一个 <animate> 标签来改变她的 x 位置（或通过 js 手动改变它），以及另一个 <animate> 标签改变她的精灵。然后背景永远不必触及。
至于同时为一堆元素设置动画，我看不出 Canvas 比 SVG 快多少。将 svg 元素分组有什么问题？它会比重新绘制碰撞框的背景和为所有实体重新绘制实体本身慢吗？
编辑：我认为我真正的问题不是 SVG 是否可行，而是为什么人们认为它不行。
SVG V Canvas
作为一名专业的游戏创作者，如果您想创建基于浏览器的游戏，我的建议是远离 SVG。主要原因是它太慢了。第二个原因是它会使你作为程序员的工作更加困难，因为很难找到解决 SVG 性能不足的方法。第三个原因，因为它非常慢，而且游戏都是关于性能的。
本页将介绍 SVG 游戏设计 An Original Approach to Web Game Development Using SVG but before you dive in and read all of it have a look at the prototype of the game it`s all about Runes and Relics Prototype。我的书里有一点哦哼。
我确信还有其他尝试，这只是我搜索中的第一个。但是我从来没有玩过好的SVG游戏
那么 SVG 有什么用呢？图文资源。 SVG 是为您的游戏打包图像的好方法，一旦您在客户端上拥有它们，您就可以将它们渲染为位图，然后使用它们来渲染您的游戏。美妙之处在于您可以获得 SVG 的分辨率独立可伸缩性和小图像尺寸。但是通过在加载时将它们渲染为位图，您可以充分利用 GPU 来移动像素。 SVG 在游戏中使用太慢了。
为什么要使用Canvas？我想说是因为它很快，但当您将它与本机 C++ 应用程序进行比较时，情况并非如此，后者比等效的 Javascript / canvas 游戏快 运行 10*。快十倍是非常重要的，但是这样你就无法获得 Javascript.
带来的跨平台优势
目前canvas是真正跨平台游戏应用的最佳选择。使用 2D 或 3D webGL，您可以构建全屏全帧率游戏。 HTML5 有一套很好的 API 可以满足所有游戏需求，而且很容易学习。
我不是游戏引擎的粉丝，它们是一个包罗万象的解决方案，是你和已经设计好的 API 之间的中间人，迫使你去做他们的（不是那么好）方法。但是他们会给你一个关于什么是可能的很好的概述。
Phaser 是一个 javascript canvas 游戏引擎，有很多资源和示例。这是一个很好的起点，看看可以做什么。不要被游戏引擎这样推销自己的事实所吸引。 HTML5 & JavaScript 是开箱即用的镇上最好的游戏引擎，运行 的本地代码，拥有庞大的用户和支持基础。您花在学习如何使用游戏引擎的 API 上的时间将不会花在学习如何使用 HTML5 API 的时间上（坦率地说 HTML5 APIs 是完美的，20 年浏览器大战的结果）这实际上比游戏引擎更容易使用和学习。
我知道有很多教程和网站，一切都在回答 "Which is better for game applications?" 他们都说 SVG 不适合游戏应用程序，canvas 是。但这让我很困惑。
- 一旦某物被吸引到 canvas，它就会被遗忘。
- 创建后可以更改 SVG 元素，而无需触及游戏中的任何其他视觉项目。
- Canvas没有内置动画
- SVG 内置了动画
假设我正在制作一款平台游戏。我希望主角在精美的背景下走过舞台。在 Canvas 中，我要么必须重新创建她的整个碰撞框（重新绘制每个移动实体的位置），要么制作一个单独的 canvas 元素并可能使用 ctxChar, ctxBG, ctxItems 等。使用 SVG，在另一方面，它是内置的。我什至可以在她的 <use> 标签中放置一个 <animate> 标签来改变她的 x 位置（或通过 js 手动改变它），以及另一个 <animate> 标签改变她的精灵。然后背景永远不必触及。
至于同时为一堆元素设置动画，我看不出 Canvas 比 SVG 快多少。将 svg 元素分组有什么问题？它会比重新绘制碰撞框的背景和为所有实体重新绘制实体本身慢吗？
编辑：我认为我真正的问题不是 SVG 是否可行，而是为什么人们认为它不行。
SVG V Canvas
作为一名专业的游戏创作者，如果您想创建基于浏览器的游戏，我的建议是远离 SVG。主要原因是它太慢了。第二个原因是它会使你作为程序员的工作更加困难，因为很难找到解决 SVG 性能不足的方法。第三个原因，因为它非常慢，而且游戏都是关于性能的。
本页将介绍 SVG 游戏设计 An Original Approach to Web Game Development Using SVG but before you dive in and read all of it have a look at the prototype of the game it`s all about Runes and Relics Prototype。我的书里有一点哦哼。
我确信还有其他尝试，这只是我搜索中的第一个。但是我从来没有玩过好的SVG游戏
那么 SVG 有什么用呢？图文资源。 SVG 是为您的游戏打包图像的好方法，一旦您在客户端上拥有它们，您就可以将它们渲染为位图，然后使用它们来渲染您的游戏。美妙之处在于您可以获得 SVG 的分辨率独立可伸缩性和小图像尺寸。但是通过在加载时将它们渲染为位图，您可以充分利用 GPU 来移动像素。 SVG 在游戏中使用太慢了。
为什么要使用Canvas？我想说是因为它很快，但当您将它与本机 C++ 应用程序进行比较时，情况并非如此，后者比等效的 Javascript / canvas 游戏快 运行 10*。快十倍是非常重要的，但是这样你就无法获得 Javascript.
带来的跨平台优势目前canvas是真正跨平台游戏应用的最佳选择。使用 2D 或 3D webGL，您可以构建全屏全帧率游戏。 HTML5 有一套很好的 API 可以满足所有游戏需求，而且很容易学习。
我不是游戏引擎的粉丝，它们是一个包罗万象的解决方案，是你和已经设计好的 API 之间的中间人，迫使你去做他们的（不是那么好）方法。但是他们会给你一个关于什么是可能的很好的概述。
Phaser 是一个 javascript canvas 游戏引擎，有很多资源和示例。这是一个很好的起点，看看可以做什么。不要被游戏引擎这样推销自己的事实所吸引。 HTML5 & JavaScript 是开箱即用的镇上最好的游戏引擎，运行 的本地代码，拥有庞大的用户和支持基础。您花在学习如何使用游戏引擎的 API 上的时间将不会花在学习如何使用 HTML5 API 的时间上（坦率地说 HTML5 APIs 是完美的，20 年浏览器大战的结果）这实际上比游戏引擎更容易使用和学习。