pixi.js 水波與漣漪的濾鏡設定

套件

// npm 安裝 pixi-filters 
npm install pixi-filters 

寫法

import {ShockwaveFilter} from 'pixi-filters';
import {Sprite, Assets, Container, DisplacementFilter} from 'pixi.js';

// pixi.js v8.x addressMode set repeat 的用法
// 引入素材
const texture1 = await Assets.load("圖片路徑");
// texture 設定 
texture1.source.addressMode  = 'repeat'; 
const sprite = new Sprite(texture1);
const displacementFilter = new DisplacementFilter(sprite);

const shockwaveFilter = new ShockwaveFilter(
    {
      center: {
        x: Math.random() * app.screen.width,   // 隨機 x 點
        y: Math.random() * app.screen.height,  // 隨機 y 點
      },
      radius: 160,   // 漣漪半徑
      wavelength: 65,// 漣漪波長
      amplitude: 100,// 漣漪震幅
      speed: 300,    // 漣漪速度
      time:1,        // 漣漪出現時間
      brightness:5,
    },
  );