canvas中使用svg_使用Canvas和SVG构建HTML5游戏的完整指南

canvas中使用svg

我目前大部分时间都在向学生，业余爱好者，专业开发人员和老师讲解如何使用HTML5制作游戏。 然后，我最近认为，与其将所有这些详细信息保留给小观众，不如与您共享它会更聪明吗？

然后，本文将基于我自己的经验。 我可能会忽略一些重要的事情，你们中有些人可能知道。 但是，我将尝试用我自己的新发现来更新此帖子，并且当然要根据您在评论中或通过Twitter提供的反馈来进行。

但是，为什么现在有这么多人对HTML5游戏感兴趣？

好吧，仅仅因为今天我们可以使用相同的代码真正使用HTML5定位多平台 ：当然是台式机（使用IE9 / IE10，Firefox，Chrome，Opera和Safari），iOS和Android 平板电脑以及手机和Windows 8 （以及与之相关的数以百万计的平板电脑和PC）也热烈欢迎HTML5游戏！然后，我经常看到一些HTML5游戏项目几乎毫不费力地移植到了每个平台上。

此外，现代JavaScript引擎的性能以及GPU硬件加速的图形层使我们充满信心地用HTML5构建出色的游戏。

注意：本文仅讨论HTML5的<canvas>标签和SVG。

画布和SVG：在屏幕上绘画的两种方法

在构建第一个HTML5游戏之前，您需要了解的第一件事是如何在屏幕上绘制漂亮的对象。 有两种方法可以做到并更好地理解它们之间的差异，您应该首先阅读Patrick Dengler（SVG W3C工作组成员）的这篇文章： 关于何时使用Canvas和SVG的想法 。

您还应该查看MIX11的这两场精彩的会议 ：

– 网站现代化：SVG符合HTML5
– 深入HTML5 <canvas>

阅读完所有这些内容后，您可能会更好地理解为什么几乎所有HTML5游戏都使用Canvas而不是SVG。 Canvas为游戏开发人员提供了一种众所周知的开发模型（低级绘图API），现在大多数最新的浏览器都对其进行了硬件加速。 仍然，SVG及其基于矢量的技术自然可以更好地跨设备扩展，而不会降低质量。 您只需要使用SVG的神奇ViewBox属性即可为您处理。 然后，您的游戏资源将以一种非常简单的方式从3英寸屏幕扩展到80英寸屏幕！

有时，甚至可以使用两种技术来实现完全相同的游戏。 例如，这是相同的简单游戏，首先使用SVG，然后使用Canvas： SVG Racketball和Canvas Racquetball 。 它们都来自此MSDN文档： 使用Canvas或SVG编写简单游戏 。

在这种情况下，分析每种技术的性能可以帮助您决定在游戏中使用哪种技术。 例如，这是两个有趣的实验，它们将使用SVG在屏幕上显示一千个小球：SVG中为1000个球，而Canvas：Canvas中为1000个球 。 在您喜欢的浏览器中测试两个实验。 通常，在这种情况下，Canvas性能对于在屏幕上绘制许多对象更好。 但这通常也是我们在视频游戏中想要达到的目标。 为了更好地了解性能比较，下面是一个有趣的图表：

但是没有什么可以阻止您混合使用这两种技术 。 确实，我们可以完全想象使用基于SVG的第一层在游戏菜单中使用画布来显示游戏菜单，并在第二层中使用画布来显示游戏菜单。 然后，您将使用我们所谓的浏览器合成引擎。 但是，您必须特别注意最终的性能结果，因为浏览器和设备在此领域远非平等。 不要忘记HTML5的主要兴趣是针对所有平台。

我的同事David Catuhe几个月前就使用这种合成原理创建了一个小小的破砖游戏： 如何使用HTML5和JavaScript–BrikBrok编写小型游戏 。 第一层使用SVG打破砖块，背景可以使用canvas标签显示隧道效果。 您可以完美地模仿此概念，而不是在隧道中在后台显示主要游戏（托管平台游戏或射击游戏等），而第一层将仅显示SVG中的菜单和配置选项。

