使用Pixi.js的总结

Pixi.js是一个用JavaScript写的2D渲染引擎，可以用来在浏览器里做交互图形、动画和游戏等的“富视觉”应用，主打支持硬件GPU渲染的WebGL API，如浏览器不支持WebGL，Pixi则会退用HTML5 Canvas来渲染。 Pixi主要负责渲染画面，很多其它功能开发者得自己写或搭配其它库来使用，如用来开发网页游戏的Phaser框架就是使用Pixi来做渲染。下面内容选自Learning Pixi.js一书，可以来小试一下Pixi。

备注：例子中的JavaScript用的是ES6，var 变成 let， function（）{} 变成 () => {}。

制作精灵（sprites)

Pixi中的基础建造模块是一个叫做sprite的对象。 sprite就是可以用代码控制的图形。 你可以控制它们的位置、尺寸和一些其他属性，用以制作交互和动画图形。学习如何制作和控制sprite确是学习使用Pixi最重要的事情，如果你知道如何制作和显示sprite，你就离开始制作游戏或者其他任何一种交互程序只有一小步的距离了。

本章， 你将学习在Pixi的Canvas中显示和定位sprite所需的必备知识，包括下列内容：

如何制作root container（根容器），叫做stage（舞台）

如何新建一个renderer（渲染器）

使用加载器加载图形到Pixi的纹理缓存中（texture cache）

使用加载后的图形包括tilesets和texture atlases，制作sprite

在开始制作sprite之前，让我们来创建一个用于显示它们的类似长方形的屏幕。

创建renderer和stage

Pixi有一个渲染器对象（renderer）给你用来创建一个显示屏幕。它会自动生成一个HTML <canvas> 元素并解决在canvas里显示你的图像的问题，但是你还得另外创建一个叫stage的Pixi容器对象（别担心，一会儿你就知道到底什么是容器对象和为什么需要它们了）。这个stage对象将被当作一个根容器（root container），用于显示我们需要Pixi显示的所有东西。下面是创建一个renderer和stage的代码，将这些代码加入你的HTML文档的<script> 标签之间:

//Create the renderer 创建一个渲染器let renderer = PIXI.autoDectectRenderer(256, 256);//Add the canvas to the HTML document 在HTML文档中加入canvasdocunment.body.appendChild(renderer.view);//Create a container object called the 'stage' 创建一个叫stage的容器对象let stage = new PIXI.Container();//Tell the 'renderer' to 'render' the 'stage' 告诉渲染器去渲染一个舞台renderer.render(stage);

这就是开始使用Pixi所需的最基础的代码，它生成了一个256像素 X 256像素大小的黑色canvas元素，并将之添加到HTML文档中

这个简单的黑色方块应该给你小小的心灵带来纯纯的愉悦！那是因为要让Pixi开始显示内容，这既是首要的一步，也是最重要的一步，让我们仔细分解这些代码的功用。

渲染选项

Pixi的autoDetectRenderer方法会根据可用状态，自动选择是使用Canvas API还是WebGL去渲染图像。

let renderer = PIXI.autoDetectRenderer(256, 256);

上面代码的第一个和第二个参数分别表示canvas画布的宽和高。 然而还可以加入第三个可选的参数供你并设一些附加值，这第三参数是一个对象直接量，下面代码就是设置渲染器抗锯齿、透明和分辨率的示例：

renderer = PIXI.autoDetectRenderer(
  256, 256,
  { antialias: false, transparent: false, resolution: 1 }
);

用不用第三参数是可选的，如果你满意Pixi的缺省值就不用管它，一般来说都不用改。但最好了解这些设置有哪些用处，抗锯齿（antialias）可以使字体和图形的边缘变得平滑（WebGL的anti-aliasing还没有适用于所有平台，所以最好在你的应用平台上测试此功能）。透明选项可以使canvas的背景变为透明。分辨率选项使得匹配不同分辨率和像素密度变得更容易，一般设置为1就可应对多数项目，更多关于分辨率匹配的信息请参见第六章。

提示 该渲染器还有另一个第四选项叫做preserveDrawingBuffer，缺省值为false。唯一需要设置它为true的情况是：在WebGL上下文情境中调用一个Pixi的特殊方法dataToURL。如果你需要将一个Pixi的canvas转化为一个HTML图片对象时，你可能不得不这么做。

Pixi的autoDetectRenderer将决定使用canvas绘图接口还是WebGL来显示图像。缺省是WebGL，这是好的，因为WebGL特别的快而且能使用很多引人入胜的特效，这些你都能在本书后面学到。但是如果你想强制使用canvas绘图接口而不是
WebGL，你可以这么写:

renderer = new PIXI.CanvasRenderer(256, 256);

上面的情况只需要头两个参数：宽和高。

你也可以强制使用WebGL渲染器，如下所示：

renderer = new PIXI.WebGLRenderer(256, 256);

现在我们再来看看如何增强渲染器的外表

定制canvas

renderer.view对象只是一个普通平常的<canvas>对象，所以你可以象控制其它任何canvas对象那样控制它，下面的代码给canvas加了一圈虚线边框：

renderer.view.style.border = "1px dashed black";

如果新建canvas之后，你需要改变它的背景颜色，那就给渲染器对象的backgroundColor设置任何十六进制颜色值即可，下面的代码给了一个纯白色的背景：

renderer.backgroundColor = 0xFFFFFF;

提示 网上可以搜索到很多十六进制配色表，你可以很容易选择一个合适的背景色。

如果你想知道渲染器的宽和高，使用renderer.view.width和renderer.view.height即可。

要改变canvas的大小，使用渲染器的resize()方法，然后应用新的宽高值，如下所示：

renderer.resize(512, 512);

如果想让canvas充满整个窗口，你可以使用如下CSS样式：

renderer.view.style.position = "absolute";
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.viwe.sytle.display = "block";

注意，如果要这么做，你必须还得将所有HTML元素的padding和margin值都设为0， 如下所示：

<style>* {padding: 0; margin:0} </style>

(上面的*号是CSS里的通配选择器，就是指所有标签)如果没有上面这条CSS样式，你可能会发现在Pixi画布与浏览器边缘之间有几像素的空隙。

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

JS模块化-RequireJS

在vue首页怎样做出底部导航TabBar

一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

以上就是使用Pixi.js的总结的详细内容，更多请关注Gxl网其它相关文章！