开始学习 PixiJS

转载

思月行云 2023-01-08 09:48:01

文章标签 滤镜 html WebGL 文章分类 运维

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 实现的让图片波浪化的效果。

效果图

示例效果地址：

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>