有用的库和工具

图形

手动编写SVG的XML节点，甚至使用Canvas的低级API都可能会很有趣，但是效率却不高。 这是一组有用的工具和库，我喜欢这些工具和库可以帮助您构建HTML5游戏的一部分。

要生成一些SVG ，这里有一些很酷的工具 ：

– InkScape ：免费的开源桌面软件
– SVG编辑器 ：直接在浏览器内部运行的在线软件

Adobe Illustrator还支持将SVG用作导出目标，但价格昂贵一些。 ;-)

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

如果您正在寻找游戏资产（用于菜单或控件），则应查看以下免费图标库 ： Noun Project 。 因此，如果您不足够幸运与设计师合作，则可以节省您的费用。 这里还有另一个带有一些免费SVG内容的库： Open Clip Art Library 。

总结SVG，您必须知道的终极库名为RaphaelJS 。 这是一个JavaScript库，可以帮助您用几行代码生成动态SVG。 您可以在网站上找到很多很酷的演示，例如使用SVG元素上的非线性动画功能，动画图表等。但是，如果您正在专门寻找图表 （比如显示一些玩家的数据），那么最终的图表库名为HighCharts 。 这两个库非常棒，以至于它们甚至为IE8或更旧的版本实现了VML后备。 但是，如果您要构建HTML5游戏，则不必担心。 您可能会针对至少IE9及更高版本。

如果您想使用Canvas显示图表 ，那么我非常喜欢JavaScript InfoVis Toolkit库。 只需在他们的网站上查看演示，它就非常棒且易于使用。

让我们继续在图形方面。 有一个非常著名的库，用于简化JavaScript中名为ThreeJS 的3D使用 。 大多数时候，它用于通过WebGL渲染一些硬件加速的3D。 但是您可以要求在HTML5的2D canvas元素内进行渲染。 为此，只需检查站点的“ CanvasRenderer示例”部分。 例如，这是我们用来在IE Test Drive上构建Galactic演示的库。 然后，使用“ CanvasRenderer”，可以构建在所有HTML5浏览器中均可使用的3D场景。 可能有些好消息。

注意：我们还可以将所有这些图形效果与CSS3 2D和3D变换以及游戏中的过渡或动画结合使用。 但是在本文中，我决定继续专注于Canvas和SVG。

物理引擎

当然，显示图形绝不是您在游戏中要做的唯一任务。 您还需要编码才能使角色栩栩如生的AI（人工智能）。 不幸的是，您将需要单独编写代码并发挥创造力。 但是您将很高兴知道您不必担心游戏中的物理和碰撞部分。 只需学习如何使用Box2D JS即可 。 玩各种样本，您会感到惊讶：

如果您对此主题感兴趣，则应在此处阅读Seth Ladd撰写的精彩教程系列： JavaScript开发人员的Box2D方向 。 Seth甚至使用Web Workers在CPU的几个可用内核上计算物理量。 如果您不知道Web Worker是什么，那么我在这里对这些新的API进行了介绍 ： HTML5 Web Workers简介：JavaScript多线程方法 。 在某些情况下，这可能对您的游戏很有用。

处理多点触控事件

如果您想构建跨设备游戏，则必须支持触摸。 当前，关于触摸事件有两个现有的规范。 因此，尚无官方标准。 如果您想进一步了解原因，这里有一篇有趣的文章： 专利问题

您将需要编写在IE10和Windows 8以及Apple设备的实现中都能正常运行的代码。 为此，您肯定应该看一下该示例，该示例演示了支持两种触摸事件的可能模式： Finger Painting及其相关文章： 在所有浏览器中处理多点触摸和鼠标输入 。 但是，如果您对通过处理IE10中的多点触摸现在可以走多远感兴趣，请测试此炫酷的演示： Browser Surface 。 您需要最新的IE10版本和运行它的多点触摸硬件。

