本篇仍然要用<script src="pixi-layer.js"></script>

素材用 Day7 PIXI.extras.TilingSprite車車

一開始一樣要設定stage

app.stage = new PIXI.display.Stage();

再來建立一個PIXI.display.Layer
並設定useDoubleBuffer useRenderTexture

var layer = new PIXI.display.Layer();
layer.useDoubleBuffer = true; // 沒加就會壞
layer.useRenderTexture = true; // 加了才能用RenderTexture

製作殘影,alpha預設為1

var trailSprite = new PIXI.Sprite(layer.getRenderTexture());
trailSprite.alpha = 0.6;

layer.addChild(trailSprite);

最後把layer全部都加到stage上

app.stage.addChild(layer);

var showLayer = new PIXI.Sprite(layer.getRenderTexture());
app.stage.addChild(showLayer);

最後在ticker中,讓車車移動,就會有殘影囉

app.ticker.add(delta => {
    mountTiling.tilePosition.x -= 2;
    cloudTiling.tilePosition.x -= 0.5;
    groundTiling.tilePosition.x -= 2;
    anim.x += 10;

  });

今天發文的時間我正在前往東福寺的JR上，下午要去搭嵐山小火車
我爸媽這幾天得了上車看到位置就要趕快佔住的恐慌症，前幾天站了兩小時差點沒崩潰登愣