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

一.副本绘制

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

绘制副本语句：

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);
});

效果图：

二.图片平铺效果

开发过游戏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的区别
});

效果图：移动的平铺背景墙