摘要：將水平高斯模糊應(yīng)用于對象。下一步是將此值分配給渲染選項的屬性。蛇圖像的寬度為像素，因此大約個片段會產(chǎn)生很好的效果。通過循環(huán)將數(shù)組中的每個按照橢圓形的軌跡移動，形成波浪效果。

平鋪精靈是一種特殊的精靈，可以在一定的范圍內(nèi)重復(fù)一個紋理。你可以使用它們創(chuàng)建無限滾動的背景效果。要創(chuàng)建平鋪精靈，需要使用帶有三個參數(shù)的 TilingSprite 類（PIXI.extras.TilingSprite）

用法：

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

參數(shù)：

除此之外，平鋪精靈具有與普通精靈所有相同的屬性，并且與普通精靈的工作方式相同。他們還有 fromImage 和 fromFrame 方法，就像普通精靈一樣。以下是如何使用名稱是 brick.jpg 的100 x 100像素的圖像創(chuàng)建200 x 200像素的平鋪精靈。并且從畫布左上角偏移30像素。

以下是關(guān)鍵代碼：

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倍的關(guān)鍵代碼：

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

原圖 與 上面代碼實現(xiàn)的效果的對比：

tileScale 和 tilePosition 都有一個 set 方法，可以一行代碼設(shè)置 x 屬性和 y 屬性。

參數(shù)：

用法：

tilingSprite.tilePosition.set(30, 30);
tilingSprite.tileScale.set(1.5, 1.5);

平鋪精靈是創(chuàng)建重復(fù)圖像模式的便捷方式。因為你可以移動紋理的位置，所以你可以使用平鋪精靈創(chuàng)建無縫的滾動背景。這對于許多類型的游戲都非常有用。讓我們來看看如何做到這一點。

首先，從無縫平鋪圖像開始。無縫圖像是圖案在各方面匹配的圖像。如果并排放置圖像的副本，它們看起來就像是一個連續(xù)的大圖像，上面示例中用到的 brick.jpg 就是這種圖像。

接下來，使用此圖像創(chuàng)建一個平鋪精靈。然后在游戲循環(huán)中更新精靈的 tilePosition.x 屬性。

關(guān)鍵代碼：

function play() {
 tilingSprite.tilePosition.x -= 1;
}

效果圖：

查看示例

你還可以使用此功能創(chuàng)建一個稱為視差滾動的偽3D效果。就是在同一位置層疊多個這樣的平鋪精靈，并使看上去更遠(yuǎn)的圖像移動得比更近的圖像慢。就像下面這個示例一樣！

兩張用于做平鋪精靈的圖像：

實現(xiàn)的效果圖：

查看示例

精靈有一個 tint 屬性，給這個屬性賦值一個十六進制顏色值可以改變精靈的色調(diào)。

我們來試試吧！

關(guān)鍵代碼：

sprite.tint = 0xFFFF660;

原圖 與 上面代碼實現(xiàn)的效果的對比：

查看示例

每個精靈的 tint 屬性默認(rèn)值是白色（0xFFFFFF），也就是沒有色調(diào)。如果你想改變一個精靈的色調(diào)而不完全改變它的紋理，就使用著色。

Pixi 允許你使用 Graphics （圖形）對象來屏蔽任何精靈或具有嵌套子精靈的容器。蒙版是隱藏在形狀區(qū)域之外的精靈的任何部分的形狀。要使用蒙版，先創(chuàng)建精靈和 Graphics 對象。然后將精靈的 mask 屬性設(shè)置為創(chuàng)建的 Graphics 對象。

示例：

首先，用皮卡丘的圖像創(chuàng)建一個精靈。然后創(chuàng)建一個藍(lán)色正方形并定位在精靈的上方（形狀的顏色并不重要）。最后，精靈的 mask 屬性設(shè)置為創(chuàng)建的正方形對象。這樣會只顯示正方形區(qū)域內(nèi)精靈的圖像。精靈在正方形之外的任何部分都是不可見的。

原圖 與 使用蒙版后的對比：

關(guān)鍵代碼：

//創(chuàng)建精靈
let Pikachu = new PIXI.Sprite(PIXI.loader.resources[imgURL].texture);

//創(chuàng)建一個正方形對象
let rectangle = new PIXI.Graphics();
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 200, 200);
rectangle.endFill();
rectangle.x = 100;
rectangle.y = 100;

//給精靈設(shè)置蒙版
Pikachu.mask = rectangle;

查看示例

你還可以為蒙版設(shè)置動畫，去做出一些有趣的效果。而且如果是用 WebGL 渲染的話，還可以用精靈作為蒙版。下面這個示例是用三張圖片做成精靈，然后把一個精靈作為蒙版，并且給蒙版設(shè)置動畫的示例。

