PixiJS v4が出ていたのでFilterを触っていきます

づや


PixiJS v4が出ていたのでFilterを触っていきます

こんにちは、づやです。

気づいたら、PixiJS が v4 になってました。WebGL Filter なるものが追加されていたので、触ってみました。

▼目次

  • Filterを触っていきます
    • インストールから
    • BlurFilter
    • ZoomBlurFilter
    • TwistFilter
  • 終わりに

Filterを触っていきます

インストールから

v4 自体が初めてなので、インストールからお作法に則って使ってみたいと思います。

インストールは npm 推奨なので、npm から。

npm install pixi.js

※「 npm って何?」って人は、こちらを先に読まれた方がよいかと思います。
npm の基本操作と解説

※この記事に出てくるコードを、いろんなブラウザで動かすには Babel が必要になります。
「Babelとは一体……」という方は、こちらを見ていただければ。

BlurFilter

まず、BlurFilter から使ってみます。
その名のとおり、ブラーがかけれるんだと思います。

今回はこの画像を使います。

かわいいこしあん

最初なので、お作法に則りつつ書いていきます。

// applicationを用意します
// 今回は画像サイズにあわせてます
const app = new PIXI.Application({
    width : 600 ,
    height : 546 
});

// DOMにPixi用のcanvasタグを追加
document.body.appendChild(app.view);

// 画像を読み込んでロードを待つよ
PIXI.loader.add('image', 'assets/images/sample.jpg').load((loader, resources) => {
    // ロード終わったらここの処理走るよ

    // 作った画像をstageに追加するよ
    const image = new PIXI.Sprite(resources.image.texture);
    app.stage.addChild(image);

    // ブラーフィルター作成
    let filter = new PIXI.filters.BlurFilter();

    // 画像にフィルターをかけるよ
    // 複数かけれるので、1個でも配列で渡す必要あり
    image.filters = [filter];
});

こうすると、画像がこんな感じになります。

こしあんが見えない

カンタンですね。
リファレンス を見ると、いろいろなメンバ変数を持っていますね。

例えば、コードを下記のように変更してみます。


// ブラーフィルター作成
let filter = new PIXI.filters.BlurFilter();

filter.blur = 50

// 画像にフィルターをかけるよ
image.filters = [filter];

blur に 50 を設定するとこうなります。

こしあんが全然みえない。。。

ということは、この値をいじってあげたら動きをつけられる気がします。
だんだん 0 にしていってみると、こんな感じにでブラーがとけていきます。
(小数点 1 桁までの数字にしようね)

>> ブラーデモ

ZoomBlurFilter

次は ZoomBlurFilter にしてみました。
たぶんこれ新しいやつです。

pixi 本体と別に、pixi-filters というソースを読み込む必要があります。
npm ならカンタンです。

npm install pixi-filters

でざっくり書いたコードがこちら
※stage作ったりとかは割愛してます

let filter = new PIXI.filters.ZoomBlurFilter();

image.filters = [filter];

これをかけると画像がこうなりますね。

かっこいいこしあん

疾走感が出ました。

リファレンスをみるとけっこういろんなパラーメータがありますね。
コンストラクタでも渡せるのでちょっとためしてみましょう。

let strength = 0.5; // エフェクトの強さ
let center = [app.renderer.width / 2, app.renderer.height / 2]; // 中心をどこにおくか
let innerRadius = 1; // エフェクトの中心部分の半径
let radius = -1; // 全体の半径
let filter = new PIXI.filters.ZoomBlurFilter(strength, center, innerRadius, radius);

image.filters = [filter];

こんな感じになりました。

みえない。。。

またこれらはメンバ変数としても保持しているので、strength とかを動かしたら、アニメーションさせることができそうですね。
こんな感じです。

>> ズームフィルターデモ

TwistFilter

長くなったので TwistFilter になります。

リファンス を見ながらいじってみましょう。

let padding = 20;
let angle = 4;
let radius = 250;
let filter = new PIXI.filters.TwistFilter(radius, angle, padding);

filter.offset = [300 , 273];
image.filters = [filter];

おお、渦ができましたね。

こ、こしあーーーん

こいつもメンバ変数をいじってあげればアニメーションさせることが可能です。

>> ツイストフィルターデモ

終わりに

まだまだたくさんあるので、他のフィルターは次回移行紹介できたらと思います。
テクスチャ重ねる系を紹介できたらいいな。

関係ないですけど、今回使用させていただいた画像かわいい ですよね。

 

づや
この記事を書いた人
づや

取締役

おすすめ記事

Recommended by