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

目前，我正在度过我的大部分时间向学生解释，爱好者，专业开发人员和教师如何使用HTML5构建的游戏。然后，我最近想，而不是保持所有这些细节的小观众，岂不是更聪明与大家分享呢？

那么这篇文章是根据我自己的经验。我可能会忽略一些重要的事情你们有些人可能知道。但我会尝试更新这个帖子，我自己新的发现，当然，根据您提供亲切的意见或通过反馈的Twitter 。

但为什么还有那么多的人目前在HTML5游戏感兴趣呢？

好了，只是因为今天我们真的可以用HTML5使用相同的代码到目标多平台 ：针对课程的台式机（与IE9 / IE10，火狐，Chrome，Opera和Safari），iOS和Android 平板电脑和手机和Windows 8 （和未来相关百万平板电脑和个人电脑的，也热烈欢迎HTML5游戏！我经常然后看到一些HTML5游戏项目移植到每一个平台上几乎没有力气。

更重要的是，再加上GPU硬件加速图形层的现代JavaScript引擎的性能使我们能够建立在HTML5伟大的游戏充满信心。

注意：我们将只谈<canvas> HTML5的标签和SVG左右这个文章。

Canvas和SVG：两种方式在屏幕上绘制

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

你需要构建第一个HTML5游戏之前，要了解的第一件事是如何在屏幕上绘制好的对象。有两种方法可以做到这一点，并更好地了解他们之间的分歧，应该通过阅读这篇文章从帕特里克Dengler（SVG的W3C工作组成员）开始：思考何时使用Canvas和SVG 。

你也应该看看从MIX11这两个伟大的会议 ：

- 现代化您的网站：SVG符合HTML5
- 深入探究HTML5 <画布>

一旦你已经审核了所有这些内容，你可能会更好地理解为什么几乎所有的HTML5游戏使用Canvas而不是SVG。帆布提供一个众所周知的开发模式为游戏开发者（低级别绘图API），现在很好的被大多数最新的浏览器的硬件加速。不过SVG，其基于矢量技术，自然是更好地武装到大规模跨设备而不失品位。你只需要使用SVG的魔力视框属性，它会处理，对于你。然后，您的游戏资产将从3扩展“至80”的屏幕在一个非常简单的方法！

有时，它甚至可以应用这些技术实现了完全相同的游戏。举例来说，在这里也是一样简单的游戏首先使用SVG然后帆布： SVG Racketball和帆布壁球。它们都是来自这个MSDN文档：编程简单的游戏使用帆布或SVG 。

在这种情况下，分析每个技术的性能可以帮助您确定要使用你的游戏是哪一个。例如，这里有两个有趣的实验，将显示使用SVG在屏幕上千个小丸子： 1000个球在SVG和使用Canvas：在画布中1000个球。在你喜欢的浏览器中测试这两个实验。在一般情况下，画布性能是借鉴了很多物体在屏幕上，在这种特殊情况下更好。但是，这通常也是我们希望在我们的视频游戏达到的目标。要使性能比较更直观，这里是一个有趣的图来看看：

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

但是，没有什么阻止你混合这两种技术 。事实上，我们可以完全想象使用基于SVG的第一层，以显示与使用游戏本身帆布背景中的第二层的游戏菜单。然后，您将使用我们所说的浏览器合成引擎。但是，你一定要真正重视最后的表现结果，因为浏览器和设备还远远没有在这个领域之中平等。不要忘了，HTML5的主要兴趣是针对所有平台。

我的同事大卫Catuhe创造了几个月前使用该组合物原理有点砖断路器游戏：如何编写使用HTML5和JavaScript的BrikBrok一个小游戏。第一层使用SVG的砖打破和背景可以显示使用画布标签的隧道效应。您可以完全模仿这一概念，以显示背景主游戏（托管的一些成熟或史密斯先生的游戏，等等），而不是隧道和你的第一层将只显示在SVG菜单和配置选项。

有用的库和工具

图像

手动编写SVG的XML节点，甚至与画布的低级API玩可能是一时好玩，但不是很高效。这里是那么的工具和库我像一个有用的一套可以帮助你建立你的HTML5游戏的一部分。

