一、入门指南
欢迎使用 HTML5 游戏设计师工具包！这本书是制作各种 2D 动作游戏所需的最有用技术的基本指南。它涵盖了经典的开发实践、工具、算法和架构，包括以下内容:
-
如何使用地图编辑器设计游戏关卡(第章第 2 )。
-
使用基于图块的技术进行有效的碰撞检测(第 3 章)。
-
设计等距游戏地图和等距游戏中的碰撞检测(第章第 4 )。
-
基于磁贴的游戏的惊人效率，以及你可以用它们做的一些令人惊讶的事情(第 7 章)。
这些都是你需要知道的技术，来创造几乎任何类型的游戏。
你需要知道的是
你是游戏设计师！而且，你需要对 JavaScript 和 HTML5 技术有一个合理的流畅度。如果你正在读这本书，那么你已经制作了一些游戏，并且有了一个你乐于使用的工具集或游戏引擎。您知道如何制作精灵、运行游戏循环、测试碰撞、编写游戏逻辑以及处理用户输入。您还应该对向量数学有所了解:如何计算向量，对向量进行归一化，以及从其他向量创建新的向量。
注意
如果你不知道这些事情，或者需要复习，拿一本《HTML5 和 JavaScript 的基础游戏设计(T0)》(a press，2012 年)、《T2》html 5 和 JavaScript 的高级游戏设计(T3)(a press，2015 年)、《T4》学习 pixi js(T5)(a press，2015 年)。这三本书会教你所有你需要知道的东西。
这本书完全不知道你用哪种技术来制作游戏。源代码是用 JavaScript 编写的，使用了一个简单的 2D HTML5 游戏引擎，名为 Hexi。然而，代码示例纯粹是一种伪代码，可以应用于任何其他编程语言或游戏引擎。你使用什么游戏引擎或显示列表框架并不重要——你可以将本书中的概念应用于其中任何一个。本书中关于代码的重要内容是算法、高级概念和代码注释，而不一定是实现细节。无论您选择哪种技术，我都将这些留给您。
你需要做的就是确保你使用的技术有一个完整的层次场景图(也称为显示列表)。这意味着你可以制造精灵，并把它们作为父精灵的子精灵来嵌套。而且，您的技术需要某种方式让您在游戏精灵上引用以下属性(值以像素为单位，除非另有说明):
-
gx :精灵的全局水平位置，相对于游戏屏幕的左上角。
-
gy :精灵的全局垂直位置，相对于游戏屏幕的左上角。
-
x:sprite 的局部水平位置，相对于 sprite 父级的左上角。
-
y :精灵的局部垂直位置，相对于游戏屏幕的左上角。
-
宽度:精灵的宽度。
-
高度:精灵的高度。
-
halfWidth :精灵宽度的一半。
-
halfHeight :精灵高度的一半。
-
scaleX :精灵的水平刻度(作为 0 到 1 之间的归一化值)。
-
scaleY :精灵的垂直比例(0 到 1 之间的归一化值)。
-
centex:精灵的中心 x 位置。
-
中心:精灵的中心 y 位置。
-
旋转:精灵旋转的角度，以弧度为单位。
-
alpha :精灵的透明度(0 到 1 之间的归一化值)。
-
vx :精灵的垂直速度。
-
vy :精灵的水平速度。
-
层:sprite 在显示栈中的位置(0 为底层)。
你还需要一些方法将精灵组合到一个父容器中，以及一些帮助你管理这些的函数:
-
group :将精灵分组到一个父容器中。
-
addChild :将 sprite 添加为另一个 sprite 或容器的子对象。
-
removeChild :从父 sprite 或容器中移除 sprite。
这些是你制作任何你能想到的 2D 游戏所需要的唯一的精灵属性和函数。尽管名字可能不同，但是你使用的任何 2D 游戏开发工具都会让你以某种方式访问这些属性和功能。只要在你正在使用的工具中识别它们，你就能利用本书中的代码。
河西和嘎
本书中的大部分源代码都是使用极简的 2D HTML5 游戏引擎 Hexi 编写的。它是由我设计的，作为一个工具，在编写最少代码的同时，制作尽可能多的游戏。您可以在这里找到您需要了解的关于河西的所有信息，包括详细的教程和示例:
github.com/kittykatattack/hexi
如果您对本书中代码的具体实现有任何疑问，请参考该链接。(本书源代码基于河西 v.0.1)。
河西还有个小姐姐，叫嘎。
github.com/kittykatattack/ga
Ga 的 API 和 Hexi 的是一样的，但是代码库几乎小了 10 倍。这怎么可能呢？因为它使用了一个极其轻量级的基于画布的渲染器，没有 WebGL。事实上，Ga 是专门编写的，以便其核心可以压缩到 6.5k 以下，使其成为用于微型游戏比赛的合适工具，如每年的 JS13K 赛事(js13kgames.com)。这也是了解低级图形渲染的一个很好的方式，而不必处理 WebGL 通常不必要的复杂性。
如果你想知道 Hexi 或 Ga 如何工作的内部细节，或者想从头开始构建自己的定制游戏引擎，你可以在本书的配套资料使用 HTML5 和 JavaScript 的高级游戏设计中找到你需要知道的一切。Ga 其实只是那本书里开发的代码的生产级版本。而 Hexi 只是同一 API 的一个实现，带有一个运行于幕后的基于 pix ijs(web GL)的渲染器。
源代码
你可以在这里找到这本书的所有源代码:
github.com/kittykatattack/agdt
代码被组织成几章。只需克隆存储库，在根目录中启动 web 服务器，并在您喜欢的浏览器中打开示例。
所有示例代码都是用 JavaScript 的最新版本 current:ES6/7(也称为 JavaScript 2016/17)编写的。)编写这段代码时，这些标准还很新，还没有浏览器供应商完全实现它们。如果你处于同样的位置，我建议你使用 JavaScript ES6 transpiler，比如 Babel (babeljs.io)将 ES6 源代码编译成生产就绪的 ES5。在所有源代码示例文件中，您会发现一个名为 src 的文件夹包含 ES6 源代码，还有一个名为 bin 的文件夹包含转换后的 ES5。
版权属于：月萌API www.moonapi.com，转载请注明出处
