pixi.jsのSpriteを星型にトリミング(マスク)する

はじめに

pixi.jsで作成したGraphicsやSpriteをトリミングするためには、マスク処理が必要になります。今回は画面全体に表示した芝生を星型にトリミングしてみようと思います。

ApplicationにSpriteを追加

まずは、画面全体に芝生を表示します。Spriteを上下左右、指定した幅まで繰り返し表示したいので、今回はPIXI.Spriteではなく、PIXI.TilingSpriteを使用しています。第二、三引数に横幅と縦幅を指定してあげることで、その幅まで画像が繰り返し表示されます。

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
});

const texture = PIXI.Texture.from(
  'https://pixijs.io/examples/examples/assets/bg_grass.jpg'
);
const tilingSprite = new PIXI.TilingSprite(
  texture,
  window.innerWidth,
  window.innerHeight
);
app.stage.addChild(tilingSprite);

document.body.appendChild(app.view);

星型にトリミングする

次に、トリミングするために星型をGraphicsで作成します。

const starMask = new PIXI.Graphics();
starMask
  .beginFill()
  .moveTo(108, 10)
  .lineTo(141, 80)
  .lineTo(218, 88.3)
  .lineTo(162, 141)
  .lineTo(175, 215)
  .lineTo(108, 180)
  .lineTo(41.2, 215)
  .lineTo(55, 141)
  .lineTo(1, 88)
  .lineTo(75, 78)
  .lineTo(108, 10)
  .endFill();

このGraphicsをtilingSpriteのmaskプロパティに代入してあげれば、トリミング完了です。

tilingSprite.mask = starMask;