開始學習 PixiJS

PixiJS 介紹

PixiJS 是一個超快的2D渲染引擎。它自動偵測使用 WebGL 或者 Canvas。開發者無需專門學習 WebGL 就能感受到強大的硬體加速的力量。

PixiJS 會幫助你用 JavaScript 或者其他 HTML5 技術來顯示媒體，建立動畫或管理互動式影像，從而製作一個遊戲或應用。它擁有語義化的，簡潔的 API 介面並且加入了一些非常有用的特性。比如支援紋理貼圖集和為精靈（互動式影像）提供了一個簡單的動畫系統。它也提供了一個完備的場景圖，你可以在精靈圖層裡面建立另一個精靈，當然也可以讓精靈響應你的滑鼠或觸控事件。

要注意的是，雖然 PixiJS 非常適合製作遊戲，但它並不是一個遊戲引擎，它的核心本質是儘可能快速有效地在螢幕上移動物體。

感受一下

下面這些是用 PixiJS 實現的一些例子，你可以點開看看。

安裝

為了能很好的使用 PixiJS ，你需要在你專案的根目錄執行一個 web 伺服器，這裡推薦使用 node.js 並且去用命令列安裝 http-server，當然你也可以用其他的 web 伺服器，比如 Apache、Nginx，總之你需要讓你的專案在伺服器環境下執行，也就是用 http://xxxxxx 這種方式來訪問你的專案，而不是 file://xxxxxx ，如果直接在本地開啟 HTML 檔案有些時候是會出問題的，比如用 file://xxxxxx 的方式執行專案時，圖片是跨域的，呼叫一些方法時，就會報錯了。

NPM 安裝：

$> npm install pixi.js
複製程式碼

CDN 安裝：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
複製程式碼

你也可以直接去 Github 下載 js 檔案。

你可以用下面這樣的程式碼，測試是否已經安裝了PixiJS

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
	<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<body>
  <script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
  </script>
</body>
</html>
複製程式碼

如果 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"];
複製程式碼

示例

我們來看一個用 PixiJS 實現的讓圖片波浪化的效果。

效果圖

示例效果地址：

www.kkkk1000.com/images/lear…

這個效果用到了 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://www.kkkk1000.com/js/pixi4.8.2.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://user-gold-cdn.xitu.io/2018/11/26/1675014623de1512?w=512&h=512&f=png&s=86309'); 

            // 設定置換圖精靈為平鋪模式
            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://user-gold-cdn.xitu.io/2018/11/26/1675014623cc766f?w=400&h=266&f=jpeg&s=13439');


        var start = document.querySelector('.start-btn');
        var stop = document.querySelector('.stop-btn');
        start.onclick = function () {
            // 設定舞臺的濾鏡
            stage.filters = [displacementFilter];
            // 開始動畫
            animate();
        }

        stop.onclick = function () {
            // 取消濾鏡
            stage.filters = [];
            // 停止動畫
            cancelAnimationFrame(raf);
        }
    </script>
</body>

</html>
複製程式碼