内容简介:原文:译文:第一篇・第二篇・ 第三篇・ 第四篇关注
翻译对照
原文: 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 类库
在
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用 Pixi.js 构建一个视差滚动器(第三篇)
- 使用 Pixi.js 构建一个视差滚动器(第二篇)
- 视差长图 H5 实践
- javascript – 如何实现视差滚动?
- 用css实现视差效果
- 滚动视差效果的实现及优化方案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Cult of the Amateur
Andrew Keen / Crown Business / 2007-6-5 / USD 22.95
Amateur hour has arrived, and the audience is running the show In a hard-hitting and provocative polemic, Silicon Valley insider and pundit Andrew Keen exposes the grave consequences of today’s......一起来看看 《The Cult of the Amateur》 这本书的介绍吧!