WebAssembly 是一项技术，它将在未来几年内改变我们所知的网络。WebAssembly 承诺实现一个基于 web 的应用以接近本机速度运行的世界。在这个世界里，你可以用你喜欢的任何语言为网络编写应用，并为本地平台和网络编译它。WebAssembly 现在还为时过早，但这项技术已经像火箭一样起飞了。如果你对网络的发展方向感兴趣，就像对今天一样，那就继续读下去吧！
我写这本书是为了反映我喜欢学习新技能的方式。我将引导你使用 WebAssembly 及其所有相关技术开发一款游戏。我是一名长期的游戏和网页开发人员，我一直喜欢通过写游戏来学习新的编程语言。在本书中，我们将使用与 WebAssembly 齐头并进的网络和游戏开发工具，在许多主题上覆盖许多领域。我们将学习如何利用过多的编程语言和工具来编写以 WebAssembly 为目标的游戏，包括 Emscripten、C/C++、WebGL、OpenGL、JavaScript、HTML5 和 CSS。作为一家专门从事网络游戏开发的独立游戏开发工作室的长期所有者，我发现对网络和游戏技术有广泛的了解是至关重要的，我已经把这本书塞满了它们。您将学习一系列技能，重点是使用 WebAssembly 启动和运行您的应用。如果你想学习如何用 WebAssembly 开发游戏，或者如果你想创建速度极快的基于 web 的应用，这本书就是为你准备的。
这本书不是编程入门。它是为那些知道如何用至少一种编程语言编码的人设计的。至少对一些基于网络的技术(如 HTML)有一个初步的了解是有帮助的，但不是绝对必要的。这本书包含了如何在 Windows 或 Ubuntu Linux 上安装所需工具的说明，在这两者中，我会推荐使用 Ubuntu，因为它的安装过程要简单得多。
第 1 章WebAssembly 和 Emscripten 简介介绍了 web assembly，为什么 web 需要它，为什么它比 JavaScript 快这么多。我们将介绍 Emscripten，为什么我们需要它来进行 WebAssembly 开发，以及如何安装它。我们还将讨论与 WebAssembly 相关的技术，例如 asm.js、LLVM 和 WebAssembly Text。
第二章、 HTML5 和 WebAssembly 讨论了 WebAssembly 模块如何使用 JavaScript“粘合代码”与 HTML 集成。我们将学习如何创建自己的 Emscripten HTML shell 文件，我们还将学习如何调用我们的 WebAssembly 模块，我们将用 c 语言编写该模块。最后，我们将学习如何编译和运行一个与我们的 WebAssembly 模块交互的 HTML 页面，我们还将学习如何使用 Emscripten 构建一个简单的 HTML5 Canvas 应用。
第 3 章、WebGL 介绍，介绍 WebGL 以及支持它的新画布上下文。我们将了解着色器，它们是什么，以及 WebGL 如何使用它们将几何图形渲染到画布上。我们将学习如何使用 WebGL 和 JavaScript 在画布上绘制一个精灵。最后，我们将编写一个集成了 WebAssembly、JavaScript 和 WebGL 的应用，显示一个精灵并在画布上移动它。
第 4 章、与 SDL 的 WebAssembly 中的雪碧动画，教你关于 SDL 库，以及我们如何使用它来简化从 WebAssembly 到网络 GL 的调用。我们将学习如何使用 SDL 渲染，动画和移动 HTML5 画布上的精灵。
第 5 章、键盘输入，介绍如何从 JavaScript 中获取键盘输入并调用 WebAssembly 模块。我们还将学习如何在我们的 WebAssembly 模块中使用 SDL 接受键盘输入，并使用输入在 HTML5 画布上移动精灵。
第六章、游戏物件和游戏循环，探索一些基本的游戏设计。我们将了解游戏循环，以及 WebAssembly 中的游戏循环与其他游戏有何不同。我们还将学习游戏对象以及如何在游戏中创建对象池。我们将以编写游戏开始的代码来结束这一章，两个宇宙飞船在画布上移动并互相发射炮弹。
第七章碰撞检测，将碰撞检测引入我们的游戏。我们将探索 2D 碰撞检测的类型，实现一个基本的碰撞检测系统，并了解一些使其工作的三角学知识。我们将修改我们的游戏，这样当飞船相撞时，投射物就会摧毁它们。
第八章基础粒子系统，介绍粒子系统，讨论它们如何在视觉上提升我们的游戏。我们将讨论虚拟文件系统，并学习如何通过网页向其中添加文件。我们将简要介绍 SVG 和 Vector graphics，以及如何将它们用于数据可视化。我们将进一步讨论三角学，以及如何在我们的粒子系统中使用它。我们将构建一个新的 HTML5 WebAssembly 应用，它将帮助我们配置和测试粒子系统，我们稍后会将其添加到我们的游戏中。
第 9 章、改进粒子系统通过添加粒子缩放、旋转、动画和颜色过渡来改进我们的粒子系统配置工具。我们将修改工具以允许粒子系统循环，并添加一个爆发效果。然后我们将更新我们的游戏来支持粒子系统，并为我们的发动机排气和爆炸增加粒子系统效果。
第十章、 AI 和转向行为，介绍了 AI 和游戏 AI 的概念，讨论了两者的区别。我们将讨论有限状态机、自主代理和转向行为的 AI 概念，我们将在敌人 AI 中实现这些行为，这将避免障碍并与玩家战斗。
第十一章设计一台 2D 相机，引入了 2D 相机设计的概念。我们将首先在我们的游戏中添加一个渲染管理器，并创建一个锁定玩家飞船的摄像头，跟随它在一个扩大的游戏区域内移动。然后，我们将添加先进的 2D 相机功能的投影焦点和相机吸引。
第 12 章、音效 FX ，涵盖了 SDL 音频在我们游戏中的使用。我们将讨论在哪里可以在线获得声音效果，以及如何将这些声音包含在我们的 WebAssembly 模块中。然后我们将在游戏中加入音效。
第十三章游戏物理，介绍了电脑游戏中的物理概念。我们将在游戏对象之间增加弹性碰撞。我们将以宇宙飞船发射射弹时的后坐力形式，将牛顿第三定律加入到我们的游戏物理中。我们将在我们的恒星上增加一个引力场来吸引宇宙飞船。
第 14 章、用户界面和鼠标输入，讨论了在我们的 WebAssembly 模块中添加一个要管理和呈现的用户界面。我们将收集需求，并将其转化为我们游戏的新屏幕。我们将添加一个新的按钮对象，并学习如何使用 SDL 在我们的 WebAssembly 模块中管理鼠标输入。
第 15 章着色器和 2D 照明，深入探讨如何创建一个混合了 OpenGL 和 SDL 的新应用。我们将创建一个新的着色器，将多个纹理加载并渲染到一个四边形中。我们将学习普通地图，以及如何使用普通地图来近似 2D 的 Phong 照明模型，在我们的 WebAssembly 模块中使用 OpenGL。
第十六章、调试和优化，介绍了调试和优化 WebAssembly 模块的基本方法。我们将从调试宏和 WebAssembly 的堆栈跟踪开始。我们将介绍源映射的概念以及网络浏览器如何使用它们来调试 WebAssembly 模块。我们将学习如何使用优化标志来优化 WebAssembly 代码。我们将讨论使用分析器来优化我们的 WebAssembly 代码。
你必须了解计算机编程的基础知识。
对网页技术如 HTML 和 CSS 有一个基本的了解是有帮助的。
你可以从这里下载这本书的代码包:https://github . com/packt publishing/动手游戏-用 WebAssembly 开发。
我们还有来自 https://github.com/PacktPublishing/丰富的书籍和视频目录的其他代码包。看看他们！
我们还提供了一个 PDF 文件，其中包含本书中使用的截图/图表的彩色图像。可以在这里下载:https://www . packtpub . com/sites/default/files/downloads/9781838644659 _ color images . pdf。
你可以从你在www.packt.com的账户下载这本书的示例代码文件。如果您在其他地方购买了这本书，您可以访问www.packt.com/support并注册将文件直接通过电子邮件发送给您。
您可以按照以下步骤下载代码文件:
-
登录或注册www.packt.com。
-
选择“支持”选项卡。
-
点击代码下载和勘误表。
-
在搜索框中输入图书的名称，并按照屏幕指示进行操作。
下载文件后，请确保使用最新版本的解压缩文件夹:
- 视窗系统的 WinRAR/7-Zip
- zipeg/izp/un ARX for MAC
- 适用于 Linux 的 7-Zip/PeaZip
这本书的代码包也在 GitHub 上的https://GitHub . com/packt publishing/hand-On-Game-Development-with-WebAssembly托管。如果代码有更新，它将在现有的 GitHub 存储库中更新。
我们还有来自丰富的图书和视频目录的其他代码包，可在**【https://github.com/PacktPublishing/】**获得。看看他们！
本书通篇使用了许多文本约定。
CodeInText:表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟网址、用户输入和推特句柄。这里有一个例子:“我们将把basic_particle_shell.html文件复制到一个新的 shell 文件中，我们称之为advanced_particle_shell.html
代码块设置如下:
<label class="ccontainer"><span class="label">loop:</span>
<input type="checkbox" id="loop" checked="checked">
<span class="checkmark"></span>
</label>
<br/>当我们希望将您的注意力吸引到代码块的特定部分时，相关的行或项目以粗体显示:
<label class="ccontainer"><span class="label">loop:</span>
<input type="checkbox" id="loop" checked="checked">
<span class="checkmark"></span>
</label>
<br/>任何命令行输入或输出都编写如下:
emrun --list_browsers粗体:表示一个新的术语，一个重要的单词，或者你在屏幕上看到的单词。例如，菜单或对话框中的单词像这样出现在文本中。下面是一个示例:“从管理面板中选择系统信息。”
Warnings or important notes appear like this. Tips and tricks appear like this.
我们随时欢迎读者的反馈。
一般反馈:如果你对这本书的任何方面有疑问，在你的信息主题中提到书名，发邮件给我们customercare@packtpub.com。
勘误表:虽然我们已经尽了最大的努力来保证内容的准确性，但是错误还是会发生。如果你在这本书里发现了一个错误，如果你能向我们报告，我们将不胜感激。请访问www.packt.com/submit-errata，选择您的图书，点击勘误表提交链接，并输入详细信息。
盗版:如果您在互联网上遇到任何形式的我们作品的非法拷贝，如果您能提供我们的位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com联系我们，并提供材料链接。
如果你有兴趣成为一名作者:如果有一个你有专长的话题，你有兴趣写或者投稿一本书，请访问authors.packtpub.com。
请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在的读者可以看到并使用您不带偏见的意见来做出购买决定，我们在 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们的书的反馈。谢谢大家！
更多关于 Packt 的信息，请访问packt.com。