學習 PixiJS — 視覺效果

平鋪精靈

平鋪精靈是一種特殊的精靈，可以在一定的範圍內重複一個紋理。你可以使用它們創建無限滾動的背景效果。要創建平鋪精靈，需要使用帶有三個參數的 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 值應用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("[email protected]");
} 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 — 視覺效果

平鋪精靈

着色

蒙版

混合模式

濾鏡

視頻紋理

適配多種分辨率

繩（Rope）

總結

跨站請求僞造—CSRF

JavaScript導出excel文件，並修改文件樣式

畢業一年時的反思

簡單說 CSS濾鏡 filter屬性

簡單說如何做一個chrome 去廣告插件

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結