35

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

 5 years ago
source link: https://keelii.com/2019/03/16/building-a-parallax-scroller-with-pixijs-cn-1/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

翻译对照

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

vaae6v2.png!web

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

vaae6v2.png!web

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

2I3yUzR.png!web

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

3QJn6ry.png!web

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

在


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK