开始学习 PixiJS

时间 2019-11-08

标签开始学习 pixijs 繁體版

原文原文链接

PixiJS 介绍

PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感觉到强大的硬件加速的力量。javascript

PixiJS 会帮助你用 JavaScript 或者其余 HTML5 技术来显示媒体，建立动画或管理交互式图像，从而制做一个游戏或应用。它拥有语义化的，简洁的 API 接口而且加入了一些很是有用的特性。好比支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你能够在精灵图层里面建立另外一个精灵，固然也可让精灵响应你的鼠标或触摸事件。css

要注意的是，虽然 PixiJS 很是适合制做游戏，但它并非一个游戏引擎，它的核心本质是尽量快速有效地在屏幕上移动物体。html

感觉一下

下面这些是用 PixiJS 实现的一些例子，你能够点开看看。java

cavalier challengenode

Filters Demogithub

Storm Brewingajax

安装

为了能很好的使用 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>
复制代码

总结

由于最近在学习 PixiJS，因此想把学习的知识总结一下，这篇文章是简单的介绍了下 PixiJS，后续还会继续写一些关于 PixiJS 其余的东西。

若是文中有错误的地方，还请小伙伴们指出，万分感谢。

参考

PixiJS 官网

Pixi 中文教程

PixiJS API 文档

Pixi JS Displacement Effect