效果圖：

查看示例

blendMode 屬性確定精靈如何與其下層的圖像混合。

如下所示，可以將它們應(yīng)用于精靈：

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 中打開一些圖像，將這些混合模式應(yīng)用于這些圖像上，觀察效果。

注意：
WebGL 渲染器僅支持 NORMAL，ADD，MULTIPLY 和 SCREEN 混合模式。任何其他模式都會像 NORMAL 一樣。

查看示例

Pixi 擁有多種濾鏡，可以將一些特殊效果應(yīng)用于精靈。所有濾鏡都在 PIXI.filters 對象中。濾鏡是 Pixi 最好的功能之一，因為它們可以讓你輕松創(chuàng)建一些特殊效果，否則只有通過復(fù)雜的低級 WebGL 編程才能實現(xiàn)這些效果。

這是一個如何創(chuàng)建 BlurFilter （模糊濾鏡）的示例（其他濾鏡遵循相同的格式）：

//創(chuàng)建一個模糊濾鏡
let blurFilter = new PIXI.filters.BlurFilter();

//設(shè)置模糊濾鏡的屬性
blurFilter.blur = 20;

//將模糊濾鏡添加到精靈的濾鏡數(shù)組中
sprite.filters = [blurFilter];

Pixi 的所有顯示對象（Sprite 和 Container 對象）都有一個濾鏡數(shù)組。要向精靈添加濾鏡，先創(chuàng)建濾鏡，然后將其添加到精靈的濾鏡數(shù)組中。你可以根據(jù)需要添加任意數(shù)量的濾鏡。

sprite.filters = [blurFilter, sepiaFilter, displacementFilter];

使用它就像使用其他普通數(shù)組一樣。要清除所有精靈的濾鏡，只需清除數(shù)組即可。

sprite.filters = [];

除了這些屬性，所有濾鏡還包括額外的 padding 和 uniforms 屬性。padding 增加了濾鏡區(qū)域周圍的空間。uniforms 是一個可用于向 WebGL 渲染器發(fā)送額外值的對象。在日常使用中，你永遠(yuǎn)不必?fù)?dān)心設(shè)置 uniforms 屬性。

PixiJS 在4.0.0版本的時候，將非核心濾鏡轉(zhuǎn)移到新的包 — pixi-filters，現(xiàn)在 PixiJS 內(nèi)置的濾鏡有下面這幾種。

AlphaFilter

用來修改對象透明度的濾鏡。
在其他一些文檔中，你可能看到的是 VoidFilter 這個濾鏡，這是因為在 PixiJS 的4.6.0版本的時候，才添加 AlphaFilter，而棄用 VoidFilter。

BlurFilter

BlurFilter 將高斯模糊應(yīng)用于對象。可以分別為x軸和y軸設(shè)置模糊強度。

BlurXFilter

BlurXFilter 將水平高斯模糊應(yīng)用于對象。

BlurYFilter

BlurYFilter 將垂直高斯模糊應(yīng)用于對象。

ColorMatrixFilter

ColorMatrixFilter 類允許你對 顯示對象（displayObject） 上每個像素的 RGBA 顏色和 alpha 值應(yīng)用5x4矩陣變換，以生成一組具有新的 RGBA 顏色和 alpha 值的結(jié)果。它非常強大！使用它可是實現(xiàn)黑白、調(diào)整亮度、調(diào)整對比度、去色、灰度、調(diào)整色調(diào)，等許多效果。

DisplacementFilter

DisplacementFilter 類使用指定紋理（稱為置換貼圖）中的像素值來執(zhí)行對象的位移。你可以使用這個濾鏡來實現(xiàn)扭曲的效果。
在這篇文章中已經(jīng)講過什么是 DisplacementFilter（置換濾鏡）了，并且文章中也有一個不錯的示例。

FXAAFilter

快速近似抗鋸齒濾鏡。

NoiseFilter
雜色效果濾鏡。

注意：Pixi 的濾鏡僅適用于 WebGL 渲染，因為 Canvas 繪圖 API 太慢而無法實時更新它們。

這里有一個示例，包含了 Pixi 中絕大部分的濾鏡。

查看示例

你可以將視頻用作精靈的紋理，就像使用圖像一樣容易。使用 Texture 類的 fromVideo 方法就可以創(chuàng)建視頻紋理。

videoTexture = PIXI.Texture.fromVideo(videoUrl);
videoSprite = new PIXI.Sprite(videoTexture);
stage.addChild(videoSprite);

或者，也可以使用 fromVideoUrl 方法從 URL 地址創(chuàng)建視頻紋理。

