使用JavaScript创建一个简单的Windows 8游戏: 第 2部分- 游戏基础 & createjs/easeljs

分享于 

12分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

我可以在的bowen http://blogs.msdn.com/cbowen的Chris博客 check

创建一个简单的Windows 8游戏系列:

这是一系列文章中的第二篇,将展示如何创建( 非常) 简单 Windows 8游戏。 我们将使用 HTML5.JavaScript。WinJS和一些从 CreateJS的有用库。

游戏是基于XNA样本游戏 "catapult实验室。 我们将在开发基于web技术的Windows 8的新版本时重用这个游戏的资产。

第一篇文章是对基本 8地铁风格应用中移动部件的简要介绍。 在这篇文章中,我们将开始认真地创建一个游戏。 如果你是游戏开发新手,花一点时间阅读donahue开发 101篇文章的Ed。

我们在做什么?

下面是原始XNA版本中的游戏内容:

我们不会通过添加所有这些特性,但是我们将得到关闭 !

添加资产

除非你创建下一个基于文本的冒险,否则你可以能需要一些图像和声音。 我们使用的是" Catapult战斗实验室。"2d示例游戏中已经创建的。 本教程为XNA开发,但我们想要 JavaScript,所以让我们获取图形和声音,并获得编码 !

  • 启动 Visual Studio 2012并创建一个名为"catapultwars"的项目,使用来自 JavaScript ->"Windows 地铁风格"模板的"空白应用"模板。
  • 下载并提取 "catapult war实验室"示例 ( CatapultWars_4_0.zip )
  • 从文件夹的Windows Explorer 视图中,从 /Assets/Media/Textures 文件夹和 Visual Studio 中选择并拖动所有四个文件夹,将它们放在映像文件夹下。 ( 这将复制并将它们添加到项目中。)
  • 在项目的root 中创建名为"声音"的新文件夹。
  • 将文件从 /Assets/Media/Sounds 复制到新的"声音"文件夹。

你的项目应该如下所示:

现在我们有了一些资产,让我们把它们用起来。

启动屏幕&徽标

注意,当你运行游戏时,你首先会看到一个正方形的"x"? 这就是初始屏幕,默认情况下显示 /images/splashscreen.png 图像,但是我们可以更好地。 要调整初始屏幕,双击 package.appxmanifest:

我们要使用的文件 /images/Backgrounds/gameplay_screen.png,但是图像必须是 620个x300像素。 因此,在你喜欢的编辑器中打开图像,调整大小并保存为" title_screen_620x300.png"。 将新文件添加到项目中。

