使用 Pixi.js 构建一个视差滚动器（第一篇）

翻译对照

原文： PART 1 ・ PART 2 ・ PART 3 ・ PART 4

译文：第一篇・第二篇・ 第三篇・ 第四篇

关注 @chriscaleb

这个系列的教程已经更新到了 PixiJS v4 版本。

曾经玩过 Canabalt 和  Monster Dash ，好奇他们是如何构建一个滚动游戏地图的？在这个教程中我们将向「构建一个视差滚动器」迈出第一步，我们将使用 JavaScript 和  pixi.js 这个 2D 渲染引擎。

你将学到什么…

• Pixi.js 的基础知识
• 如何处理纹理（textures）和精灵（sprites）
• 如何实现简单的视差滚动

预备知识…

• 了解 JavaScript 或者 ActionScript 的基础知识

JavaScript 无处不在，由于浏览器的不断改善和大量的 JavaScript 库，我们真的开始看到 HTML5 游戏领域开发蓬勃发展。但是当有很多库可用的时候，选择合适的并非易事。

这个系列的教程将向你介绍 JavaScript 游戏开发的基础，我们会聚焦到 pixijs。它是一个支持 WebGL 和 HTML5 Canvas 的渲染框架。教程最后你将完成如下的一个视差滚动地图程序：

点击上面的链接启动最终版的程序，这就是你将要完成的。注意它包含了三个视差层：一个远景（far）层，一个中间（mid）层，一个前景（foreground）层。在第一篇教程中我们将集中精力构建远景层和中间层。当然为了做到这一点教程必须涉及 pixi.js 的基础，当然如果你还是个 JavaScript 新手，这会是个很好的开始学习 HTML5 游戏编程的地方。

开始之前，点击上面的链接预览下这篇教程中将做成的效果。你也可以从 github 上下载这个程序的 源代码 。

起步

为了完成编码，你需要一个代码编辑器，我将使用一个体验版的 sublime text，可以在这里 下载到。

还需要一个浏览器来测试你的程序。任何现代浏览器都可以，我将用 Google Chrome，开发过程中将会涉及到一些开始者 工具 的使用。如果你还没有安装 Chrome，可以去这里 下载。

为了测试你的程序，你还需要在你的开发机上安装一个 web 服务器。如果你用的是 Window，可以 安装 IIS ，macOS 用户可以配置下系统默认的 Apache ，如果你的系统是 OS X Mountain Lion 配置 web 服务器可以会比较麻烦，可以参考这个 教程 。

如果你有自己托管的 web 服务器，就可以直接上传所以文件来测试，或者如果你有一个 Dropbox 账号，你可以通过  DropPages 服务来托管你的文件。

web 服务器建好后，创建一个目录 parallax-scroller 如果你使用 Windows。你的 web 服务器根目录应该类似  C:\inetpub\parallax-scroller 。如果你使用 OS X 则应该是  /Users/your_user_name/Sites ， your_user_name 就是你电脑的用户名。

最后，在教程中我们将使用几个图片素材，不用你自己去找，我已经为你打包好了一个 zip 文件 ，下载并解压好你的  parallax-scroller 目录。

下面就是你的 parallax-scroller 文件夹的样子（Windows）：

如果你用的是 Mac OS X 则应该如下图：

现在我们已经准备好开始写代码了，启动 Sublime Text 2 或者你最喜欢的编辑器。

创建画布

所有的 pixijs 项目都以一个 HTML 文件开始。在这里我们将创建一个 canvas 元素以及引入 pixi.js 库。canvas 元素表示HTML页面上将呈现滚动条的区域。

在你的项目根目录 parallax-scroller 下使用编辑器新建一个文件，命名为 index.html ，并写入下面的代码：

<html>
  <head>
    <meta charset="UTF-8">
    <title>Parallax Scrolling Demo</title>
  </head>
  <body>
  </body>
</html>

现在看起来还非常奇怪，我们的 HTML 页面只有一个 <head> 和 <body> 元素。

现在让我们在页面上添加 HTML5 Canvas 元素，在 body 元素中添加如下的代码：

<body>
  <div align="center">
    <canvas id="game-canvas" width="512" height="384"></canvas>
  </div>
</body>

我们指定了 canvas 宽度 512 像素，高度 384 像素。这就是 pixi.js 为库渲染游戏的地方。注意我们给 canvas 了一个 id 属性，值为 game-canvas 这将使我们易于控制它，当 pixi.js 启动时也需要它

现在启动你的 web 服务器，在 浏览器中打开类似 http://localhost/parallax-scroller/index.html 或者  http://localhost/~**your_user_name**/parallax-scroller/index.html 的链接

你会发现并没有什么东西，我们来给 canvas 加点样式（style 标签）：

<html>
  <head>
    <meta charset="UTF-8">
    <title>Endless Runner Game Demo</title>
    <style>
      body { background-color: #000000; }
      canvas { background-color: #222222; }
    </style>
  </head>
  <body>
  </body>
</html>

保存并刷新，你将会看见一个水平居中的灰色区域出现在页面上。

引入 pixi.js 类库

在