翻译对照
译文: 第一篇第二篇 第三篇 第四篇
关注 @chriscaleb
这个系列的教程已经更新到了 PixiJS v4 http://www.pixijs.com/ 版本.
曾经玩过 Canabalt http://www.adamatomic.com/canabalt/ 和 Monster Dash , 好奇他们是如何构建一个滚动游戏地图的? 在这个教程中我们将向「构建一个视差滚动器」迈出第一步, 我们将使用 JavaScript 和 pixi.JS http://www.pixijs.com/ 这个 2D 渲染引擎.
你将学到什么...
Pixi.JS 的基础知识
如何处理纹理 (textures) 和精灵(sprites)
如何实现简单的视差滚动
预备知识...
了解 JavaScript 或者 ActionScript 的基础知识
JavaScript 无处不在, 由于浏览器的不断改善和大量的 JavaScript 库, 我们真的开始看到 html5 游戏领域开发蓬勃发展. 但是当有很多库可用的时候, 选择合适的并非易事.
这个系列的教程将向你介绍 JavaScript 游戏开发的基础, 我们会聚焦到 pixijs. 它是一个支持 webGL 和 HTML5 Canvas 的渲染框架. 教程最后你将完成如下的一个视差滚动地图程序:
点击上面的链接启动最终版的程序, 这就是你将要完成的. 注意它包含了三个视差层: 一个远景 (far) 层, 一个中间 (mid) 层, 一个前景 (foreground) 层. 在第一篇教程中我们将集中精力构建远景层和中间层. 当然为了做到这一点教程必须涉及 pixi.JS 的基础, 当然如果你还是个 JavaScript 新手, 这会是个很好的开始学习 HTML5 游戏编程的地方.
开始之前, 点击上面的链接预览下这篇教程中将做成的效果. 你也可以从 GitHub 上下载这个程序的 源代码 https://github.com/ccaleb/pixi-parallax-scroller .
起步
为了完成编码, 你需要一个代码编辑器, 我将使用一个体验版的 Sublime text, 可以在这里 下载到.
还需要一个浏览器来测试你的程序. 任何现代浏览器都可以, 我将用 Google Chrome, 开发过程中将会涉及到一些开始者工具的使用. 如果你还没有安装 Chrome, 可以去这里 下载.
为了测试你的程序, 你还需要在你的开发机上安装一个 Web 服务器. 如果你用的是 Windows, 可以 安装 IIS ,macOS 用户可以配置下系统默认的 Apache , 如果你的系统是 OS X Mountain Lion 配置 Web 服务器可以会比较麻烦, 可以参考这个 教程 .
如果你有自己托管的 Web 服务器, 就可以直接上传所以文件来测试, 或者如果你有一个 Dropbox https://www.dropbox.com/ 账号, 你可以通过 DropPages http://droppages.com/ 服务来托管你的文件.
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 或者 的链接
你会发现并没有什么东西, 我们来给 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 类库
在
来源: http://www.tuicool.com/articles/nYnyyaJ