Boris Smus已开始在名为Pointer.js的库中工作。 想法是合并所有类型的触摸（IE10，类似iOS的鼠标和笔）以简化开发人员的生活。 您可以在这里阅读有关他的文章： 跨设备网络上的通用输入 。 当前，该库只是一个草稿，尚不支持IE10的MSPointer *。 因此，随时为该项目做出贡献以帮助他！ （我计划在空闲时尝试帮助他）

建立联网游戏

如果您出于任何原因想要构建多人游戏或仅仅是连接到服务器的游戏，您自然会对WebSockets感兴趣。 这个W3C规范（以及IETF处理的基础协议）确实足够稳定，可以开始在生产中使用。

但是，如果您想支持尽可能多的用户，则需要考虑对尚不支持WebSockets或不支持旧版本的浏览器或设备进行回退。 我们可能梦dream以求的解决方案包括自动回退到IE9之类的浏览器的旧池化或长池化方法，以及为IE10之类的最新浏览器提供Web套接字。 是的，是否有可能具有独特的代码处理能力？

好吧，别做梦了：社区做到了。 我知道有两种解决方案：

– Node.js的Socket.IO库
– SignalR在IIS和ASP.NET 之上运行

这两个库都将帮助您处理具有各种支持级别的所有浏览器和设备。

一些游戏框架

要构建2D HTML5游戏，您需要注意以下几点：

1 – 处理精灵 ：将它们拆分为一个序列，对其进行动画处理，效果等。
2 – 处理声音和音乐 （在HTML5中这并不总是那么容易！）
3 –通过专用的加载器/资产管理器从Web服务器异步加载资产
4 –构建碰撞引擎 ，游戏对象的高级逻辑等。

好吧，您可以从头开始，也可以测试和查看其他杰出的开发人员已经在网络上完成的工作。 我绝对建议您选择第二种方法，因为JS游戏框架开始真正成熟并在生产游戏中进行测试。

由于有一吨在网络上JS游戏框架（当然，有一吨的东西实际上.JS），这里是构建HTML5 2D游戏中的所有浏览器中工作最知名的框架：

– MelonJS ：一个免费的框架，提供许多有用的服务。 它的主要优点是可以与“ 平铺的地图编辑器”工具配合使用。
–很不幸，我不太了解CraftyJS
– ImpactJS ：高质量的知名框架。 它不是免费的，但也不算太贵。
– EaselJS ：我最喜欢的一个！ 由旧的Flash开发人员撰写。 因此，如果您已经用Flash编写了一些游戏，那么您应该对这个框架有家的感觉。 它是CreateJS套件的一部分。 它非常完整，有据可查，而且是免费的。

因此，现在应该警告您。 因为EaselJS是我最了解的框架，所以我不会保持公正。 由您来测试其他人并形成您自己的意见。

一些初学者的教程

好吧，我是纯粹的狂人症，让我从与您分享我自己的教程开始。 一年前，由于使用了EaselJS，我将XNA C＃游戏移植到HTML5 / JavaScript中感到很开心。 然后，我决定编写三个初始教程来分享这种经验：

– HTML5游戏：使用EaselJS在Canvas中动画精灵
– HTML5游戏：构建核心对象并使用EaselJS处理冲突
– HTML5 Platformer：使用EaselJS将XNA游戏的完整端口移植到<canvas>

几个月后，我添加了其他三篇文章来增强/扩展同一游戏：

– 教程：感谢使用PhoneGap ， 如何在Windows Phone上创建HTML5应用程序；在这里，我将向您展示如何通过PhoneGap / Cordova在Windows Phone上移植相同的游戏。 但是您将能够针对Android或iOS设备遵循相同的说明。
– 更新HTML5 Canvas游戏的第1部分：硬件缩放和CSS3 ，我们将使用CSS3 3D转换，过渡和网格布局来增强游戏体验
– 更新HTML5 Canvas游戏的第2部分：离线API，拖放和File API ，我们将允许在离线模式下玩游戏。 您甚至可以创建自己的关卡并将其直接拖放到游戏中。

