学习 PixiJS — 视觉效果

时间 2019-11-07

原文原文链接

平铺精灵

平铺精灵是一种特殊的精灵，能够在必定的范围内重复一个纹理。你可使用它们建立无限滚动的背景效果。要建立平铺精灵，须要使用带有三个参数的 TilingSprite 类（PIXI.extras.TilingSprite）html

用法：git

let tilingSprite = new PIXI.extras.TilingSprite(texture, width, height);

参数：github

名称	默认值	描述
texture		平铺精灵的纹理
width	100	平铺精灵的宽度
height	100	平铺精灵的高度

除此以外，平铺精灵具备与普通精灵全部相同的属性，而且与普通精灵的工做方式相同。他们还有 fromImage 和 fromFrame 方法，就像普通精灵同样。如下是如何使用名称是 brick.jpg 的100 x 100像素的图像建立200 x 200像素的平铺精灵。而且从画布左上角偏移30像素。web

如下是关键代码：编程

let tilingSprite = new PIXI.extras.TilingSprite(
 PIXI.loader.resources[imgURL].texture, 200, 200
);
tilingSprite.x = 30;
tilingSprite.y = 30;

下图显示了 brick.jpg 图像以及上面代码的效果。segmentfault

你可使用 tilePosition.x 和 tilePosition.y 属性来移动平铺精灵使用的纹理。如下是如何将平铺精灵使用的纹理移动30像素。数组

tilingSprite.tilePosition.x = 30;
tilingSprite.tilePosition.y = 30;

这里不是在移动平铺精灵，而是移动平铺精灵使用的纹理。下图是两种状况的对比。app

你还可使用 tileScale.x 和 tileScale.y 属性更改平铺精灵使用的纹理的比例。如下是如何将平铺精灵使用的纹理的大小增长到1.5倍的关键代码：编辑器

tilingSprite.tileScale.x = 1.5;
tilingSprite.tileScale.y = 1.5;

原图与上面代码实现的效果的对比：ide

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 值应用5x4矩阵变换，以生成一组具备新的 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，若是你在尝试使用的时候，发现和示例的效果不同，能够先检查一下版本。

若是文中有错误的地方，还请小伙伴们指出，万分感谢。

上一篇学习 PixiJS — 粒子效果

下一篇学习 PixiJS — 补间动画