为了产生一些SVG，这里有一些很酷的工具 ：

- Inkscape的：一个*和开放源码的桌面软件
- SVG编辑器：直接在浏览器中运行的在线软件

Adobe Illustrator中还支持SVG作为出口目标，但它是一个有点贵。 ;-)

如果你正在寻找您的游戏资源（用于菜单或控制），你应该看看这个图书馆免费图标 ：该名词项目。所以，如果你不幸运地工作，一个设计师，它可以为您节省。有一些免费的SVG内容的另一个库也在这里：打开剪贴画库。

在结束对SVG，你必须知道被命名为最终库 RaphaelJS 。这是一个JavaScript库，可以帮助你生成动态SVG用几行代码。你会发现有很多很酷的演示使用例如非线性的SVG元素，动画图表等动画功能的网站上，但如果你的图表专门找（假设显示一些球员的统计数据），最终制图图书馆被命名为HighCharts 。这两个库是如此真棒，他们甚至实现VML的回退IE8或旧版本。但是，这不应该是担心，如果你正在构建HTML5游戏。你可能会针对至少IE9以上。

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

如果您想使用Canvas显示图表 ，我是一个巨大的风扇的JavaScript工具包InfoVis库。只要看看他们的网站上的演示，它只是真棒，简单易用。

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

让我们继续在显卡方面。有内置简化3D在JavaScript中的命名使用一个非常著名的图书馆ThreeJS 。在大多数情况下，它被用来通过WebGL的渲染一些硬件加速3D。但是你可以问HTML5的2D canvas元素中渲染。对于这一点，只需检查该网站的“CanvasRenderer示例”部分。这是我们使用，例如，建立我们的图书馆银河演示在IE测试驱动器。使用“CanvasRenderer”，你就可以建立3D场景中的所有HTML5的浏览器工作。的东西，可能是很好的了解。

注：我们也可以将所有的这些图形效果与CSS3 2D和3D变换加上使用过渡或动画在你的游戏。但我已经决定把注意力集中在Canvas和SVG在这篇文章。

物理引擎

当然，显示图形远未你需要在游戏中做的唯一任务。此外还有AI（人工智能），你需要的代码带来的生活你的角色。不幸的是，你需要将代码单独和创造性。但是，你会很高兴知道你并不需要你的游戏的物理和碰撞的部分忧虑。只是学会了如何使用Box2D的JS 。去发挥与各种样品，你会惊奇地发现：

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

如果你有兴趣这个主题，则应阅读的优秀教程系列赛斯拉德这里： Box2D的方向为JavaScript开发。赛斯甚至使用的Web工人来计算你的CPU的几个可用核物理。如果你不知道什么是Web Workers是，我已经写在这里，这些新的API的介绍：介绍HTML5的Web工作者：JavaScript的多线程方法。这可能是在为您的游戏某些情况下非常有用。

处理多点触摸事件

如果你想建立一个跨设备的游戏，你将不得不支持触摸。目前，大约有触摸事件的两个现有的规格。所以还没有正式的标准之一。如果你想知道多一点，为什么，这里是一个有趣的文章：获得暴躁关于专利

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

您需要在IE10和Windows 8以及来自苹果设备来执行工作正常编写代码。对于这一点，你一定要看看这个样品展示一个可能的模式，同时支持那种触摸事件：手指画及其相关文章：处理在所有浏览器多点触摸和鼠标输入。但如果你在检查多远，你现在可以通过处理内部IE10多点触控走有意思，测试这个很酷的演示：浏览器表面。你需要一个最近的IE10版本和多点触摸的硬件上运行它。

鲍里斯的SMU已经开始工作，他在一个名为库部分Pointer.js 。我们的想法是将所有类型的触摸（IE10，iOS的一样，鼠标和笔），以简化开发人员的生活。：你可以阅读他的文章有关，这里的跨设备的网页上输入广义。目前，图书馆只是一个草案，尚不支持IE10的MSPointer *。因此，随时作出贡献的项目，以帮助他！（我打算尽力帮助他，当我有一些空闲时间）

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

建立联网游戏

