PixiJSでスーファミみたいなモザイクさせる #pixi.js

pixi.jsではフィルターでスーパーファミコンのようなモザイク処理(正しい呼び方がわからない)を行うことができます。

##@pixi/filter-pixelateをインストール
pixi.jsのバージョン5ではモザイク処理は標準では入っていません。

なのでインストールする必要があります。

npm install @pixi/filter-pixelate

これでモザイク処理が使えるようになります。

##使い方
使う際はまずはインポートします。

import {PixelateFilter} from '@pixi/filter-pixelate';

そしてモザイク処理を行いたい要素(containerなど)に追加します。

this.pixelateFilter = new PixelateFilter();
this.pixelateFilter.size = 1;
this.filters = [this.pixelateFilter];

ここまでが準備です。このpixelateFilter.sizeがモザイクの大きさです。1は通常の解像度と同じ大きさです。これが大きくなるとモザイクが大きくなります。

フェードインやフェードアウトで使う際にはループでこのpixelateFilter.sizeの値を大きくしたり小さくしたりするとスーファミで見たことのあるような感じのモザイク処理が出来上がります。

ちなみに上の画像のゲームはこちらです(遊んで！)
▷ おしっこ忍者

おまけ