pixi.js 初步：开始第一步
pixi.js 是一款超快开源 HTML5 2D 渲染引擎，我们在前面 专门有过介绍 。随后，我们会整理一些最基本的 pixi.js 相关的教程，以方便对 pixi 感兴趣的朋友们入门。今天就开始最基础部分的讲解。
pixi.js 的引入
首先，我们要到 pixi.js 的 Repository 去下载最新版本的 pix.js。请通过下面的链接打开。
pix.js v3 源代码
前往 Github 获取源码 源码
在下载下来的源代码包中找到
bin/pixi.min.js
，我们目前只使用这个文件即可。（也可以直接下载这个文件：
请另存下来
。）
接下来，开始准备我们的开发目录，我们的目录结构如下：
. Project（项目）
├── assets // 素材目录
| ├── img // 图片目录
| ├── css // 样式表目录
| └── js // JavaScript 目录
├── html // HTML 目录
| ├── t1-1.html
| ├── ...
| └── tn-1.html
└── index.html // index.html 文件
其中，
index.html
是起始访问文件，而我们具体的教程页面则是在
html
目录之下。这只是习惯而已，并没有什么特别的讲究，如果您熟悉 Web 开发的话，您完全可以根据自己的喜好来调整。
下面，就让我们开始最重要的一步：在页面中引入 pixi.js，方法就是在 HTML 页面的头部加上针对 pixi.js 的引用，我们的 HTML 代码应该如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pixi.js Tutorial 1 - 1</title>
<link rel="stylesheet" href="http://indienova.com/indie-game-development/assets/css/style.css">
<script src="http://indienova.com/indie-game-development/assets/js/pixi.min.js"></script>
</head>
<body>
</body>
</html>这样，我们就完成了 pixi.js 的引入，接下来我们就可以在页面中基于 pixi.js 编写我们自己的代码了。
使用背景精灵
首先在
<body></body>
标签之间加入
<script></script>
标签，这样我们就可以在其中编写 JavaScript 代码了。
我们要做的第一件事就是初始化 pixi 环境：
// 通过自动选择的方式创建画布（800x450）
// 并设置背景为黑色
// 然后将其添加到文档中
var renderer = PIXI.autoDetectRenderer(800, 450, {backgroundColor : 0x000000});
document.body.appendChild(renderer.view);
// 创建舞台 Container
// 之后的对象都存在于舞台之上
var stage = new PIXI.Container();然后我们再创建一个图片精灵（Sprite），以便能让画面上显示一些内容：
// 创建背景精灵
var background = new PIXI.Sprite.fromImage('../assets/img/BackDrop_01.png');
// 设置和画布同样的尺寸
background.width = renderer.width;
background.height = renderer.height;
// 将背景精灵放置于舞台之上
stage.addChild(background);
从上面代码可见，我们通过图片
BackDrop_01.png
创建了一个精灵，并给它设置了和画布同样的尺寸，然后将其加入到舞台上。
现在页面的 HTML 代码应该看起来如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pixi.js Tutorial 1 - 1</title>
<link rel="stylesheet" href="http://indienova.com/indie-game-development/assets/css/style.css">
<script src="http://indienova.com/indie-game-development/assets/js/pixi.min.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(800, 450,{backgroundColor : 0x000000});
document.body.appendChild(renderer.view);
// 创建舞台 Container
var stage = new PIXI.Container();
// 创建背景精灵
var background = new PIXI.Sprite.fromImage('../assets/img/BackDrop_01.png');
background.width = renderer.width;
background.height = renderer.height;
stage.addChild(background);
</script>
</body>
</html>我们可以到浏览器中打开这个页面测试一下，看看是不是有所显示。
很遗憾，目前显示的是一块黑色的方块，并没有内容。
这是为什么呢？其实很简单，我们的画布必须要保持不停的绘制才能将画布上的内容正确显示出来。所以我们需要使用
requestAnimationFrame()
方法来保持画布的重绘。
继续加入如下的代码：
// 动画
animate();
function animate() {
requestAnimationFrame(animate);
// 渲染 Container
renderer.render(stage);
}这样就可以形成不断重绘的循环。这时再刷新一下页面，看看是不是出现了一副画面了呢？
如果出现了，就代表我们已经成功的加入了一个精灵到舞台上，我们的第一步工作就算是完成了。
再加入一个精灵
只有一个固定的场景，是在是太孤单了，所以我们尝试着再放入一个角色精灵，让画面看起来更有气氛更像一个游戏一些吧。
我们回到代码，在
animate()
之前加入如下代码：
// 创建一个玩家精灵
var player = new PIXI.Sprite.fromImage('../assets/img/player.png');
// 将中心点定在角色图片的中心
player.anchor.set(0.5);
// 放置在画面中间靠下的位置
player.position.set(renderer.width / 2, renderer.height / 2 + 136);
// 设置放大倍数，因为原图很小，只有 24x24，所以需要放大一下
player.scale.x = 2;
player.scale.y = 2;
// 将玩家精灵加入到舞台上
stage.addChild(player);现在刷新一下 HTML 页面看，是不是中间多了一个小人儿了呢？
基于像素的精灵
不过，有一点不知道您注意到没有，就是加进来的玩家精灵看起来有些模糊。这是正常的，因为精灵图片比较小，我们做了放大一倍的处理了嘛，所以会这样模糊。
但是，由于我们的场景和角色都是基于像素的，所以这种感觉是不对的，我们应该让玩家角色也表现为很清晰的像素，是吧？这在 pixi 里面也很容易做到的，我们只要在代码最前面控制一下缩放的模式就可以了：
// 将默认的缩放模式定义为 Nearest
PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;现在再刷新，就是我们想要的样子啦！
当然，现在他还不会有任何的动作，这些我们留到后面再做吧，今天就先到这里啦。
资源／代码下载
本教程中的图片来源均为 CC0 的公开版权素材，这次用到的素材可以在本站的资源库下载到：
森林背景的平台动作块图
A PLATFORMER IN THE FOREST 下载另外本次教程的源代码可以在 Github 上下载：
