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.jsCDN 装置：
<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"];示例
结果图
示例结果地点：
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>总结
由于近来在进修 PixiJS，所以想把进修的学问总结一下，这篇文章是简朴的引见了下 PixiJS，后续还会继承写一些关于 PixiJS 其他的东西。
假如文中有毛病的处所，还请小伙伴们指出，万分谢谢。
参考