现在我们可以将"启动屏幕"字段设置为 imagesBackgroundstitle_screen_620x300.png。 在这里,选择任何你想要补充图像的background 颜色( 比如。 现在,当运行时,游戏会向我们介绍一个新的初始画面:

我们还可以调整应用程序的平铺,默认情况下,它看起来像这样:

同样在 app Manifest 中,我们看到了许多用于标识的地方。 我们可以添加 150 x150,310 x150和 30 x30徽标,用于各种地方。

现在我们有了方形和宽格式定制瓷砖:

看起来不错现在如果我们有一个游戏要玩。

添加 HTML5 Canvas

首先,我们需要一些东西来展示游戏。 HTML5 Canvas 元素实际上是一个像素沙箱,你可以在其中动态绘制。 我们将使用画布来呈现游戏,所以我们需要将它添加到HTML页面。 在这里打开 default.html 和替换行 17 ("内容到这里带有一个画布标记,所以它看起来像:

通常,你可以指定宽度&高度,并在不支持画布的情况下添加回退内容。 但是,这只需要考虑编码实践,以便将某些应用程序代码重用为传统web应用程序。

使用CreateJS使事情更容易

那么我们如何添加 background 和catapults之类的东西? HTML内容不同,canvas内容完全通过JavaScript指令创建。 有关基础知识,请阅读MSDN上的"如何在 HTML5 Canvas 上绘制"插件。

当然,我们可以使用画布方法直接绘制我们的游戏,但是有一些JavaScript可以帮助游戏开发。 是一组JavaScript库的&工具,包括EaselJS插件。PreloadJS插件和其它工具。 在游戏中使用这些,所以下载 EaselJS和 PreloadJS,为它们创建一个 folder/js/CreateJS,并在脚本( 从"lib"文件夹) 中创建一个文件夹,如下所示:

在项目中添加JavaScript文件是不够的,因此从 default.html 引用它们:

提示:可以通过将脚本从解决方案资源管理器拖到页上来添加脚本引用。 ( 额外提示:在HTML5中,你不再需要 type="文本/javascript"脚本属性。)

我们将使用PreloadJS来帮助负载资产,以便在游戏和EaselJS中使用,以便管理游戏循环和图形资产。

开始游戏

要开始游戏,我们需要知道什么时候可以运行页面。 为此,我们使用 DOMContentLoaded 事件来告诉我们页面结构什么时候已经加载,脚本已经准备好运行。 这与 onload 事件不同,后者等待所有引用的内容被下载。

在中,添加一个 initialize() 函数并由 DOMContentLoaded 调用。 同时,我们还要添加游戏循环的基础:

注:app.oncheckpoint 函数已经折叠,以便更容易阅读。

变量

要使用画布。存储图像和创建位图,我们需要一组变量。 另外,由于原始游戏假定了 800 x480屏幕,我们需要缩放我们绘制到实际屏幕大小的图像。

将以下变量添加到 default.js:

初始化画布并使用 PreloadJS

之前,我提到过画布只是通过JavaScript更新的。 要连接到画布,首先需要找到该元素,然后检索 2D 个上下文。 上下文公开了绘图函数。 我们还将画布缩放到 MATCH的屏幕大小。

按如下方式更新 initialize():

现在我们需要加载图像,以便能够将它们绘制到画布上。 有许多方法可以做到,但是PreloadJS是有用的,因为我们可以列出我们将使用的内容。 如果我们不这样做,我们可以能无法在运行时获得像图像大小这样的细节,创建 Bug。

PreloadJS通过读取资源的array 来工作,然后在完成时调用函数。 我们将指定要使用的所有图像。

按如下方式扩展 initialize() 函数:

当PreloadJS准备好我们的资产时,prepareGame() 方法将被。

使用EaselJS创建和绘制图像

现在我们需要把这些图像放到屏幕上。 幸好,EaselJS有许多我们会发现有用的特性:

我们稍后会进行一些更新,但现在让我们添加一个阶段,以便开始填充内容。 在 default.js 中,将以下内容添加到 initialize() 函数中:

这将创建舞台并将它的连接到我们的游戏元素画布。 现在我们可以向舞台添加项目( 被称为子级)。

右 below initialize() 函数,添加 prepareGame() 函数。 ( 记住,我们告诉PreloadJS在加载资产时调用 prepareGame )。 现在,我们只添加一个项目- background:

.这里做什么?

  • 行 62 - preload.getResult() 请求PreloadJS为我们已经加载的映像
  • 使用图像作为源创建一个EaselJS行Bitmap位图实例,
  • 行 64 & ( Scale位图 Scale Bitmap位图的分辨率) 原始资产的relative 到 800 x480
  • 行 66 - 将位图添加到级作为子级
  • 收费行ask要求阶段告诉画布所有它知道的一切

让我们运行游戏。在启动屏幕之后,我们现在看到:

使用CSS快速更改

你可以看到,我们添加的background 图像是透明的,因此我们的background 颜色显示为。 我们的black background 很吓人,但不是我们要找的东西。

我们可以做的一件事就是改变我们使用的WinJS CSS库。 默认情况下,我们使用 ui-dark.css,但快速改变 default.html to指向 ui-light.css,并自动选取新样式:

快速运行现在显示:

但是,让我们尝试更多的天空像颜色。 我们可以通过设置自己的"azure"来覆盖 WinJS background 颜色。 打开 /css/default.css,并按如下所示更改 body 样式:

再次运行:

美丽的天空,准备战斗 !

添加剩余资产

现在你已经了解了如何添加 background。 在 default.js 中包含其他( 再加上更多的数学。) 头,并在中包括以下内容,这主要是重复的问题:

请注意以下事项:

  • catapults出现在"地级别"上,我们需要随着图像的整体大小进行缩放
  • 绘图玩家 2弹弓是很棘手的,因为我们需要它来面对其他的direction。 使用设置转换点并设置负比例就完成了工作。
  • 我们创建并添加弹药( 博尔德) 图像,但隐藏它,直到它被触发。

添加一些文本

我们把easeljs类的Text 添加到游戏标题中,并为每个玩家的catapults添加指示符。 首先,我们需要在 default.js的顶部有几个变量:

然后,将以下内容添加到 prepareGame();

To阶段 Text文本实例是孩子are像位图s 我们前面添加了。

现在的游戏是什么样子的?

接下来

事情看起来非常好,但不幸的是它的移动。 在下一篇文章中,我们将深入探讨游戏的机制,通过添加运动。碰撞检测。scorekeeping和最终结构。


相关文章