使用 JavaScript 创建简单的 Windows 8 游戏：第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
5.00/5 (6投票s)
这是本系列文章的第二篇，将向您展示如何创建（一个非常）简单的 Windows 8 游戏。
欢迎随时查看 Chris Bowen 的博客：http://blogs.msdn.com/cbowen
创建简单的 Windows 8 游戏系列
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 1 部分 – Windows 8 应用基础
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 3 部分 – 游戏逻辑
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 4 部分 – 输入与声音
这是本系列文章的第二篇，将向您展示如何创建（一个非常）简单的 Windows 8 游戏。我们将使用 HTML5、JavaScript、WinJS 以及一些来自 CreateJS 的有用库。
- 第 1 部分 – Windows 8 应用基础知识
- 第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
- 第 3 部分 – 游戏逻辑
- 第 4 部分 – 输入与声音
游戏基于 XNA 示例游戏 "Catapult Wars Lab"。我们将重用该游戏中的资源，开发一个基于 Web 技术的新版本，用于 Windows 8。
第一篇文章简要介绍了基本 Windows 8 Metro 风格应用中的活动部件。在本篇文章中，我们将正式开始创建游戏。如果您是游戏开发新手，请花些时间阅读 Ed Donahue 的游戏开发 101 系列文章。
我们要构建什么？
以下是原始 XNA 版本中的游戏外观
我们不会介绍所有这些功能的添加，但我们会接近！
添加资源
除非您正在创作下一款伟大的文字冒险游戏，否则您可能需要一些图像和声音。在本例中，我们使用的是 "Catapult Wars Lab" 2D 示例游戏中已创建好的资源。本教程是为 XNA 开发的，但我们想要 JavaScript，所以让我们获取图形和声音，然后开始编码！
- 启动 Visual Studio 2012，创建一个名为“CatapultWars”的项目，使用 JavaScript ->“Windows Metro 风格”模板中的“空白应用”模板。
- 下载并解压 "Catapult Wars Lab" 示例 (CatapultWars_4_0.zip)
- 在 Windows 资源管理器中查看文件夹，选择并拖动 /Assets/Media/Textures 文件夹下的所有四个文件夹，然后在 Visual Studio 中将它们放置在 images 文件夹下。（这将复制并将它们添加到项目中。）
- 在项目根目录下创建一个名为“sounds”的新文件夹。
- 将 /Assets/Media/Sounds 中的文件复制到新的“sounds”文件夹。
您的项目应如下所示
现在我们有了一些资源，让我们开始使用它们。
启动屏幕与徽标
请注意，当您运行游戏时，首先看到的是一个方块中的“X”？ 那就是启动屏幕，默认显示 /images/splashscreen.png 图像，但我们可以做得更好。要调整启动屏幕，请双击 package.appxmanifest
我们想要使用的文件是 /images/Backgrounds/gameplay_screen.png，但该图像的尺寸必须是 620x300 像素。因此，用您喜欢的编辑器打开该图像，调整尺寸并另存为“title_screen_620x300.png”。将新文件添加到项目中。
现在，我们可以将“Splash screen”字段设置为 images\Backgrounds\title_screen_620x300.png。既然在这里，请选择任何您喜欢的背景颜色来搭配该图像（例如，“darkGray”）。现在运行时，游戏将显示一个新启动屏幕。
我们还可以调整应用的磁贴，默认情况下它看起来像这样
同样在应用清单中，我们看到有多个放置徽标的位置。我们可以添加 150x150、310x150 和 30x30 的徽标，用于各种地方。
现在我们有了方形和宽幅的自定义磁贴
看起来不错！ 现在只希望我们有一个游戏可以玩……
添加 HTML5 Canvas
首先，我们需要一个地方来显示游戏。HTML5 canvas 元素本质上是一个像素沙盒，您可以对其进行动态绘制。我们将使用 canvas 来渲染游戏，因此需要将其添加到我们的 HTML 页面中。打开 default.html 并用 canvas 标签替换第 17 行（“Content goes here”行），使其如下所示
通常，您需要指定宽度和高度，并在 canvas 不受支持的情况下添加回退内容，但我们稍后会设置宽度/高度，并且我们知道 canvas 将会得到支持。然而，这只是您应该考虑编码实践的众多情况之一，以防您想将部分应用代码重用为传统的 Web 应用程序 – 但那是另一系列文章的故事……
使用 CreateJS 使事情变得更容易
那么，我们如何添加背景和弹射器等元素呢？与 HTML 内容不同，canvas 内容完全通过 JavaScript 指令创建。有关基础知识，请参阅 MSDN 上的 “如何绘制 HTML5 canvas”。
当然，我们可以直接使用 canvas 方法来绘制游戏，但有许多 JavaScript 库可以提供帮助，包括非常适合游戏开发的库。 CreateJS 是一组 JavaScript 库和工具，包括 EaselJS、PreloadJS 等。我们将在游戏中使用它们，所以请 下载 EaselJS 和 PreloadJS，为它们创建一个新文件夹，如 /js/CreateJS，并将脚本（来自“lib”文件夹）复制到其中，如下所示
将 JavaScript 文件添加到项目还不足以使用它们，因此需要从 default.html 中引用它们
提示： 您可以通过将脚本从解决方案资源管理器拖放到页面上来添加脚本引用。（额外提示：在 HTML5 中，您不再需要 type="text/javascript" 脚本属性。）
我们将使用 PreloadJS 来帮助在游戏中使用资源之前加载它们，并使用 EaselJS 来更轻松地管理游戏循环和图像资源的绘制。
开始游戏
要开始游戏，我们需要知道何时页面已准备好运行。为此，我们使用 DOMContentLoaded 事件来告诉我们何时页面结构已加载且脚本已准备好运行。这与 onload 事件不同，onload 事件会等待所有引用的内容下载完毕。
在 default.js 中，添加一个 initialize() 函数，并通过 DOMContentLoaded 调用它。在进行此操作的同时，让我们也添加游戏循环的基础
注意：为了便于阅读，app.oncheckpoint 函数已折叠。
变量
为了操作 canvas、存储图像并创建位图，我们将需要许多变量。此外，由于原始游戏假定屏幕尺寸为 800x480，我们需要将绘制的图像缩放到实际屏幕尺寸。
将以下变量添加到 default.js
初始化 Canvas 并使用 PreloadJS
之前，我曾提到 canvas 仅通过 JavaScript 更新。要连接到 canvas，您需要先找到该元素，然后获取其 2D 上下文。该上下文公开了绘图函数。我们还将缩放 canvas 以匹配我们的全屏尺寸。
如下更新 initialize()
现在我们需要加载我们的图像，以便将它们绘制到 canvas 上。有许多方法可以做到这一点，但 PreloadJS 很有帮助，因为我们可以列出我们将要使用的内容，并且它确保它们在我们引用它们之前已加载。如果我们不这样做，我们可能无法可靠地在运行时获取图像大小等详细信息，从而导致错误。
PreloadJS 通过读取资源数组来工作，然后在完成后调用一个函数。我们将指定将要使用的所有图像。
如下扩展 initialize() 函数
当 PreloadJS 准备好我们的资源后，将调用 prepareGame() 方法。
使用 EaselJS 创建和绘制图像
现在我们需要将这些图像显示到屏幕上（通过 canvas）。幸运的是，EaselJS 提供了许多有用的功能
- 一个 Stage 类，用于管理 canvas 和我们正在绘制的场景
Bitmap、Text 和 SpriteSheet 类，用于表示要绘制的项目- 一个 Point 类，用于帮助在 canvas 上定位项目
- 一个 Ticker 类，用于帮助管理游戏循环（可以将其视为游戏的“心跳”）
我们稍后会讲到 Ticker，但现在让我们添加 Stage，以便开始向其中填充内容。在 default.js 中，将以下内容添加到 initialize() 函数中
这会创建 Stage 并将其连接到我们游戏的 canvas 元素。现在我们可以向 Stage 添加项目（称为子项）。
在 initialize() 函数正下方，添加一个 prepareGame() 函数。（请记住，我们告诉 PreloadJS 在加载完资源后调用 prepareGame）。目前，我们只添加一个项目 – 背景
这里发生了什么？
- 第 62 行 –
preload.getResult()是请求 PreloadJS 获取它已经为我们加载好的图像 - 第 63 行 – 创建一个 EaselJS Bitmap 实例，使用该图像作为其源
- 第 64 & 65 行 – 将 Bitmap 缩放到我们屏幕的分辨率（相对于原始资源的 800x480）
- 第 66 行 – 将 Bitmap 作为子项添加到 Stage
- 第 68 行 – 请求 Stage 将其已知的所有内容告知 canvas
让我们运行游戏。启动屏幕后，我们现在看到
CSS 的快速更改
如您所见，我们添加的背景图像是透明的，因此我们的背景颜色显示了出来。黑色的背景看起来有些诡异，但并不是我们想要的。
我们可以做的一件事是更改我们正在使用的 WinJS CSS 基础。默认情况下，我们使用 ui-dark.css，但通过在 default.html 中快速更改为指向 ui-light.css，一切都会自动应用新样式
快速运行后，现在显示
然而，让我们尝试一种更像天空的颜色……比如，“azure”。我们可以通过 CSS 设置自己的背景颜色来覆盖 WinJS 的背景颜色。打开 /css/default.css 并按所示更改 body 样式
再次运行
一片美丽的蓝天，准备战斗！
添加剩余的资源
既然您已经看到了如何添加背景。现在主要是重复添加其他内容（并加入一些额外的数学计算）。 回到 default.js，并在 prepareGame() 中加入以下内容
关于此的一些说明
- 弹射器出现在“地面水平”，我们需要将其与图像的整体尺寸一起缩放
- 绘制玩家 2 的弹射器很棘手，因为我们需要它朝向另一个方向。使用 regX 设置一个变换点并设置负比例可以完成此任务。
- 我们创建并添加了炮弹（巨石）图像，但将其隐藏，直到稍后发射。
添加一些文本
为了结束本篇文章，让我们使用 EaselJS 的 Text 类添加一个游戏标题以及指示每个玩家剩余弹射器的指示器。首先，我们需要在 default.js 的顶部添加一些变量
然后，在 prepareGame() 中添加以下内容
对于Stage 来说，Text 实例就像我们之前添加的 Bitmap 一样是子项。
现在的游戏看起来怎么样？
下一步是什么？
一切看起来都不错，但很遗憾，就这样了——没有任何东西在移动。在下一篇文章中，我们将深入探讨游戏的机制，通过添加移动、碰撞检测、计分和游戏结束来完善游戏循环。