學習 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 — 補間動畫