关注他们之后，您将构建这个游戏：

好吧，从逻辑上讲，由于这六个教程，无论您要定位的浏览器还是设备，您都应该能够编写自己HTML5游戏。

您还可以在EaselJS网站（ http://www.createjs.com/#!/EaselJS ）以及上述每个框架的网站上找到许多易于理解的简单演示和出色的教程。

您还可以在这些站点上找到更多通用教程：

– HTML5游戏开发指南
– 10个很棒HTML5游戏以及如何创建自己的游戏

总而言之，我想向您推荐另外两篇“高级”文章，但对阅读很有帮助。 第一个由Microsoft的David Catuhe编写： 释放HTML 5 Canvas用于游戏的功能 。 他将与您分享他在进行“演示”时发现的一些优化，例如我们在“演示场景”中编写的优化。 找到的技巧可以为您自己HTML5游戏带来一些想法。 第二篇再次由Google的Boris Smus撰写：“ 改善HTML5画布性能” ，其中包含大量好的建议。

一些有趣的在线工作游戏和体验反馈

同样，这是我个人的最爱。 您可能会在网络上找到其他很棒的示例进行共享。 无论您喜欢哪种游戏，分析开发人员的制作方式都很有趣。 借助网络的魔力，您只需右键单击并“查看源代码”。 即使代码可能精简了，您仍然可以通过查看游戏的全局架构来学习一些有趣的东西。

让我们从使用EaselJS框架的一些产品开始。 第一个是Grant Skinner撰写的《 海盗爱情雏菊》 ：

Grant在构建此HTML5游戏时已启动了EaselJS框架。

Windows 8注意：您会发现在Windows商店的Windows 8中可以找到与Windows 8相同的游戏： Pirates Love Daisies for Windows 8 。 的确，如果您HTML5游戏在IE9或IE10内运行良好，则构建Windows 8版本几乎只能进行简单的复制和粘贴！ 然后，该游戏将直接在Windows 8 App体验中运行。 但是要制作出真正好的Windows 8游戏，您还必须注意我们正在构建的独特Windows 8体验。 在此进行描述： 为Windows设计出色的游戏

使用EaselJS的另一款游戏是BKOM ROBOT GAME ，它使用了我喜欢的3D精灵：

当前最著名的两个HTML5游戏是《 愤怒的小鸟》 （它使用了我上面提到的Box2D库）：

切绳子 ：

您还可以在Windows商店中找到它的Windows 8版本： Windows 8的割断绳索

移植到Windows 8非常简单。过程如下：

1 –将Web版本复制/粘贴到Windows 8HTML5 Style App项目中
2 –添加触摸支持
3 –添加对快照视图的支持并暂停游戏
4 –构建一些高分辨率资产（ 1366×768和1920×1080 ），以为所有传入的Windows 8平板电脑和PC提供最佳体验。

我也喜欢“ Cut The Rope”的故事。 阅读非常有趣。 这是用Objective-C为Apple iOS设备编写的成功游戏。 它已移植到HTML5 / Canvas中。

我也很高兴阅读以下经验反馈： WoogaHTML5 Adventure 。

最后，这里列出了40种或多或少的优秀HTML5游戏 ： 40种由HTML5提供支持的 令人 上瘾的网络游戏以及一些其他可用的HTML5游戏 ： HTML5games.com

现在，我希望所有这些资源将帮助您构建自己HTML5游戏 。 如果您这样做，并且/或者如果您有任何建议要分享的好的框架/教程/概念，请与我分享您的想法！

如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Learn HTML5 。

翻译自: https://www.sitepoint.com/the-complete-guide-to-building-html5-games-with-canvas-and-svg/

canvas中使用svg