學習 PixiJS — 視覺效果

時間  2019-11-07
標籤 學習 pixijs 視覺 效果 欄目 快樂工作 简体版
原文   原文鏈接

平鋪精靈

平鋪精靈是一種特殊的精靈，能夠在必定的範圍內重複一個紋理。你可使用它們建立無限滾動的背景效果。要建立平鋪精靈，須要使用帶有三個參數的 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 圖像以及上面代碼的效果。數組

在這裏插入圖片描述

你可使用 tilePosition.x 和 tilePosition.y 屬性來移動平鋪精靈使用的紋理。如下是如何將平鋪精靈使用的紋理移動30像素。app

tilingSprite.tilePosition.x = 30;
tilingSprite.tilePosition.y = 30;
複製代碼

這裏不是在移動平鋪精靈，而是移動平鋪精靈使用的紋理。下圖是兩種狀況的對比。編輯器

在這裏插入圖片描述

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

tilingSprite.tileScale.x = 1.5;
tilingSprite.tileScale.y = 1.5;
複製代碼

原圖 與 上面代碼實現的效果的對比：post

在這裏插入圖片描述

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程