前端动画渲染引擎pixi.js系列（6）副本实现和平铺精灵TilingSprite

素颜马尾好姑娘i 2021-09-12 05:34 1091阅读 0赞

## 一.副本绘制 ##

显示对象的副本绘制是指对一个显示精灵或容器进行副本绘制，所绘制出来的副本对象跟原显示对象将一模一样。该方法主要应用于需要复制另一个复杂场景显示对象时，无需再次重新创建复杂场景的所有显示对象，只需使用副本渲染即可。

绘制副本语句：

var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
    var rt = new PIXI.RenderTexture(brt);
    var sprite = new PIXI.Sprite(rt);
    app.ticker.add(function() {
    	app.renderer.render(container, rt);
    });

（注）上述语句中container就是原显示对象；sprite则是绘制出来的副本。  
创建副本的完整参考代码如下：

var container = new PIXI.Container();
    container.x = 100;
    container.y = 60;
    app.stage.addChild(container);
    //随机堆叠一些图片
    var texture = PIXI.Texture.fromImage('../img/tiling.jpeg');
    for(var i = 0; i < 25; i++) {
    	var bunny = new PIXI.Sprite(texture);
    	bunny.x = (i % 5) * 30;
    	bunny.y = Math.floor(i / 5) * 30;
    	bunny.rotation = Math.random() * (Math.PI * 2)
    	container.addChild(bunny);
    }
    
    //副本区域宽，副本区域高，缩放模式，模糊度
    var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
    var rt = new PIXI.RenderTexture(brt);
    var sprite = new PIXI.Sprite(rt);
    sprite.x = 550;
    sprite.y = 0;
    app.stage.addChild(sprite);
    app.ticker.add(function() {
    	app.renderer.render(container, rt);
    });

效果图：  
![Center][]

## 二.图片平铺效果 ##

开发过游戏app的都知道，有些游戏如天天跑酷等背景是循环移动的。要实现这种效果，可以使用平铺精灵。平铺精灵PIXI.extras.TilingSprite是快速绘制平铺图像的对象。创建语句是：

new PIXI.extras.TilingSprite(texture, width, height)

（注）其中的参数width和height是指平铺的范围值。

除了上述方法，还能通过如下方法创建平铺精灵：

**PIXI.extras.TilingSprite.from(source, width, height)：**

source值可以是frame id, image url, video url, canvas element, video element, base texture

**PIXI.extras.TilingSprite.fromImage(imageId, width, height, crossorigin, scaleMode)：**

imageId是图片的路径。

创建平铺效果的完整参考代码如下：

var app = new PIXI.Application();
    document.body.appendChild(app.view);
    
    var texture = PIXI.Texture.fromImage('../img/tiling.jpeg'); //创建纹理
    var tilingSprite = new PIXI.extras.TilingSprite(
    	texture,
    	app.renderer.width,
    	app.renderer.height
    ); //创建瓷砖效果显示精灵
    app.stage.addChild(tilingSprite);
    
    app.ticker.add(function() {
    	tilingSprite.tileScale.x = 0.5; // 在渲染砖块效果下缩放，注意与scale.x的区别
    	tilingSprite.tileScale.y = 0.5; // 在渲染砖块效果下缩放，注意与scale.y的区别
    
    	tilingSprite.tilePosition.x += 1; // 在渲染砖块效果下移动，注意与position.x的区别
    	tilingSprite.tilePosition.y += 1; // 在渲染砖块效果下移动，注意与position.y的区别
    });

效果图：移动的平铺背景墙  
![Center 1][]

[Center]: /images/20210813/df671727ce9f42e984d66d550d0434d5.png
[Center 1]: /images/20210813/90bfea0e1e4e4efe993f568b1bf7fe71.png