前端动画渲染引擎pixi.js系列（7）粒子容器、遮罩层和滤镜的应用

àì夳堔傛蜴生んèń 2021-09-12 05:36 1429阅读 0赞

## 一.粒子容器 ##

粒子容器PIXI.particles.ParticleContainer是一个能容纳大量显示精灵的容器，其具有快速、高效的特点，支持容期内显示对象的位置变化、大小缩放和角度旋转；然而出于性能的考虑，同时也屏蔽了容器内显示对象如基色变化、遮罩层等特效功能。粒子容器继承于PIXI.Container。创建方法如下：

new PIXI.particles.ParticleContainer(maxSize, properties, batchSize);

该函数中，maxSize表示最大容纳量；properties表示设置粒子容器的属性；batchSize表示每批渲染对象的数量，默认值与maxSize一样。

创建粒子容器的完整参考代码如下：

//创建粒子容器
    var sprites = new PIXI.particles.ParticleContainer(10000, {
    	scale: true,
    	position: true,
    	rotation: true,
    	uvs: true,
    	alpha: true
    });
    app.stage.addChild(sprites);
    
    //创建粒子
    var totalSprites = app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
    for(var i = 0; i < totalSprites; i++) {
    	var dude = PIXI.Sprite.fromImage('../img/bunny.png');
    	//设置中心点
    	dude.anchor.set(0.5);
    	//设置不同缩放值
    	dude.scale.set(0.8 + Math.random() * 0.3);
    	// 随机出现位置
    	dude.x = Math.random() * app.renderer.width;
    	dude.y = Math.random() * app.renderer.height;
    	// 设置不同的颜色
    	dude.tint = Math.random() * 0x808080;
    	//添加到粒子容器中
    	sprites.addChild(dude);
    }

效果图：  
![Center][]

此案例中快速渲染了10000个显示精灵，然后完全不会感觉到卡顿情况的发生。

## 二.遮罩层 ##

遮罩层，是指可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。在显示精灵中，遮罩层属性用mask表示，遮罩层mask的赋值参数类型为PIXI.Graphics和PIXI.Sprite，设置遮罩层的对象只有遮罩层区域会显示出来。

遮罩层应用的完整参考代码如下：

app.stage.interactive = true;
    //建立显示精灵1
    var bGrotate = PIXI.Sprite.fromImage('../img/BGrotate.jpg');
    bGrotate.anchor.x = 0.5;
    bGrotate.anchor.y = 0.5;
    bGrotate.position.x = app.renderer.width / 2;
    bGrotate.position.y = app.renderer.height / 2;
    //建立显示精灵2
    var bgFront = PIXI.Sprite.fromImage('../img/SceneRotate.jpg');
    bgFront.anchor.x = 0.5;
    bgFront.anchor.y = 0.5;
    bgFront.position.x = app.renderer.width / 2;
    bgFront.position.y = app.renderer.height / 2;
    //建立显示容器
    var container = new PIXI.Container();
    container.addChild(bGrotate);
    container.addChild(bgFront);
    app.stage.addChild(container);
    
    //建立画笔
    var thing = new PIXI.Graphics();
    app.stage.addChild(thing);
    thing.position.x = app.renderer.width / 2;
    thing.position.y = app.renderer.height / 2;
    thing.clear();
    thing.beginFill(0x8bc5ff, 0.4);
    thing.drawCircle(0, 0, 0);
    thing.lineStyle(0);
    //设置遮罩层属性后，将会隐藏，只有赋值该属性的对象区域能显示
    bgFront.mask = thing;
    
    var r = 0;
    app.ticker.add(function() {
    	r += 10;
    	thing.clear();
    	thing.beginFill(0x8bc5ff, 0.4);
    	thing.drawCircle(0, 0, r);
    	thing.lineStyle(0);
    });

效果图：图SceneRotate.jpg(绿色叶子)由圆心向外扩展。

![Center 1][]

## 三.滤镜 ##

滤镜主要是用来实现图像的各种特殊效果。在显示对象中用属性filters表示，要移除滤镜只需把此属性设为null即可。系统提供的滤镜有：

BlurFilter  
BlurXFilter  
BlurYFilter  
ColorMatrixFilter  
DisplacementFilter  
FXAAFilter  
NoiseFilter  
VoidFilter

详细用法可以查看pixi的api文档。

模糊滤镜应用的完整参考代码如下：

var bg = PIXI.Sprite.fromImage('../img/BGrotate.jpg');
    bg.width = app.renderer.width;
    bg.height = app.renderer.height;
    app.stage.addChild(bg);
    var littleDudes = PIXI.Sprite.fromImage('../img/panda.png');
    littleDudes.position.x = 100;
    littleDudes.position.y = 100;
    app.stage.addChild(littleDudes);
    var blurFilter1 = new PIXI.filters.BlurFilter();
    littleDudes.filters = [blurFilter1];
    var count = 0;
    
    app.ticker.add(function() {
    	count += 0.01;
    	var blurAmount = Math.cos(count);
    	blurFilter1.blur = 20 * (blurAmount);
    });

效果图：  
![Center 2][]

[Center]: /images/20210813/83895a307e1b46bdb57781045b8c1ad8.png
[Center 1]: /images/20210813/dc08b2c22f134c0a8e669b18f627a853.png
[Center 2]: /images/20210813/24b800b8692d4545a8533e058054f354.png