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

平鋪精靈是一種特殊的精靈，可以在一定的范圍內(nèi)重復(fù)一個(gè)紋理。你可以使用它們創(chuàng)建無(wú)限滾動(dòng)的背景效果。要?jiǎng)?chuàng)建平鋪精靈，需要使用帶有三個(gè)參數(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 屬性來(lái)移動(dòng)平鋪精靈使用的紋理。以下是如何將平鋪精靈使用的紋理移動(dòng)30像素。

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

這里不是在移動(dòng)平鋪精靈，而是移動(dòng)平鋪精靈使用的紋理。下圖是兩種情況的對(duì)比。

你還可以使用 tileScale.x 和 tileScale.y 屬性更改平鋪精靈使用的紋理的比例。以下是如何將平鋪精靈使用的紋理的大小增加到1.5倍的關(guān)鍵代碼：

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

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

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

參數(shù)：

用法：

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

平鋪精靈是創(chuàng)建重復(fù)圖像模式的便捷方式。因?yàn)槟憧梢砸苿?dòng)紋理的位置，所以你可以使用平鋪精靈創(chuàng)建無(wú)縫的滾動(dòng)背景。這對(duì)于許多類型的游戲都非常有用。讓我們來(lái)看看如何做到這一點(diǎn)。

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

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

關(guān)鍵代碼：

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

效果圖：

查看示例

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

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

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

查看示例

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

我們來(lái)試試吧！

關(guān)鍵代碼：

sprite.tint = 0xFFFF660;

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

查看示例

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

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

示例：

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

原圖 與 使用蒙版后的對(duì)比：

關(guān)鍵代碼：

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

//創(chuàng)建一個(gè)正方形對(duì)象
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è)置動(dòng)畫，去做出一些有趣的效果。而且如果是用 WebGL 渲染的話，還可以用精靈作為蒙版。下面這個(gè)示例是用三張圖片做成精靈，然后把一個(gè)精靈作為蒙版，并且給蒙版設(shè)置動(dòng)畫的示例。

效果圖：

查看示例

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

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

sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;

以下是可以使用的17種混合模式的完整列表：

沒(méi)有混合

NORMAL（正常）

對(duì)比比較（飽和度模式）

SOFT_LIGHT（柔光）

HARD_LIGHT（強(qiáng)光）

OVERLAY（疊加）

對(duì)比比較（差集模式）

DIFFERENCE（差值）

EXCLUSION（排除）

減淡效果（變亮模式）

LIGHTEN（變亮）

COLOR_DODGE（顏色減淡）

SCREEN（濾色）

ADD（線性減淡，添加）

加深效果（變暗模式）

DARKEN（變暗）

COLOR_BURN（顏色加深）

MULTIPLY（正片疊底）

色彩效果（顏色模式）

HUE（色相）

SATURATION（飽和度）

COLOR（顏色）

LUMINOSITY（明度）

這些混合模式和圖像編輯器，比如 Photoshop 中使用的混合模式是一樣的，如果你想嘗試每種混合模式，你可以在 Photoshop 中打開(kāi)一些圖像，將這些混合模式應(yīng)用于這些圖像上，觀察效果。

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

查看示例

Pixi 擁有多種濾鏡，可以將一些特殊效果應(yīng)用于精靈。所有濾鏡都在 PIXI.filters 對(duì)象中。濾鏡是 Pixi 最好的功能之一，因?yàn)樗鼈兛梢宰屇爿p松創(chuàng)建一些特殊效果，否則只有通過(guò)復(fù)雜的低級(jí) WebGL 編程才能實(shí)現(xiàn)這些效果。

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

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

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

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

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

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

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

sprite.filters = [];

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

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

AlphaFilter

用來(lái)修改對(duì)象透明度的濾鏡。
在其他一些文檔中，你可能看到的是 VoidFilter 這個(gè)濾鏡，這是因?yàn)樵?PixiJS 的4.6.0版本的時(shí)候，才添加 AlphaFilter，而棄用 VoidFilter。

BlurFilter

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

BlurXFilter

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

BlurYFilter

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

ColorMatrixFilter

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

DisplacementFilter

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

FXAAFilter

快速近似抗鋸齒濾鏡。

NoiseFilter
雜色效果濾鏡。

注意：Pixi 的濾鏡僅適用于 WebGL 渲染，因?yàn)?Canvas 繪圖 API 太慢而無(wú)法實(shí)時(shí)更新它們。

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

查看示例

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

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

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

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

let videoSource = videoTexture.baseTexture.source;

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

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

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

查看示例

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

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

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

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

let displayResolution = window.devicePixelRatio;

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

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

//創(chuàng)建一個(gè) Pixi應(yīng)用 需要的一些參數(shù)
let option = {
   width: 640,
   height: 360,
   transparent: true,
   resolution: displayResolution
}
//創(chuàng)建一個(gè) 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）找出。

查看示例

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

首先，從想要變形的事物的圖像開(kāi)始。滑行蛇實(shí)際上是一個(gè)簡(jiǎn)單的直線圖像，如下圖所示。

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

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

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

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

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

一個(gè)是 Rope 對(duì)象使用的紋理

一個(gè)是包含 Point 對(duì)象的數(shù)組

let snake = new PIXI.mesh.Rope(PIXI.Texture.fromImage("snake.png"), points);

將蛇添加到一個(gè)容器中，這樣可以更容易定位。然后將容器添加到舞臺(tái)并定位它。

let snakeContainer = new PIXI.Container();
snakeContainer.addChild(snake);
stage.addChild(snakeContainer);
snakeContainer.position.set(10, 150);

現(xiàn)在為游戲循環(huán)中的 Point 對(duì)象設(shè)置動(dòng)畫。通過(guò) for 循環(huán)將數(shù)組中的每個(gè) Point 按照橢圓形的軌跡移動(dòng)，形成波浪效果。

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 來(lái)實(shí)現(xiàn)游動(dòng)的錦鯉的效果，看上去也很好玩。

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

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

如果文中有錯(cuò)誤的地方，還請(qǐng)小伙伴們指出，萬(wàn)分感謝。

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

下一篇 學(xué)習(xí) PixiJS — 補(bǔ)間動(dòng)畫