小试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文档中加入canvas
docunment.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文档中。图1-1 显示了运行代码后在浏览器里的样子。

pixi1-1.jpg

图1-1 Pixi的渲染器在浏览器中显示了一个黑色方块

这个简单的黑色方块应该给你小小的心灵带来纯纯的愉悦！那是因为要让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画布与浏览器边缘之间有几像素的空隙。

缩放画布至浏览器窗口

你可以使用一个叫scaleToWindow()的定制函数去缩放Pixi的画布最大化至整个浏览器窗口（ scaleToWindow在本书源代码中有，或者访问“github.com/kittykatattack/scaleToWindow” 代码库）。scaleToWindow也能在浏览器窗口里对齐画布以获得最佳适配效果，举例说如果你的画布宽大于高，它能在窗口里垂直的居中对齐，如果高大于宽，则会水平的居中对齐，图1-2是两个这样的对齐效果。

pixi1-2.jpg

图1-2 在浏览器窗口中使用定制的scaleToWindow函数缩放和对齐画布

下面是使用scaleToWindow缩放和对齐画布的代码：

scaleToWindow(renderer.view, borderColor);

其中可选的第二参数，你可以用来设置浏览器的背景色，用以形成画布的边框，这里可以使用任何RGB、HSLA或Hex颜色值，当然也可以是任何HTML颜色字符串，如“blue”或者“red”。（如果没有设置颜色值，缺省的边框颜色是一个中性的深灰色：#2C3539。）

scaleToWindow还能返回画布缩放后的缩放值，你可以这样获得数值：

let scale = scaleToWindow(renderer.view);

这会给你一个数值，可能就像这样 1.98046875，它告诉你画布的缩放比率，如果你要将浏览器的像素坐标转换为画布缩放像素值，这就会是一个重要数值，举例说，如果你有一个指针对象用于跟踪鼠标在浏览器里的位置，你会需要将这些像素坐标传唤为缩放的画布坐标，用于确定鼠标是否碰到了画布中的什么东西，下面这些平常的代码就能搞定：

pointer.x = pointer.x / scale;
pointer.y = pointer.y / scale;

提示在第七章中，你将学习如何创建和使用一个Pixi指针。

有时，你可能需要随着窗口大小的改变而重新缩放canvas，如果是这样，在window的监听器中调用scaleToWindow, 就像下面这样：

window.addEventListener("resize", event => {
  scaleToWindow(renderer.view);
});

现在你知道如何创建一个Pixi canvas了。