視頻紋理只是一個普通的 HTML5 元素，你可以通過紋理的 baseTexture.source 屬性訪問它，如下所示：

let videoSource = videoTexture.baseTexture.source;

然后，你可以使用任何 HTML5 元素的屬性和方法控制視頻，例如 play 和 pause 。

videoSource.play();
videoSource.pause();

查看 HTML 元素的完整規(guī)范，可以知道所有可以使用的屬性和方法。

查看示例

如果你對物理像素、設(shè)備獨立像素、設(shè)備像素比，等一些名詞還不熟悉，可以先看看這篇文章 。

Pixi 會自動調(diào)整像素密度，以匹配運行內(nèi)容的設(shè)備的分辨率。你所要做的就是為高分辨率和低分辨率提供不同的圖像，Pixi 將幫助你根據(jù)當(dāng)前的設(shè)備像素比選擇正確的圖像。

注意：當(dāng)你創(chuàng)建高分辨率圖像時，可以將“@2x”添加到圖像文件名稱后面，以說明圖像是支持高分辨率的屏幕，例如，Retina 屏幕。同時這也會設(shè)置精靈的 baseTexture.resolution 屬性（sprite.texture.baseTexture.resolution）。

第一步是找出當(dāng)前的設(shè)備像素比。你可以使用 window.devicePixelRatio 方法執(zhí)行此操作。將此值分配給變量。

let displayResolution = window.devicePixelRatio;

displayResolution 是一個描述設(shè)備像素比的數(shù)字。它由運行應(yīng)用程序的設(shè)備自動提供。1是標(biāo)準(zhǔn)分辨率; 2是高密度分辨率; 你將越來越多地發(fā)現(xiàn)一些報告3的超高密度顯示器。

下一步是將此值分配給渲染選項的 resolution 屬性。在創(chuàng)建 Pixi 應(yīng)用時執(zhí)行此操作，如下所示：

//創(chuàng)建一個 Pixi應(yīng)用 需要的一些參數(shù)
let option = {
   width: 640,
   height: 360,
   transparent: true,
   resolution: displayResolution
}
//創(chuàng)建一個 Pixi應(yīng)用
let app = new PIXI.Application(option);

然后根據(jù)設(shè)備像素比選擇正確的圖像加載到紋理中。如下所示：

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);

如果你需要知道加載紋理的設(shè)備像素比是多少，可以使用 texture 的 baseTexture.resolution 屬性（texture.baseTexture.resolution）找出。

查看示例

另一個有趣的效果是 Rope。它允許精靈像波浪一樣振蕩或像蛇一樣滑行，如下圖所示。

首先，從想要變形的事物的圖像開始?；猩邔嶋H上是一個簡單的直線圖像，如下圖所示。

然后決定你想要獨立移動蛇的段數(shù)。蛇圖像的寬度為600像素，因此大約20個片段會產(chǎn)生很好的效果。將圖像寬度除以段數(shù)，就是每個繩段的長度。

let numberOfSegments = 20;
let imageWidth = 600;
let ropeSegment = imageWidth / numberOfSegments;

接下來，創(chuàng)建一個包含20個 Point 對象的數(shù)組。每個 Point 的 x 位置（第一個參數(shù)）將與下一個 Point 分開一個 ropeSegment 的距離。

let points = [];
for (let i = 0; i < numberOfSegments; i++) {
 points.push(new PIXI.Point(i * ropeLength, 0));
}

現(xiàn)在使用 PIXI.mesh.Rope 方法 new 一個 Rope 對象。這個方法需要兩個參數(shù)：

一個是 Rope 對象使用的紋理

一個是包含 Point 對象的數(shù)組

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);

現(xiàn)在為游戲循環(huán)中的 Point 對象設(shè)置動畫。通過 for 循環(huán)將數(shù)組中的每個 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 來實現(xiàn)游動的錦鯉的效果，看上去也很好玩。

本文主要聊了聊平鋪精靈、著色、蒙版、混合模式、濾鏡、視頻紋理、適配多種分辨率、繩（Rope），相關(guān)的東西。

如果你覺得文字解釋的不清楚，在每小節(jié)中，都有一個或者多個相應(yīng)的示例，你可以點開看看，而且示例中的注釋也比較清楚。
還有就是因為 PixiJS 的 API 時常有變化，所以要注意 PixiJS 的版本，文中大部分示例用的版本是4.8.2，如果你在嘗試使用的時候，發(fā)現(xiàn)和示例的效果不一樣，可以先檢查一下版本。

如果文中有錯誤的地方，還請小伙伴們指出，萬分感謝。

上一篇 學(xué)習(xí) PixiJS — 粒子效果

下一篇 學(xué)習(xí) PixiJS — 補間動畫