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

栏目: 编程工具 · 发布时间: 5年前

内容简介：原文：译文：第一篇・第二篇・第三篇・第四篇关注

翻译对照

原文： 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 的渲染框架。教程最后你将完成如下的一个视差滚动地图程序：

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

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

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

开始之前，点击上面的链接预览下这篇教程中将做成的效果。你也可以从 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）：

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

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

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

现在我们已经准备好开始写代码了，启动 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 类库

在

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web Analytics

Avinash Kaushik / Sybex / 2007-6-5 / USD 29.99

在线阅读本书 Written by an in-the-trenches practitioner, this step-by-step guide shows you how to implement a successful Web analytics strategy. Web analytics expert Avinash Kaushik, in his thought-p......一起来看看《Web Analytics》这本书的介绍吧!

码农工具