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の値を大きくしたり小さくしたりするとスーファミで見たことのあるような感じのモザイク処理が出来上がります。

画像の引き延ばされ方に注意

モザイク処理とは単純な拡大処理で1ドットを引き延ばして表示します。pixelateFilter.size = 4であれば4ドットずつの間隔でその1ドットを4倍に拡大して表示します。

この時その1ドットは右と下に引き延ばされます。

そうすると見た目としてはモザイクが大きくなるにつれ右下に画像が動いているように見えてしまいます。

これの対処法としては単純にそのcontainerを反対方向、つまり左上に移動させることです。pixelateFilter.sizeの半分量を反対側に移動してやるとその場にとどまってモザイク処理がかかっているように見えます。

ただし、私のテンプレートではSceneの座標を動かすとScene切り替え時にエラーになってしまったので(原因はわかってません。。)、一つcontainerを用意してそこにすべてaddChildしてこのcontainerにモザイク処理をかけて動かしてください。

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

おすすめゲーム

  • ゲーム「さめがめ」のサムネイル
    さめがめ
    同じ色で複数くっついているタイルをタッチして消すパズルゲーム。一度にたくさん消すと高得点!
  • ゲーム「フリック&チェイン」のサムネイル
    フリック&チェイン
    同色のブロックを4つ以上つなげると消えるパズルゲームです。ランキングはHARDのみ対応
  • ゲーム「コスモファイター」のサムネイル
    コスモファイター
    レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
  • ゲーム「vs.蚊」のサムネイル
    vs.蚊
    部屋に蚊が侵入!その数10匹!何としても奴らを殲滅せねばならぬ!!一匹残らずぶっ潰せ!!
  • ゲーム「うえにいく」のサムネイル
    うえにいく
    障害物を避けながらただただ上を目指すゲーム。シンプルだけど集中力が必要です。