共计 6606 个字符，预计需要花费 17 分钟才能阅读完成。
平铺精灵
平铺精灵是一种特殊的精灵，可以在一定的范围内重复一个纹理。你可以使用它们创建无限滚动的背景效果。要创建平铺精灵，需要使用带有三个参数的 TilingSprite 类（PIXI.extras.TilingSprite）
用法：
let tilingSprite = new PIXI.extras.TilingSprite(texture, width, height);
参数：
名称
默认值
描述
texture
平铺精灵的纹理
width
100
平铺精灵的宽度
height
100
平铺精灵的高度
除此之外，平铺精灵具有与普通精灵所有相同的属性，并且与普通精灵的工作方式相同。他们还有 fromImage 和 fromFrame 方法，就像普通精灵一样。以下是如何使用名称是 brick.jpg 的 100 x 100 像素的图像创建 200 x 200 像素的平铺精灵。并且从画布左上角偏移 30 像素。
以下是关键代码：
let tilingSprite = new PIXI.extras.TilingSprite(
PIXI.loader.resources[imgURL].texture, 200, 200
);
tilingSprite.x = 30;
tilingSprite.y = 30;
下图显示了 brick.jpg 图像以及上面代码的效果。
你可以使用 tilePosition.x 和 tilePosition.y 属性来移动平铺精灵使用的纹理。以下是如何将平铺精灵使用的纹理移动 30 像素。
tilingSprite.tilePosition.x = 30;
tilingSprite.tilePosition.y = 30;
这里不是在移动平铺精灵，而是移动平铺精灵使用的纹理。下图是两种情况的对比。
你还可以使用 tileScale.x 和 tileScale.y 属性更改平铺精灵使用的纹理的比例。以下是如何将平铺精灵使用的纹理的大小增加到 1.5 倍的关键代码：
tilingSprite.tileScale.x = 1.5;
tilingSprite.tileScale.y = 1.5;
原图 与 上面代码实现的效果的对比：
tileScale 和 tilePosition 都有一个 set 方法，可以一行代码设置 x 属性和 y 属性。
参数：
名称
默认值
描述
x
0
新的 x 属性值
y
0
新的 y 属性值
用法：
tilingSprite.tilePosition.set(30, 30);
tilingSprite.tileScale.set(1.5, 1.5);
平铺精灵是创建重复图像模式的便捷方式。因为你可以移动纹理的位置，所以你可以使用平铺精灵创建无缝的滚动背景。这对于许多类型的游戏都非常有用。让我们来看看如何做到这一点。
首先，从无缝平铺图像开始。无缝图像是图案在各方面匹配的图像。如果并排放置图像的副本，它们看起来就像是一个连续的大图像，上面示例中用到的 brick.jpg 就是这种图像。
接下来，使用此图像创建一个平铺精灵。然后在游戏循环中更新精灵的 tilePosition.x 属性。
关键代码：
function play() {
tilingSprite.tilePosition.x -= 1;
}
效果图：
查看示例
你还可以使用此功能创建一个称为视差滚动的伪 3D 效果。就是在同一位置层叠多个这样的平铺精灵，并使看上去更远的图像移动得比更近的图像慢。就像下面这个示例一样！
两张用于做平铺精灵的图像：
实现的效果图：
查看示例
着色
精灵有一个 tint 属性，给这个属性赋值一个十六进制颜色值可以改变精灵的色调。
我们来试试吧！
关键代码：
sprite.tint = 0xFFFF660;
原图 与 上面代码实现的效果的对比：
查看示例
每个精灵的 tint 属性默认值是白色（0xFFFFFF），也就是没有色调。如果你想改变一个精灵的色调而不完全改变它的纹理，就使用着色。
蒙版
Pixi 允许你使用 Graphics（图形）对象来屏蔽任何精灵或具有嵌套子精灵的容器。蒙版是隐藏在形状区域之外的精灵的任何部分的形状。要使用蒙版，先创建精灵和 Graphics 对象。然后将精灵的 mask 属性设置为创建的 Graphics 对象。
示例：
首先，用皮卡丘的图像创建一个精灵。然后创建一个蓝色正方形并定位在精灵的上方（形状的颜色并不重要）。最后，精灵的 mask 属性设置为创建的正方形对象。这样会只显示正方形区域内精灵的图像。精灵在正方形之外的任何部分都是不可见的。
原图 与 使用蒙版后的对比：
关键代码：
// 创建精灵
let Pikachu = new PIXI.Sprite(PIXI.loader.resources[imgURL].texture);
// 创建一个正方形对象
let rectangle = new PIXI.Graphics();
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 200, 200);
rectangle.endFill();
rectangle.x = 100;
rectangle.y = 100;
// 给精灵设置蒙版
Pikachu.mask = rectangle;
查看示例
你还可以为蒙版设置动画，去做出一些有趣的效果。而且如果是用 WebGL 渲染的话，还可以用精灵作为蒙版。下面这个示例是用三张图片做成精灵，然后把一个精灵作为蒙版，并且给蒙版设置动画的示例。
效果图：
查看示例
混合模式
blendMode 属性确定精灵如何与其下层的图像混合。
如下所示，可以将它们应用于精灵：
sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
以下是可以使用的 17 种混合模式的完整列表：
没有混合
NORMAL（正常）
对比比较（饱和度模式）
SOFT_LIGHT（柔光）
HARD_LIGHT（强光）
OVERLAY（叠加）
对比比较（差集模式）
DIFFERENCE（差值）
EXCLUSION（排除）
减淡效果（变亮模式）
LIGHTEN（变亮）
COLOR_DODGE（颜色减淡）
SCREEN（滤色）
ADD（线性减淡，添加）
加深效果（变暗模式）
DARKEN（变暗）
COLOR_BURN（颜色加深）
MULTIPLY（正片叠底）
色彩效果（颜色模式）
HUE（色相）
SATURATION（饱和度）
COLOR（颜色）
LUMINOSITY（明度）
这些混合模式和图像编辑器，比如 Photoshop 中使用的混合模式是一样的，如果你想尝试每种混合模式，你可以在 Photoshop 中打开一些图像，将这些混合模式应用于这些图像上，观察效果。
注意：WebGL 渲染器仅支持 NORMAL，ADD，MULTIPLY 和 SCREEN 混合模式。任何其他模式都会像 NORMAL 一样。
查看示例
滤镜
Pixi 拥有多种滤镜，可以将一些特殊效果应用于精灵。所有滤镜都在 PIXI.filters 对象中。滤镜是 Pixi 最好的功能之一，因为它们可以让你轻松创建一些特殊效果，否则只有通过复杂的低级 WebGL 编程才能实现这些效果。
这是一个如何创建 BlurFilter（模糊滤镜）的示例（其他滤镜遵循相同的格式）：
// 创建一个模糊滤镜
let blurFilter = new PIXI.filters.BlurFilter();
// 设置模糊滤镜的属性
blurFilter.blur = 20;
// 将模糊滤镜添加到精灵的滤镜数组中
sprite.filters = [blurFilter];
Pixi 的所有显示对象（Sprite 和 Container 对象）都有一个滤镜数组。要向精灵添加滤镜，先创建滤镜，然后将其添加到精灵的滤镜数组中。你可以根据需要添加任意数量的滤镜。
sprite.filters = [blurFilter, sepiaFilter, displacementFilter];
使用它就像使用其他普通数组一样。要清除所有精灵的滤镜，只需清除数组即可。
sprite.filters = [];
除了这些属性，所有滤镜还包括额外的 padding 和 uniforms 属性。padding 增加了滤镜区域周围的空间。uniforms 是一个可用于向 WebGL 渲染器发送额外值的对象。在日常使用中，你永远不必担心设置 uniforms 属性。
PixiJS 在 4.0.0 版本的时候，将非核心滤镜转移到新的包 — pixi-filters，现在 PixiJS 内置的滤镜有下面这几种。
AlphaFilter
用来修改对象透明度的滤镜。在其他一些文档中，你可能看到的是 VoidFilter 这个滤镜，这是因为在 PixiJS 的 4.6.0 版本的时候，才添加 AlphaFilter，而弃用 VoidFilter。
BlurFilter
BlurFilter 将高斯模糊应用于对象。可以分别为 x 轴和 y 轴设置模糊强度。
BlurXFilter
BlurXFilter 将水平高斯模糊应用于对象。
BlurYFilter
BlurYFilter 将垂直高斯模糊应用于对象。
ColorMatrixFilter
ColorMatrixFilter 类允许你对 显示对象（displayObject）上每个像素的 RGBA 颜色和 alpha 值应用 5 ×4 矩阵变换，以生成一组具有新的 RGBA 颜色和 alpha 值的结果。它非常强大！使用它可是实现黑白、调整亮度、调整对比度、去色、灰度、调整色调，等许多效果。
DisplacementFilter
DisplacementFilter 类使用指定纹理（称为置换贴图）中的像素值来执行对象的位移。你可以使用这个滤镜来实现扭曲的效果。在这篇文章中已经讲过什么是 DisplacementFilter（置换滤镜）了，并且文章中也有一个不错的示例。
FXAAFilter
快速近似抗锯齿滤镜。
NoiseFilter 杂色效果滤镜。
注意：Pixi 的滤镜仅适用于 WebGL 渲染，因为 Canvas 绘图 API 太慢而无法实时更新它们。
这里有一个示例，包含了 Pixi 中绝大部分的滤镜。
查看示例
视频纹理
你可以将视频用作精灵的纹理，就像使用图像一样容易。使用 Texture 类的 fromVideo 方法就可以创建视频纹理。
videoTexture = PIXI.Texture.fromVideo(videoUrl);
videoSprite = new PIXI.Sprite(videoTexture);
stage.addChild(videoSprite);
或者，也可以使用 fromVideoUrl 方法从 URL 地址创建视频纹理。
视频纹理只是一个普通的 HTML5 <video> 元素，你可以通过纹理的 baseTexture.source 属性访问它，如下所示：
let videoSource = videoTexture.baseTexture.source;
然后，你可以使用任何 HTML5 <video> 元素的属性和方法控制视频，例如 play 和 pause。
videoSource.play();
videoSource.pause();
查看 HTML <video> 元素的完整规范，可以知道所有可以使用的属性和方法。
查看示例
适配多种分辨率
如果你对物理像素、设备独立像素、设备像素比，等一些名词还不熟悉，可以先看看这篇文章。
Pixi 会自动调整像素密度，以匹配运行内容的设备的分辨率。你所要做的就是为高分辨率和低分辨率提供不同的图像，Pixi 将帮助你根据当前的设备像素比选择正确的图像。
注意：当你创建高分辨率图像时，可以将“@2x”添加到图像文件名称后面，以说明图像是支持高分辨率的屏幕，例如，Retina 屏幕。同时这也会设置精灵的 baseTexture.resolution 属性（sprite.texture.baseTexture.resolution）。
第一步是找出当前的设备像素比。你可以使用 window.devicePixelRatio 方法执行此操作。将此值分配给变量。
let displayResolution = window.devicePixelRatio;
displayResolution 是一个描述设备像素比的数字。它由运行应用程序的设备自动提供。1 是标准分辨率; 2 是高密度分辨率; 你将越来越多地发现一些报告 3 的超高密度显示器。
下一步是将此值分配给渲染选项的 resolution 属性。在创建 Pixi 应用时执行此操作，如下所示：
// 创建一个 Pixi 应用 需要的一些参数
let option = {
width: 640,
height: 360,
transparent: true,
resolution: displayResolution
}
// 创建一个 Pixi 应用
let app = new PIXI.Application(option);
然后根据设备像素比选择正确的图像加载到纹理中。如下所示：
let texture;
if (displayResolution === 2) {
// 加载高分辨率图像
texture = PIXI.Texture.fromImage(“highResImage@2x.png”);
} else {
// 加载普通分辨率图像
texture = PIXI.Texture.fromImage(“normalResImage.png”);
}
let anySprite = new PIXI.Sprite(texture);
如果你需要知道加载纹理的设备像素比是多少，可以使用 texture 的 baseTexture.resolution 属性（texture.baseTexture.resolution）找出。
查看示例
绳（Rope）
另一个有趣的效果是 Rope。它允许精灵像波浪一样振荡或像蛇一样滑行，如下图所示。
首先，从想要变形的事物的图像开始。滑行蛇实际上是一个简单的直线图像，如下图所示。
然后决定你想要独立移动蛇的段数。蛇图像的宽度为 600 像素，因此大约 20 个片段会产生很好的效果。将图像宽度除以段数，就是每个绳段的长度。
let numberOfSegments = 20;
let imageWidth = 600;
let ropeSegment = imageWidth / numberOfSegments;
接下来，创建一个包含 20 个 Point 对象的数组。每个 Point 的 x 位置（第一个参数）将与下一个 Point 分开一个 ropeSegment 的距离。
let points = [];
for (let i = 0; i < numberOfSegments; i++) {
points.push(new PIXI.Point(i * ropeLength, 0));
}
现在使用 PIXI.mesh.Rope 方法 new 一个 Rope 对象。这个方法需要两个参数：
一个是 Rope 对象使用的纹理
一个是包含 Point 对象的数组
let snake = new PIXI.mesh.Rope(PIXI.Texture.fromImage(‘snake.png’), points);
将蛇添加到一个容器中，这样可以更容易定位。然后将容器添加到舞台并定位它。
let snakeContainer = new PIXI.Container();
snakeContainer.addChild(snake);
stage.addChild(snakeContainer);
snakeContainer.position.set(10, 150);
现在为游戏循环中的 Point 对象设置动画。通过 for 循环将数组中的每个 Point 按照椭圆形的轨迹移动，形成波浪效果。
count += 0.1;
for (let i = 0; i < points.length; i++) {
points[i].y = Math.sin((i * 0.5) + count) * 30;
points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * numberOfSegments;
}
查看示例
这里还有一篇文章，讲的是用 Rope 来实现游动的锦鲤的效果，看上去也很好玩。
总结
本文主要聊了聊平铺精灵、着色、蒙版、混合模式、滤镜、视频纹理、适配多种分辨率、绳（Rope），相关的东西。
如果你觉得文字解释的不清楚，在每小节中，都有一个或者多个相应的示例，你可以点开看看，而且示例中的注释也比较清楚。还有就是因为 PixiJS 的 API 时常有变化，所以要注意 PixiJS 的版本，文中大部分示例用的版本是 4.8.2，如果你在尝试使用的时候，发现和示例的效果不一样，可以先检查一下版本。
如果文中有错误的地方，还请小伙伴们指出，万分感谢。
