pixi.js 是一款超快开源 HTML5 2D 渲染引擎，我们在前面专门有过介绍。随后，我们会整理一些最基本的 pixi.js 相关的教程，以方便对 pixi 感兴趣的朋友们入门。今天就开始最基础部分的讲解。

首先，我们要到 pixi.js 的 Repository 去下载最新版本的 pix.js。请通过下面的链接打开。

在下载下来的源代码包中找到 bin/pixi.min.js，我们目前只使用这个文件即可。（也可以直接下载这个文件：请另存下来。）

接下来，开始准备我们的开发目录，我们的目录结构如下：

其中，index.html 是起始访问文件，而我们具体的教程页面则是在 html 目录之下。这只是习惯而已，并没有什么特别的讲究，如果您熟悉 Web 开发的话，您完全可以根据自己的喜好来调整。

下面，就让我们开始最重要的一步：在页面中引入 pixi.js，方法就是在 HTML 页面的头部加上针对 pixi.js 的引用，我们的 HTML 代码应该如下所示：

这样，我们就完成了 pixi.js 的引入，接下来我们就可以在页面中基于 pixi.js 编写我们自己的代码了。

首先在 标签之间加入 标签，这样我们就可以在其中编写 JavaScript 代码了。

我们要做的第一件事就是初始化 pixi 环境：

然后我们再创建一个图片精灵（Sprite），以便能让画面上显示一些内容：

从上面代码可见，我们通过图片 BackDrop_01.png 创建了一个精灵，并给它设置了和画布同样的尺寸，然后将其加入到舞台上。

现在页面的 HTML 代码应该看起来如下：

我们可以到浏览器中打开这个页面测试一下，看看是不是有所显示。

很遗憾，目前显示的是一块黑色的方块，并没有内容。

这是为什么呢？其实很简单，我们的画布必须要保持不停的绘制才能将画布上的内容正确显示出来。所以我们需要使用 requestAnimationFrame() 方法来保持画布的重绘。

继续加入如下的代码：

这样就可以形成不断重绘的循环。这时再刷新一下页面，看看是不是出现了一副画面了呢？

如果出现了，就代表我们已经成功的加入了一个精灵到舞台上，我们的第一步工作就算是完成了。

只有一个固定的场景，是在是太孤单了，所以我们尝试着再放入一个角色精灵，让画面看起来更有气氛更像一个游戏一些吧。

我们回到代码，在 animate() 之前加入如下代码：

现在刷新一下 HTML 页面看，是不是中间多了一个小人儿了呢？

不过，有一点不知道您注意到没有，就是加进来的玩家精灵看起来有些模糊。这是正常的，因为精灵图片比较小，我们做了放大一倍的处理了嘛，所以会这样模糊。

但是，由于我们的场景和角色都是基于像素的，所以这种感觉是不对的，我们应该让玩家角色也表现为很清晰的像素，是吧？这在 pixi 里面也很容易做到的，我们只要在代码最前面控制一下缩放的模式就可以了：

现在再刷新，就是我们想要的样子啦！

当然，现在他还不会有任何的动作，这些我们留到后面再做吧，今天就先到这里啦。

本教程中的图片来源均为 CC0 的公开版权素材，这次用到的素材可以在本站的资源库下载到：

另外本次教程的源代码可以在 Github 上下载：