開始學習 PixiJS

時間 2019-11-08

標籤開始學習 pixijs 简体版

原文原文鏈接

PixiJS 介紹

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

PixiJS 會幫助你用 JavaScript 或者其餘 HTML5 技術來顯示媒體，建立動畫或管理交互式圖像，從而製做一個遊戲或應用。它擁有語義化的，簡潔的 API 接口而且加入了一些很是有用的特性。好比支持紋理貼圖集和爲精靈（交互式圖像）提供了一個簡單的動畫系統。它也提供了一個完備的場景圖，你能夠在精靈圖層裏面建立另外一個精靈，固然也可讓精靈響應你的鼠標或觸摸事件。html

要注意的是，雖然 PixiJS 很是適合製做遊戲，但它並非一個遊戲引擎，它的核心本質是儘量快速有效地在屏幕上移動物體。java

感覺一下

下面這些是用 PixiJS 實現的一些例子，你能夠點開看看。node

cavalier challengegit

Run Pixie Rungithub

Filters Demoweb

WASTE INVADERSajax

Storm Brewingnpm

H5場景小動畫canvas

打磚塊遊戲

安裝

爲了能很好的使用 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 實現的讓圖片波浪化的效果。

效果圖

示例效果地址：

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://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://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.onclick = function () {
            // 設置舞臺的濾鏡
            stage.filters = [displacementFilter];
            // 開始動畫
            animate();
        }

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

</html>