如果你想建立多人游戏或简单地连接到任何理由服务器的游戏，你会很自然有兴趣使用的WebSockets 。此W3C规范（和由IETF处理的底层协议）确实是稳定到足以开始在生产中使用。

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

但是，如果你想支持的用户尽可能多，你需要考虑浏览器或不支持WebSockets的设备后备又或支持旧的，过时的版本。我们可以梦想的解决方案喜欢自动回落到池或长池像IE9浏览器，并提供网络插座，以更近的浏览器，如IE10的旧方法。是的，难道还可能有一个唯一的编码处理的？

好了，不要妄想：社会上取得的。有两个解决方案，我知道这样做的：

-在Socket.IO库的Node.js
- 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是我认识的最框架，我不会是公正的。它是由你来测试他人，形成自己的观点。

一些初学者教程

那么，是纯粹的自大狂的我，让我跟大家分享我自己的教程开始。一年前，我很开心移植的XNA C＃，比赛进入HTML5 / JavaScript的感谢EaselJS。然后，我决定写三个初始教程分享这方面的经验：

- HTML5游戏：在画布与EaselJS动画精灵
- HTML5游戏：建设核心对象，并与EaselJS处理冲突
- HTML5平台游戏：在XNA游戏<画布>与EaselJS的完整端口

几个月后，我添加了其他三篇文章增强/延长了同样的游戏：

- 教程：如何创建的Windows Phone感谢的PhoneGap HTML5的应用程序，我会告诉你如何端口的Windows Phone感谢的PhoneGap /科尔多瓦在同一个游戏。但是，你将能够遵循同样的专为Android或iOS设备。
- 现代化您的HTML5画布游戏第1部分：硬件缩放和CSS3 ，我们将使用CSS3 3D变换，转换和网格布局，提升游戏体验
- 现代化您的HTML5画布游戏第2部分：离线API，支持拖放和文件API ，我们将能够播放在离线模式的游戏。你将甚至可以创建自己的水平，并直接拖放它们进入游戏。

跟随他们之后，你会建造这个游戏：

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

那么，从逻辑上讲，由于这六个教程，你应该能够编写自己的HTML5游戏你的目标无论浏览器或设备。

您还可以找到很多简单的演示，了解和伟大的教程EaselJS网站： http://www.createjs.com/#!/EaselJS以及每个框架的网站上面提到。

你还会发现在这些网站上比较通用教程：

- HTML5游戏开发教程
- 10个凉爽的HTML5游戏，以及如何创建自己的

最后，我想向你推荐两个“先进”的文章，但非常有启发性阅读。第一个是由David Catuhe从微软写道：发挥HTML 5 Canvas的用于游戏的动力。他将与大家分享一些优化，他在“演示”就像我们在“演示现场”被写入一个工作时发现的。发现能为你带来一些想法为自己的HTML5游戏的提示。第二个是再次以书面鲍里斯的SMU从谷歌：提高HTML5画布性能，它包含一吨的好建议。

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

再次，这是我个人最喜欢的。你可能会在网上找到共享上其他很酷的例子。不管什么游戏，你喜欢的，有趣的是，分析开发人员如何使他们。由于网络的神奇，你只需要右键点击“查看源文件”。即使代码将可能精缩，您仍然可以通过查看游戏的全球建筑学会了几个有趣的事情。

让我们通过使用EaselJS框架的一些作品开始。第一个是海盗爱雏菊书面格兰特斯金纳：

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

格兰特已经开始了他的EaselJS框架，同时建立这个HTML5游戏。

Windows 8的注意：你会发现你会发现这里在Windows应用商店中的Windows 8非常相同的游戏工作：海盗爱雏菊为Windows 8 。事实上，如果你有内部IE9或IE10一个HTML5游戏做工精细，构建Windows 8的版本几乎只是做一个简单的复制和粘贴！这场比赛将直接随后Windows 8的应用体验在里面工作。但是，为了使一个真正的好Windows 8的比赛中，你会也得讲究独特的Windows 8体验，我们正在构建。这说明如下：设计伟大的游戏为Windows

使用EaselJS另一场比赛是BKOM机器人游戏，它使用3D精灵我爱：

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