Pixi.jsでマスク処理

f:id:okayu-moka:20200517180536p:plain

結論

Container.mask にスプライトとか登録すれば簡単にできます。
#FFFFFFの部分が表示。#000000は非表示。中間の色は半透明になります。

デモサイト

okayumoka.github.io

リポジトリ： github.com

マスク画像の例

こんな感じで、表示したい部分を#FFFFFFにした画像を用意します。

実際のコード

すごく簡単にできてうれしいですね。

document.getElementById("version").innerText = `Pixi.js Version ${PIXI.VERSION}`;


const app = new PIXI.Application({
  width: 800,
  height: 600,
  transparent: false
});
document.getElementById('canvas_wrapper').appendChild(app.view);

const container = new PIXI.Container();
app.stage.addChild(container);

const img1 = document.getElementById("img1");
const sprite = new PIXI.Sprite(PIXI.Texture.from(img1));
sprite.anchor.set(0);
sprite.x = 0;
sprite.y = 0;
container.addChild(sprite);

const maskSprites = (() => {
  maskMap = {};
  ['mask1', 'mask2', 'mask3', 'mask4', 'mask5'].forEach((id) => {
    const maskImg = document.getElementById(id);
    const sprite = new PIXI.Sprite(PIXI.Texture.from(maskImg));
    maskMap[id] = sprite;
  });
  return maskMap;
})();
container.mask = maskSprites['mask1'];

$('.mask-btn').on('click', (e) => {
  const $btn = $(e.currentTarget);
  const maskId = $btn.data('mask');
  container.mask = maskSprites[maskId];
});