PixiJS 介紹
PixiJS 是一個超快的2D渲染引擎。它自動偵測使用 WebGL 或者 Canvas。開發者無需專門學習 WebGL 就能感受到強大的硬件加速的力量。
PixiJS 會幫助你用 JavaScript 或者其他 HTML5 技術來顯示媒體，創建動畫或管理交互式圖像，從而製作一個遊戲或應用。它擁有語義化的，簡潔的 API 接口並且加入了一些非常有用的特性。比如支持紋理貼圖集和爲精靈（交互式圖像）提供了一個簡單的動畫系統。它也提供了一個完備的場景圖，你可以在精靈圖層裏面創建另一個精靈，當然也可以讓精靈響應你的鼠標或觸摸事件。
感受一下
下面這些是用 PixiJS 實現的一些例子，你可以點開看看。
安裝
爲了能很好的使用 PixiJS ，你需要在你項目的根目錄運行一個 web 服務器，這裏推薦使用 node.js 並且去用命令行安裝 http-server，當然你也可以用其他的 web 服務器，比如
Apache、Nginx，總之你需要讓你的項目在服務器環境下運行，也就是用 http://xxxxxx 這種方式來訪問你的項目，而不是 file://xxxxxx ，如果直接在本地打開 HTML 文件有些時候是會出問題的，比如用 file://xxxxxx 的方式運行項目時，圖片是跨域的，調用一些方法時，就會報錯了。
NPM 安裝：
$> npm install pixi.jsCDN 安裝：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>你也可以直接去 Github 下載 js 文件。
如果 PixiJS 安裝成功，在瀏覽器的控制檯中你會看見這樣的東西。
概念介紹
PixiJS 中有些比較重要的概念是需要知道的。
Pixi 應用
使用 PixiJS ，我們首先應該創建一個 Pixi 應用，使用 PIXI.Application() 方法可以 new 一個，這個方法可以傳入一個對象參數，這個對象中，可以設置 Pixi 應用的寬、高、是否透明，等一些屬性，具體所有可以設置的屬性可以到 Pixi 的文檔裏看。
在使用 PIXI.Application() 方法時，如果你沒有給傳入的參數對象設置 view 屬性，它會自動創建一個 canvas 元素，創建出來的 canvas 元素就在 Pixi 應用的 view 屬性中。
// 創建一個Pixi 應用
let app = new PIXI.Application({width: 256, height: 256});
// 把 Pixi 應用中創建出來的 canvas 添加到頁面上
document.body.appendChild(app.view);容器
容器是用來裝載多個顯示對象的， 它可以用 PIXI.Container() 方法來創建，而我們創建的 Pixi 應用的 stage 屬性就是一個容器對象，它被當作根容器使用，它將包裹所有你想用 Pixi 顯示的東西。
精靈
精靈是可以放在容器裏的特殊圖像對象。精靈是你能用代碼控制圖像的基礎。你能夠控制他們的位置，大小，和許多其他有用的屬性來產生交互和動畫。
創建一個精靈需要用 PIXI.Sprite() 方法。
紋理
因爲 Pixi 用 WebGL 和 GPU 去渲染圖像，所以圖像需要轉化成 GPU 可以處理的格式。可以被 GPU 處理的圖像被稱作 紋理 。在你讓精靈顯示圖片之前，需要將普通的圖片轉化成 WebGL 紋理。爲了讓所有工作執行的快速有效率，Pixi使用 紋理緩存 來存儲和引用所有你的精靈需要的紋理。紋理的名稱字符串就是圖像的地址。這意味着如果你有從"images/cat.png" 加載的圖像，你可以在紋理緩存中這樣找到他：
PIXI.utils.TextureCache["images/cat.png"];示例
效果圖
示例效果地址：
https://www.kkkk1000.com/images/learnPixiJS/
這個效果用到了 PixiJS 提供的一個濾鏡 — DisplacementFilter（置換濾鏡）
置換濾鏡就是選擇另一幅圖片，讓其在當前的圖片上產生凹凸效果。
原圖
置換圖
用 置換濾鏡 把 置換圖 平鋪 到 原圖 上之後
在這個效果中，是這樣的
原圖
置換圖
使用置換濾鏡後
用置換濾鏡讓原圖產生扭曲，通過不斷的改變置換圖的位置，使原圖的扭曲不斷的改變，看上去就像波浪了。
完整代碼
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>Pixi JS 置換濾鏡效果</title>
<style>
.start-btn,
.stop-btn {
display: inline-block;
color: #fff;
border-radius: 4px;
border: none;
cursor: pointer;
outline: none;
padding: 10px 20px;
margin-bottom: 30px;
}
.start-btn {
background-color: #ff0081;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.stop-btn {
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
margin-left: 20px;
box-shadow: 0 2px 25px rgba(22, 217, 227, 0.5);
}
</style>
</head>
<body>
<div>
<button class="start-btn">開始</button>
<button class="stop-btn">停止</button>
</div>
<div id="px-render"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
<script>
// 創建一個 Pixi應用 需要的一些參數
var option = {
width: 400,
height: 300,
transparent: true,
}
// 創建一個 Pixi應用
var app = new PIXI.Application(option);
// 獲取渲染器
var renderer = app.renderer;
// 圖片精靈
var preview;
// 置換圖精靈
var displacementSprite;
// 濾鏡
var displacementFilter;
// 舞臺（一個容器），這裏麪包括了圖片精靈、置換圖精靈
var stage;
var playground = document.getElementById('px-render');
function setScene(url) {
// renderer.view 是 Pixi 創建的一個canvas
// 把 Pixi 創建的 canvas 添加到頁面上
playground.appendChild(renderer.view);
// 創建一個容器
stage = new PIXI.Container();
// 根據圖片的 url，創建圖片精靈
preview = PIXI.Sprite.fromImage(url);
// 創建置換圖精靈，在創建置換濾鏡時會用到這個精靈
displacementSprite = PIXI.Sprite.fromImage('https://www.kkkk1000.com/images/learnPixiJS/sprite.png');
// 設置置換圖精靈爲平鋪模式
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
// 創建一個置換濾鏡
displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
// 添加 圖片精靈 到舞臺
stage.addChild(preview);
// 添加 置換圖精靈 到舞臺
stage.addChild(displacementSprite);
// 把 stage 添加到根容器上
app.stage.addChild(stage);
}
// 置換圖精靈的移動速度
var velocity = 1;
// raf 是調用 requestAnimationFrame方法的返回值，停止動畫效果時需要用到
var raf;
function animate() {
raf = requestAnimationFrame(animate);
// 改變置換圖精靈的位置
displacementSprite.x += velocity;
displacementSprite.y += velocity;
}
setScene('https://www.kkkk1000.com/images/learnPixiJS/view.jpg');
var start = document.querySelector('.start-btn');
var stop = document.querySelector('.stop-btn');
start. = function () {
// 設置舞臺的濾鏡
stage.filters = [displacementFilter];
// 開始動畫
animate();
}
stop. = function () {
// 取消濾鏡
stage.filters = [];
// 停止動畫
cancelAnimationFrame(raf);
}
</script>
</body>
</html>總結
因爲最近在學習 PixiJS，所以想把學習的知識總結一下，這篇文章是簡單的介紹了下 PixiJS，後續還會繼續寫一些關於 PixiJS 其他的東西。
如果文中有錯誤的地方，還請小夥伴們指出，萬分感謝。
